【视频直播之】浏览器播放RTMP和HLS流

最近在做安防方面的视频直播方案

整个方案的架构是这样：

   前端海康摄像头通过路由器连外网，同时现场有一台工控机也连接到这个路由器上，通过ffmpeg进行将RTSP转码为RTMP，上传至七牛云流媒体服务器。从流媒体服务器上，web客户端可以获得三种播放流：rtmp/hls/flv，那么web端用什么播放器呢！

   寻寻觅觅，幂幂寻寻，终于找到了videojs.js这个神器

 

   先来一段官方介绍：

     官网：https://videojs.com/

     

网上有各种骗取积分的文章和下载链接，告诉你什么最后，什么唯一，就是为了骗取积分的，下载积分还超级高

接下来会用最最简单的方式实现rtmp和hls的播放

一步一步来：

第一步：下载videojs.js

可以通过cdn进行引用

第二步：

因为最新的版本，6.x及以上版本vedio的flash支持单独用videojs-flash.js插件，所以要引用这个插件

第三步：配置video标签

 

第四步：运行

 

第五步：支持播放hls格式

hls需要videojs-contrib-hls.js支持，需要放到flash引用后面

 

 

最终代码如下：

 

 

 

好了就到这了

 

 

参考：https://www.npmjs.com/package/videojs-contrib-hls

参考：https://www.cnblogs.com/FHC1994/p/9981440.html