前提:视频流格式采用 海康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