最近公司安排我做网页上播放海康、大华摄像头视频的功能。把工作的流程记录一下,也希望能帮助其他人快速实现这个功能。
加载视频首先想到的方案就是使用厂家提供的SDK进行摄像头直连。这种方式的好处是既可以播放视频又可以对摄像头进行云台控制。然而厂家只提供了IE的SDK,在谷歌、火狐等浏览器上根本不能用!于是果断放弃!
因为公司只要求能够播放视频即可,不需要云台控制。貌似问题就变的简单很多。于是继续寻找方案。经过多方论证,最终确定采用RSTP转换成M3U8格式,再通过video.js播放视频方式实现这个需求。
实现步骤如下:
1、确定摄像头支持RSTP服务:打开摄像头的配置页面,查看是否具有RTSP端口
2、确定RSTP可用
下载VLC万能播放器,在网络串流中输入RSTP路径,点击播放确定是否能看到视频。
3、下载FFMPG
到官网下载FFMPG软件,我是Windows64位格式,将下载后的压缩包解压。
下载地址:https://ffmpeg.zeranoe.com/builds/
4、执行格式转换
使用cmd命令,找到ffmpeg-20190822-c87237d-win64-static\bin目录。执行如下命令,注意修改:
ffmpeg -i rtsp://admin:12345@192.0.0.64 -fflags flush_packets -max_delay 1 -an -flags -global_header -hls_time 1 -hls_list_size 3 -hls_wrap 3 -vcodec copy -y D:/ffmpeg/myVideo.m3u8
红色内容为需要修改的内容,注意输出目录必须已存在,如果没有需手动创建。
5、确定转换成功
D:/ffmpg目录下,成功创建出了如下文件。说明转换成功
6、发布视频流服务
使用nginx将视频发布成web服务
location /ffmpg/ {
root D:\ffmpg;
rewrite ^/ffmpg/(.*)$ \$1 break;
}
7、验证m3u8视频可用,使用vlc工具输入网络串流,确定视频是否可以查看即可
8、将视频在网页上显示,下载video.js插件,视频流地址输入m3u8地址即可在线播放。