基于webassembly的H265视频播放器前端Angular学习笔记6:使用WebWorker加载Wasm

本文基于开源项目 decoder_wasm使用Angular开发的前端页面项目，对项目整理结构进行的改动，并使用Typescript重写大部分js源码，便于维护。
着重学习Angular框架下Worker，Wasm的使用，本人非前端开发从业人员，页面简陋请见谅。

使用WebWorker加载Wasm

创建组件与路由

创建组件

$ ng generate component WasmWorkerTest --skipTests=true 
CREATE src/app/wasm-worker-test/wasm-worker-test.component.scss (0 bytes)
CREATE src/app/wasm-worker-test/wasm-worker-test.component.html (31 bytes)
CREATE src/app/wasm-worker-test/wasm-worker-test.component.ts (314 bytes)
UPDATE src/app/app.module.ts (1004 bytes)

设置路由

{ path: 'wasm-worker', component: WasmWorkerTestComponent },

创建Worker

详见的之前篇笔记
基于webassembly的H265视频播放器前端Angular学习笔记1
拷贝代码相关逻辑到新的测试组件中

解释：第二次cli命令创建worker只是创建了一个文件，是因为第一次使用时，已经把相关配置修改过了，第二次不需要再次修改。

$ ng generate webWorker wasm-worker-test/WasmWorkerTest
CREATE src/app/wasm-worker-test/wasm-worker-test.worker.ts (157 bytes)

加载Wasm

写个interface便于代码提示，（后面要吧WASM模块接口和emscripten默认的接口全写进去方便调用）
WasmModule.ts

export interface WasmModule {
    onRuntimeInitialized?: () => void;
    addFunction?: (callback: any, type?: string) => number;
    _openDecoder?: (decoderType: number, callback: number, logLevel: number) => void;
}

export interface WasmDedicatedWorkerGlobalScope extends DedicatedWorkerGlobalScope {
    name?: string;
    Module?: WasmModule;
}

在worker中加载脚本使用importScripts方法，这个函数加载的js脚本，不会被webpack打包，正好方便我们直接加载js文件
wasm-worker-test.worker.ts 增加代码

import { WasmDedicatedWorkerGlobalScope, WasmModule } from './WasmModule';

function initWorker() {
  // const WorkerSelf = self as any;
  const WorkerSelf = self as unknown as WasmDedicatedWorkerGlobalScope;
  WorkerSelf.name = 'DecoderWorker';
  WorkerSelf.Module = typeof WorkerSelf.Module !== 'undefined' ? WorkerSelf.Module : {};
  WorkerSelf.Module.onRuntimeInitialized = () => {
    console.log('onRuntimeInitialized');
    const wasmModule: WasmModule = WorkerSelf.Module as WasmModule;
    const decoderType = 0;
    const LOG_LEVEL_WASM = 1;
    const callback = wasmModule.addFunction(() => { });
    wasmModule._openDecoder(decoderType, callback, LOG_LEVEL_WASM);
  };
  WorkerSelf.importScripts('assets/wasm/libffmpeg_264_265.js');
}
initWorker();

开启worker

详见的之前篇笔记
基于webassembly的H265视频播放器前端Angular学习笔记1
拷贝代码相关逻辑到新的测试组件中

this.worker = new Worker('./wasm-worker-test.worker', { type: 'module' });

测试结果

WorkerOnMessage:worker response to Hello
wasm-worker-test.worker.ts:11 onRuntimeInitialized
libffmpeg_264_265.js:1138 [][Core][DT] Decoder initialized 0.

可以看到在worker中加载wasm成功，

下一篇介处理worker数据交互，实现在worker中解码H265数据，有不理解的地方微信联系我。

微信号：yjkhtddx