使用web worker和webassembly技术 (Mac OS)

本菜鸡最近在搞FFmpeg嵌入到前端中做解码，初步的想法是通过web worker 建一个解码的线程专门用于解码H264数据，然后主线程负责渲染解码后的数据。
首先要在前端中运行C代码，那就要使用webassembly技术，webassembly技术可以将C/C++、rust代码编译为.wasm文件，然后导入到前端中实现前端运行C/C++、rust代码的效果。而编译生成.wasm文件需要用到emscripten工具。
本文中的emscripten版本如下：

emscripten版本

来个简单的C代码：

#include 
int main(int argc, char ** argv) {
    printf("Hello, world!\n");
}
int mytest() {
    printf("this is wasm test！\n");
    return 999;
}

编译上面的C代码为wasm文件（最后生成的文件为JS文件，导入这个.js代码就可以导入.wasm文件）：

emcc hello.c -o hello.js -s MODULARIZE=1 -s EXPORT_NAME=Test -s EXTRA_EXPORTED_RUNTIME_METHODS='["ccall"]' -s EXPORTED_FUNCTIONS='["_mytest","_main"]'

新建一个html文件作为演示：

    
        
    
    
        
test !
        send a test
        close web worker
    
    

然后是页面中用到的test.js

importScripts('hello.js')

var self = this
function Test2() {
    // 初始化worker
    this.initWorker()
}

Test2.prototype.initWorker = function () {
    console.log('初始化worker ！')
}

Test2.prototype.init = async function () {
    self.Module = await initModule()
    postMessage('初始化')
    var testBuffer = new ArrayBuffer(32)
    postMessage(testBuffer,[testBuffer])
}

Test2.prototype.mytest = function () {
    console.log(self.Module._mytest())
}

self.test = new Test2

self.onmessage = function (evt) {
    if (self.test === undefined) {
        console.log('init error !', self.test)
        return ;
    }
    console.log(`子线程Reveived msg: ${evt.data}`)
    switch (evt.data) {
        case 'init':
            self.test.init();
            break;
        case 'test':
            self.test.mytest();
            break;
        default:
            break;
    }
}

function onWasmLoaded() {
    if (test) {
       test.mytest();
    } else {
        console.log("[ER] No decoder!");
    }
}

function initModule() {
    return new Promise((r,j) => {
        r(
            Test({
                onRuntimeInitialized: () => {
                    console.log('初始化wasm!')
                },
            })
        )
    })
}

最后整体的项目结构：

项目结构

运行命令：emrun --no_browser --port 8087 .打开localhost:8087查看效果。