基于webassembly的H265视频播放器前端Angular学习笔记3:创建Angular组件中加载wasm文件

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

创建简单的界面读取H265文件内容

获取wasm文件

从gitee上的开源项目decoder_wasm中可以获取到wasm文件。
https://gitee.com/wupeng-engineer/decoder_wasm/tree/master/dist

libffmpeg_264_265.js
libffmpeg_264_265.wasm

这两个文件emscripten编译生成的文件
拷贝到src/assets/wasm/目录下

├── assets
│   └── wasm
│       ├── libffmpeg_264_265.js
│       └── libffmpeg_264_265.wasm

在git仓库的Readme中有wasm的超简单的文档

wasm文件对外提供四个接口：

openDecoder：初始化解码器；
decodeData：解码传入的H.265码流数据；
flushDecoder：清空缓存数据；
closeDecoder：关闭解码器；

创建wasm测试组件

创建组件

$ ng generate component WasmTest --skipTests=true
CREATE src/app/wasm-test/wasm-test.component.scss (0 bytes)
CREATE src/app/wasm-test/wasm-test.component.html (24 bytes)
CREATE src/app/wasm-test/wasm-test.component.ts (287 bytes)
UPDATE src/app/app.module.ts (686 bytes)

设置路由

{ path: 'wasm', component: WasmTestComponent },

配置加载Wasm文件

修改angular.json文件，根据下图层级关系，在scripts数组中加上libffmpeg_264_265.js文件

{
  "projects": {
    "AngularTest": {
      "architect": {
        "build": {
          "options": {
            "scripts": [
              "src/assets/wasm/libffmpeg_264_265.js"
            ]
          }
        }
      }
    }
  }
}

修改tsconfig.json，根据下图层级关系，增加"allowJs":true,

{
  "compilerOptions": {
    "allowJs":true
  }
}

注意：改配置文件需要重启angular服务；

由于angular的机制，libffmpeg_264_265.wasm文件会404，
需要修改一下libffmpeg_264_265.js中的wasm文件地址；
搜索"libffmpeg_264_265.wasm"改为正确的地址即可

var wasmBinaryFile = "assets/wasm/libffmpeg_264_265.wasm";

调用wasm文件

修改wasm-test.component.ts文件

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-wasm-test',
  templateUrl: './wasm-test.component.html',
  styleUrls: ['./wasm-test.component.scss']
})
export class WasmTestComponent implements OnInit {
  private wasm = (window as any).Module as any;
  constructor() {
    console.log(`constructor ${typeof(this.wasm)}`);
    this.wasm = typeof this.wasm !== 'undefined' ? this.wasm : {};
    this.wasm.onRuntimeInitialized = () => {
      console.log('onRuntimeInitialized');
      const wasm = (window as any).Module as any;
      const decoderType = 0;
      const LOG_LEVEL_WASM = 1;
      const callback = wasm.addFunction(() => { });
      wasm._openDecoder(decoderType, callback, LOG_LEVEL_WASM);
    };
    console.log(`constructor ${typeof(this.wasm)}`);
  }

  ngOnInit(): void {
  }
}

打开 http://localhost:4200/wasm 控制台输出

Angular is running in the development mode. Call enableProdMode() to enable the production mode.
client:52 [WDS] Live Reloading enabled.
wasm-test.component.ts:14 onRuntimeInitialized
libffmpeg_264_265.js:1138 [][Core][DT] Decoder initialized 0.

可以看到网页已经可以调用wasm文件对外暴露的接口。

问题

angular开发的单页面应用，wasm加载到window上会在整个应用上生效，通过angular配置加载wasm文件的方式只可以仅用于测试，后续会在worker中加载脚本。

下一篇介绍如何使用wasm文件

微信号：yjkhtddx