在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