在angular框架下使用flv.js播放http-flv实时流直播视频

目录

说明

总体思路

FFmpeg

Nginx

flv.js

效果展示

总结

---

• 说明

前段时间，我写了一篇在angular框架下使用videojs播放RTMP视频流的文章，虽然播放起来流畅度较好，但仍然有一个缺陷：

由于RTMP协议本身属于Adobe公司且未开源，因而必须调用Flash才能播放并得到最好的支持，即使引入了video.js以及videojs-flash两个库作为兼容并使用了HTML5中的<video>标签，但实质仍然使用的是Flash播放器。在合并入项目过程当中带来了一个问题，即angular框架属于单页应用程序(SPA)，在浏览器端有很多微服务且大幅减少了网页刷新(用户按下F5)的频率，所有的内容基本都在一个网页当中进行展示，实际项目中由于使用了angular的RouterLink功能切换页面，当有视频播放且从有Flash播放器的组件(component)页切换到其他组件页后，再切回Flash的组件页，会出现flash加载失败的情况，必须进行网页刷新(F5)才能正常重新加载Flash插件，这极大地降低了用户体验。我也没有找到其他的解决方案。

同时，由于Flash本身的设计缺陷，Adobe公司和各大主流浏览器对Flash的支持也在减少甚至是直接移除了Flash插件，并趋向于采用原生HTML5标准中的<video>标签进行替换来进行音视频的播放。

因而，本着提高用户体验和便于后期维护的方针，通过查阅资料，我采用了当下比较流行的直播方案进行改造，该方案为FFmpeg-nginx-Http-flv的组合。

• 总体思路

如下图所示：

FFmpeg-nginx-Http-flv方案总览

具体为由FFmpeg拉取海康相机的RTSP流，通过转换推出RTMP流，接着nginx主机模块拉取这个RTMP流，通过转换推出Http-flv流给浏览器中的flv.js包进行拉取播放。

下面我对这个方案的各个部分进行逐一的描述：

• FFmpeg

FFmpeg拉取海康相机的RTSP流，只需要遵循海康相机的RTSP流拉取规范，即对于FFmpeg来说需要输入输出参数，一条完整的FFmpeg输入输出参数如下所示：

ffmpeg -i rtsp://admin:1234@192.168.2.5:554/h264/ch1/main/av_stream -vcodec copy -acodec aac -ar 44100 -strict -2 -ac 1 -f flv -s 1280x720 -q 10 -f flv rtmp://127.0.0.1/Mylive/test

调出控制台，转到ffmpeg.exe程序所在的文件夹，输入或贴入上述参数即可，admin改为海康相机的登陆账号，密码改为海康相机的登陆密码。

对参数命令的部分解释，其他参数设置可以参考FFmpeg官方参数说明：

参数	解释
-i   filename