前言

前幾天偶爾看到一篇 的相關(guān)文章，對這個技術(shù)還是挺感興趣的，在了解一些相關(guān)知識的基礎(chǔ)上，看下自己能否小小的實踐下。

什么是 ?

(wasm)就是一個可移植、體積小、加載快并且兼容 Web 的全新格式。可以將 C,C++等語言編寫的模塊通過編譯器來創(chuàng)建 wasm 格式的文件，此模塊通過二進制的方式發(fā)給瀏覽器，然后 js 可以通過 wasm 調(diào)用其中的方法功能。

的優(yōu)勢

網(wǎng)上對于這個相關(guān)的介紹應(yīng)該有很多了， 優(yōu)勢性能好，運行速度遠高于 Js,對于需要高計算量、對性能要求高的應(yīng)用場景如圖像/視頻解碼、圖像處理、3D/WebVR/AR 等，優(yōu)勢非常明顯，們可以將現(xiàn)有的用 C、C++等語言編寫的庫直接編譯成 運行到瀏覽器上，并且可以作為庫被 引用。那就意味著我們可以將很多后端的工作轉(zhuǎn)移到前端，減輕服務(wù)器的壓力。.........

最簡單的實踐調(diào)用

我們編寫一個最簡單的 c 文件

int?add(int?a,int?b)?{?
??return?a?+?b;?
}

然后安裝對于的 編譯器 安裝指南

emcc?test.c?-Os?-s?WASM=1?-s?SIDE_MODULE=1?-o?test.wasm

然后我們在 html 中引入使用即可

fetch('./test.wasm').then(response?=>?
??response.arrayBuffer()?
).then(bytes?=>?
??WebAssembly.instantiate(bytes)?
).then(results?=>?{?
??const?add?=?results.instance.exports.add?
??console.log(add(11,33))?
});

這時我們即可在控制臺看到對應(yīng)的打印日志,成功調(diào)用我們編譯的代碼啦

正式開動

既然我們已經(jīng)知道如何能快速的調(diào)用到一些已經(jīng)成熟的 C,C++的類庫，那我們離在線剪輯視頻預(yù)期目標更進一步了。

最終 demo 演示

由于錄制操作的電腦 cpu 不太行，所以可能耗時比較久，但整體的效果還是能看的到滴

demo 倉庫地址()

在這個之前你得稍微的了解下啥是 ? 以下根據(jù)維基百科的目錄解釋

是一個開放源代碼的自由軟件，可以運行音頻和視頻多種格式的錄影、轉(zhuǎn)換、流功能[1]，包含了 ——這是一個用于多個項目中音頻和視頻的解碼器庫，以及 ——一個音頻與視頻格式轉(zhuǎn)換庫。

簡單的說這個就是由 C 語言編寫的視頻處理軟件，它的用法也是相當?shù)魏唵?/p>

我主要將這次需要用到的命令給調(diào)了出來，如果你還可能用到別的命令用代碼做視頻，可以根據(jù)他的官方文檔查看 ，還可以了解下阮一峰大佬的文章 ()

ffmpeg?-ss?[start]?-i?[input]?-to?[end]?-c?copy?[output]

start 為開始時間 end 為結(jié)束時間 input 為需要操作的視頻源文件 為輸出文件的位置名稱

這一行代碼就是我們需要用到的剪輯視頻的命令了

獲取相關(guān)的的wasm

由于通過 編譯 成 wasm 存在較多的環(huán)境問題，所以我們這次直接使用在線已經(jīng)編譯好的 CDN 資源

這邊就直接使用了這個比較成熟的庫

為了本地調(diào)試方便，我把其相關(guān)的資源都下了下來 一共 4 個資源文件

ffmpeg.min.js?

ffmpeg-core.js?
ffmpeg-core.wasm?
ffmpeg-core.worker.js

我們使用的時候只需引入第一個文件即可，其它文件會在調(diào)用時通過 fetch 方式去拉取資源

最小的功能實現(xiàn)

前置功能實現(xiàn): 在我們本地需要實現(xiàn)一個 node 服務(wù)，因為使用 這個模塊會出現(xiàn)如果沒在服務(wù)器端設(shè)置響應(yīng)頭，會報錯 is not用代碼做視頻，這個是因為系統(tǒng)的安全漏洞，瀏覽器默認禁用了該 api，若要啟用則需要在 頭上設(shè)置

Cross-Origin-Opener-Policy:?same-origin?
Cross-Origin-Embedder-Policy:?require-corp

我們啟動一個簡易的 node 服務(wù)

const?Koa?=?require('koa');?
const?path?=?require('path')?
const?fs?=?require('fs')?
const?router?=?require('koa-router')();?
const?static?=?require('koa-static')?
const?staticPath?=?'./static'?
const?app?=?new?Koa();?
app.use(static(?
????path.join(__dirname,?staticPath)?
))?
//?log?request?URL:?
app.use(async?(ctx,?next)?=>?{?
????console.log(`Process?${ctx.request.method}?${ctx.request.url}...`);?
????ctx.set('Cross-Origin-Opener-Policy',?'same-origin')?
????ctx.set('Cross-Origin-Embedder-Policy',?'require-corp')?
????await?next();?
});?
?
router.get('/',?async?(ctx,?next)?=>?{?
????ctx.response.body?=?'
Index
';?
});?
router.get('/:filename',?async?(ctx,?next)?=>?{?
????console.log(ctx.request.url)?
????const?filePath?=?path.join(__dirname,?ctx.request.url);?
????console.log(filePath)?
????const?htmlContent?=?fs.readFileSync(filePath);?
????ctx.type?=?"html";?
????ctx.body?=?htmlContent;?
});?
app.use(router.routes());?
app.listen(3000);?
console.log('app?started?at?port?3000...');

我們做一個最小化的 demo 來實現(xiàn)下這個剪輯功能,剪輯視頻的前一秒鐘 新建一個 demo.html 文件，引入相關(guān)資源

<script?src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>?

<script?src="./assets/ffmpeg.min.js"></script>?
?
?
???
????選擇原始視頻文件:?
?????
????開始剪輯視頻?
??