在angular框架下使用videojs播放RTMP实时流直播视频

2018.12.06更新：

我在直播的优化当中采用了一种抛弃flash播放，直接采用html的video标签的方案，该方案更加优秀，可以点击在angular框架下使用flv.js播放http-flv实时流直播视频进行查看。

正文：

最近公司项目需要在前端播放实时视频信息，使用海康相机输出RTSP流后由后台转码为RTMP流，发送给前端进行实时播放。

前端使用angular进行框架搭建，这里记录编写Demo的过程。

1.建立Angular模板项目；

常规的Angular项目操作，这里不再赘述。这里使用的是最新版的Angular框架 —— v6.1.0。

2.安装videojs

video.js是一个支持HTML5和Flash播放的成熟js库，其核心思想是对于视频优先使用HTML5直接播放，如果无法播放再调用Flash播放。

这里需要说明的是，在video.js升级到6.0.0版本之后，官方在这个库中移除了对Flash的支持，将Flash的支持分离到一个新的项目中，取名为videojs-flash，故在这里还需要引入该库，包管理代码如下：

npm install video.js --save
npm install videojs-flash --save

3.业务逻辑编写

在完成安装video.js后，需对其进行引入操作，引入有两种形式：

• 网络引入
• 本地引入

但无论哪种引入形式，按照videojs官方文档，结合angular项目，都应该在项目根目录下的index.html中进行操作。这里我选择了本地引入的形式。

index.html:

这里直接将video.js的核心代码文件从包管理文件夹node_modules下提取出来放入了assets文件夹中，当然也可以直接从node_modules文件夹中引用，区别仅仅是路径不同。

需要注意的是引入顺序的问题，videojs-flash需要在video.js之后再引入。

由于是demo程序，故直接在app.component中进行代码编写：

app.component.html:

RTMP-Play

  

这里使用了HTML5的video标签，对其中的属性作如下解释：

vjs-big-play-centered   videojs中的样式播放按钮居中
poster                  默认的显示界面，在为播放之前，播放器中显示的界面
preload="auto"          是否提前加载
autoplay                自动播放
loop=true               自动循环
data-setup='{"example_option":true}' 把一些设置的属性写进来，如data-setup={"autoplay":true}

在完成以上的代码编写后，需要注意的几个问题：

• 由于angular的安全机制问题，导致在组件component中引入外部的url视频资源会发生安全检测不通过的问题，故这里在app.component.ts中还需要进行DomSanitizer服务的引入，来告知我们使用的RTMP流的特定链接是安全的，关于DomSanitizer服务，可以参考这里进行简要了解。

app.component.ts:

import { Component } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser'; // 引入DomSanitizer服务

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // 该链接是香港某电视台的直播流链接，请放心使用
  url = 'rtmp://live.hkstv.hk.lxdns.com/live/hks';   
  safeUrl: any;

  constructor(private sanitizer: DomSanitizer) {
    this.getUrl(this.url);
  }

  getUrl(url: string) {
    this.safeUrl = this.sanitizer.bypassSecurityTrustUrl(url);  // 获取安全链接
  }
}

• 浏览器去除Flash player是大势所趋，如果以上demo在运行过程中需要调用flash，临时启用即可，我在本地的测试当中，chrome和firefox可以正常运行。
• 由于涉及到了flash，故在移动端的播放中，这个方案不甚理想，在查阅一些资料后，找到了一个移动端的解决方案——百度的开源播放器，音视频转码 MCT，大家有空可以尝试一下。

初次写博客，感谢您的阅读，如有表述不清和错误的地方，敬请大家指正，谢谢！