基于webassembly的H265视频播放器前端Angular学习笔记1:从使用Angular创建WebWorker开始

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

Worker创建与使用

Angular CLI 创建worker类

先看文档 https://angular.cn/cli/generate#webworker

webWorker
ng generate webWorker <name> [options]
ng g webWorker <name> [options]
Creates a new generic web worker definition in the given or default project.
在给定项目或默认项目中创建新的通用web worker定义。

<name>
The name of the worker. 
web worker的名字

使用Angular CLI 创建Angular环境并创建Worker

$ ng new AngularTest
...
$ ng generate module WorkerTest                 
CREATE src/app/worker-test/worker-test.module.ts (196 bytes)

$ ng generate component WorkerTest --skipTests=true 
CREATE src/app/worker-test/worker-test.component.scss (0 bytes)
CREATE src/app/worker-test/worker-test.component.html (26 bytes)
CREATE src/app/worker-test/worker-test.component.ts (295 bytes)
UPDATE src/app/app.module.ts (494 bytes)

$ ng generate webWorker worker-test/WorkerTest
CREATE tsconfig.worker.json (212 bytes)
CREATE src/app/worker-test/worker-test.worker.ts (157 bytes)
UPDATE angular.json (3901 bytes)

生成代码
src/app/worker-test/worker-test.worker.ts

/// <reference lib="webworker" />

addEventListener('message', ({ data }) => {
  const response = `worker response to ${data}`;
  postMessage(response);
});

使用创建的Worker

删除app.component.html中例子代码
src/app/app.component.html

<router-outlet></router-outlet>

加个路由
app-routing.module.ts

import { WorkerTestComponent } from './worker-test/worker-test.component';
const routes: Routes = [
  { path: 'worker', component: WorkerTestComponent }
];

组件中创建worker

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

@Component({
  selector: 'app-worker-test',
  templateUrl: './worker-test.component.html',
  styleUrls: ['./worker-test.component.scss']
})
export class WorkerTestComponent implements OnInit, OnDestroy {
  private worker?: Worker = undefined;
  constructor() { }

  public runWorker(): void {
    if (typeof Worker !== 'undefined') {
      this.worker = new Worker('./worker-test.worker', { type: 'module' });
      this.worker.onmessage = ({ data }) => {
        console.log(`WorkerMessage:${data}`);
      };
      this.worker.postMessage(`Hello`);
    } else {
      // Web Workers are not supported in this environment.
      // You should add a fallback so that your program still executes correctly.
    }
  }

  private stopWorker() {
    if (this.worker) {
      this.worker.terminate();
      this.worker = undefined;
    }
  }

  ngOnInit(): void {
    this.runWorker();
  }
  ngOnDestroy(): void {
    this.stopWorker();
  }

}

打开网址: http://localhost:4200/worker
查看控制台输出

Angular is running in the development mode. Call enableProdMode() to enable the production mode.
worker-test.component.ts:16 WorkerOnMessage:worker response to Hello
client:52 [WDS] Live Reloading enabled.

基本的播放器Worker播放环境搞定.

接下来会使用worker下载视频视频片段，下一篇介绍

微信:yjkhtddx