前提:视频流格式采用 海康nvr摄像头的rtsp流;
默认格式为 rtsp://账号:密码@ip地址 举个栗子: rtsp://mifan:1234567@172.16.154.198
目标:实现h5中视频低延迟视频播放
环境准备:
- nodejs + http-server(客户端网页容器) 网上安装教程超多,可自行百度
- fmpeg(向jsmpeg服务端推流) mac中安装可参考 https://www.jianshu.com/p/f6990aee6c7f
- jsmpeg(流转成websocket) jsmpeg 点击下载
- 一个rtsp视频流 (也可以是本地视频文件)
安装websocket和http-server
npm install -g ws
npm install ws
npm install http-server -g
1、单路直播 (webscoket-replay.js)
1.1 启动 jsmpeg
打开一个命令行,进入jsmpeg目录,运行:
node websocket-relay.js supersecret 8081 8082
参数说明:
- Supersecret 是密码
- 8081 是ffmpeg推送端口
- 8082 是前端webSocket端口
1.2 启动ffmpeg推流
再起一个服务 开始推流
ffmpeg -I "rtspurl节目源地址" -q 0 -f mpegts -codec:v mpeg1video -s 1366x768 http://127.0.0.1:8081/supersecret
1.3 启动一个http-server
再打开一个命令行进入jsmpeg目录,输入:
http-server
1.4 用浏览器打开网址
http://ip:8080/view-stream.html
正常就能看到视频画面了。
2、多路直播
简单描述下原理, 客户端页面连接websocket将需要查看的直播地址传递过来,websocket服务端通过[FFMPEG],
将直播视频转码为 mpegts 格式发送给客户端, 客户端通过jsmpeg,解码数据 通过canvas 将直播画面绘制在页面上;
但是经测试,停留时间过久,会出现延迟现象,并且同个端口目前浏览器限制为最多6路(可开启http2.0多路复用),本次测试1个端口下分配2路,多路需自行指定相应端口;
详细代码请移步:https://github.com/fanmx/rtsp-jsmpeg