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