使用web worker和webassembly技术 (Mac

作者: 都江堰古巨基 | 来源:发表于2020-08-18 17:49 被阅读0次

使用web worker和webassembly技术 (Mac
web work
web worker
go 基础 WebAssembly
webwork 前端的多线程解决方案
WebAssembly入门介绍书目录
Web Worker使用
web worker的介绍和使用
web worker 处理多文件并行上传
在vue中怎么使用Web Worker

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

emscripten版本

来个简单的C代码：

#include <stdio.h>
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文件作为演示：

<!DOCTYPE html>
<html>
    <head>
        <title>wasm</title>
    </head>
    <body>
        <h1>test !</h1>
        <button onclick="test()">send a test</button>
        <button onclick="closeWebworker()">close web worker</button>
    </body>
    <script>
        var worker = null
        window.onload = function () {
            // 新建一个worker
            worker = new Worker("test.js")
            // 向子线程传递数据
            worker.postMessage('init')
            worker.onmessage = function (evt) {
                console.log('master reveived msg: ',evt.data)
            }
            var ab = new ArrayBuffer(1);
            // 使用transportObject
            worker.postMessage(ab, [ab]);
        }
        function closeWebworker() {
            worker.terminate()
            worker = null
            console.log('close web worker !!')
        }
        function test() {
            if (worker) {
                worker.postMessage('test')
            } else {
                console.log('web worker has closed !')
            } 
        }
    </script>
</html>

然后是页面中用到的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!')
                },
            })
        )
    })
}

最后整体的项目结构：