共计 3321 个字符，预计需要花费 9 分钟才能阅读完成。
前言
最近工作 Angular 我的项目在做摄像监控的相干性能，须要应用 Jessibuca 插件，查阅官网文档发现只有 Vue 和 React 的 demo，百度 Google 也根本查不到有用的材料，啧啧啧 - -，这还能忍！把我大 Angular 置于何地！遂本人写了个 Angular demo，奉献给官网: http://jessibuca.monibuca.com/demo.html#angular（由网友 echeve…。
本文介绍如何在 Angular 我的项目中引入纯 H5 直播流播放器 Jessibuca，能够在 Github: https://github.com/echeverra/Jessibuca-angular-demo 上下载，本地装置依赖运行，反对根底的播放、暂停和销毁性能。
简介
Angular 作为前端的三座大山，哦不 - -，三大框架自当不用多说，由 Google 开发保护，是一个欠缺的前端框架，蕴含服务，模板，数据双向绑定，模块化，路由，过滤器，依赖注入等所有性能，不会像另外两个框架一样须要独自引入功能模块，毛病就是学习曲线平缓，难度较大，是的，我还在硬啃中，边学边输入《玩转 Angular 系列》文章。
Jessibuca 是一款开源的纯 H5 直播流播放器，通过 Emscripten 将音视频解码库编译成 Js(wasm) 运行于浏览器之中。兼容简直所有浏览器，能够运行在 PC、手机、微信中，无需额定装置插件。在 Github: https://github.com/langhuihui/jessibuca/tree/v3 上有 1.5kstar，同时有比较完善的官网文档:http://jessibuca.monibuca.com/。
引入
咳咳，接下来重点来了，下面的你能够当做是凑数的废话了 - -。
首先下载最新的 Jessibuca: https://jessibuca.com/dist.zip 文件，其中蕴含 jessibuca.js、jessibuca.d.ts、decoder.js、decoder.wasm 4 个重要文件。
咱们在 Angular 我的项目中（Angular CLI 创立）assets 目录下创立目录 jessibuca，并将以上 4 个文件导入。
在入口文件 index.html <head> 标签中引入 jessibuca.js。
<script src="assets/jessibuca/jessibuca.js"></script> 在我的项目环境配置文件 angular.json 中配置好 scripts。
"scripts": ["src/assets/jessibuca/jessibuca.js"] 在将 jessibuca.js 文件中批改 decoder.js 门路。
decoder:"assets/jessibuca/decoder.js" 本来是不想批改源码的，但尝试在我的项目中将 decoder.js 和 decoder.wasm 放在根目录 src 目录下，始终会报 GET http://localhost:4200/decoder.js 404 (Not Found) 的谬误，无奈出此下策。
最初在 ts 文件中要引入类 Jessibuca。
import Jessibuca from "src/assets/jessibuca/jessibuca"; 最初附上 app.component.html 代码：
<div class="root">
<div class="container-shell">
<div class="container-shell-title">Angular jessibuca demo player</div>
<div id="container" #container></div>
<div class="input">
<div> 输出 URL：</div>
<input type="input" autocomplete="on" [(ngModel)]="playUrl"/>
<div *ngIf="!playing; then playBlock else pauseBlock"></div>
<ng-template #playBlock>
<button (click)="play()"> 播放 </button>
</ng-template>
<ng-template #pauseBlock>
<button (click)="pause()"> 暂停 </button>
</ng-template>
</div>
<div class="input">
<button (click)="destroy()"> 销毁 </button>
</div>
</div>
</div> 以及 app.component.ts 代码：
import {Component, OnInit, AfterViewInit, ViewChild, ElementRef} from '@angular/core';
import Jessibuca from "src/assets/jessibuca/jessibuca";
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, AfterViewInit {
title = 'jess';
@ViewChild('container') playContainer!: ElementRef<HTMLInputElement>;
playUrl: string = 'http://flv.bdplay.nodemedia.cn/live/bbb.flv';
playing: boolean = false;
jessibuca: any;
constructor() {}
ngOnInit(): void {}
ngAfterViewInit(): void {
this.jessibuca = new Jessibuca({
container: this.playContainer.nativeElement,
videoBuffer: 0.2, // 缓存时长
isResize: false,
loadingText: '加载中',
debug: true,
showBandwidth: true, // 显示网速
operateBtns: {
fullscreen: true,
screenshot: true,
play: true,
audio: true,
},
forceNoOffscreen: true,
isNotMute: false,
});
}
play(): void {this.jessibuca.play(this.playUrl);
this.playing = true;
}
pause(): void {this.jessibuca.pause(this.playUrl);
this.playing = false;
}
destroy(): void {this.jessibuca.destroy();
this.playing = false;
this.playUrl = '';
}
}
残缺我的项目代码大家能够在 Github：https://github.com/echeverra/Jessibuca-angular-demo 上查看，能够下载到本地运行。
在本地运行只须要执行两个命令，装置我的项目依赖 npm install，启动我的项目服务 ng serve 即可。
结语
尽管国内应用 Angular 框架的人不多，在 Angular 中应用 Jessibuca 的就更少了，不过还是心愿能帮忙到有须要的你~
好啦，以上就是 Angular 我的项目引入纯 H5 直播流播放器 Jessibuca 的全部内容，心愿对你有所帮忙，如有问题可通过我的博客 https://echeverra.cn 或微信公众号 echeverra 分割我。
你学“废”了么？
（完）
文章首发于我的博客 https://echeverra.cn/jessibuca，原创文章，转载请注明出处。
欢送关注我的微信公众号 echeverra，一起学习提高！不定时会有资源和福利相送哦！
