由于工作的原因需要开发海康和大华的摄像头,当中遇到了在浏览器播放实时画面的问题,由于摄像头是rtsp格式的,h5原生不支持这种格式,网上查了很多教程大多是使用rtsp转rtmp,不过rtmp需要falsh的支持,但是在chrome已经默认禁用、包括未来也会逐渐淘汰,所有最终这种方案被淘汰。
于是我想应该把rtsp转化成一种类似http协议的方式,能够直接被h5识别,于是我google,百度就不用说了,查了半天全是没有的东西。终于我找到了一种叫jsmpeg的插件,它主要是通过webSocket发送MPEG,前端通过js解析MPEG不断绘制canvas,包括音频。最终测试的结果就是一个1920*1080分辨率的画面延时大概的0.5s左右,超出我的预料,性能居然这么高。后台观察发现浏览器使用了GPU加速。
说了这么多开始教程吧
准备工具
文件下载好了现在说怎么安装
- Ffmpeg(做视频的应该都听过这个软件,在github上星星很多,使用c语言编写,可以在gitHub上面看到有兴趣研究一下代码,它不只是解析rtsp这么简单),这里下载是一个压缩文件,
- 下载完了解压到一个盘符里面,比如我解压到D盘的soft下面
-
- 配置环境变量,把ffmpeg下的bin配置到系统path变量里面,根据自己不同的路径配置
-
- 配置之后控制台输入ffmpeg出现下面的文字说明安装正确,否则请自行百度
上面是配置正确的信息
- Node.js安装
- 下载node安装文件,傻瓜式的安装这里就不截图了,安装完成之后在cmd控制台输入node -v验证是否安装完成
出现版本信息说明安装正确
-
- 这里说一下node的npm路径设置,npm是用来安装其他js模块的,就像是安装插件。这里默认npm安装插件会安装再c盘的用户文件夹下,很不科学,下面几条命令修改路径
- npm安装程序位置
npm config set prefix "你自定义的安装程序位置、比如D://soft/nodeInstall " - npm缓存位置
- npm安装程序位置
- 这里说一下node的npm路径设置,npm是用来安装其他js模块的,就像是安装插件。这里默认npm安装插件会安装再c盘的用户文件夹下,很不科学,下面几条命令修改路径
npm config set cache "你自定义的安装程序位置、比如D://soft/nodeCache "
-
-
- 设置环境变量
-
npm安装程序位置/ node_modules ---添加到path变量里面,这是在安装完node模块之后避免有些时候访问不了这个模块
- 运行jsmpeg
解压jsmpeg压缩文件到某个盘符,里面出现有一个websocket-relay.js,我们主要运行这个js文件
在运行websocket-relay.js之前node需要安装webSocket模块
-
- webSocket模块安装
在cmd控制台输入: npm install ws -g
出现这种文字说明安装正确
-
- 运行jsmpeg文件夹里面的websocket-relay.js
在另一个cmd控制台cd到jsmpeg所在路径,执行: node websocket-relay.js supersecret 8081 8082
说明:
Supersecret是密码
8081是ffmpeg推送端口
8082是前端webSocket端口
出现上面的文字说明执行正确
-
- 运行ffmpeg
在另一个cmd执行下面的代码:
ffmpeg -i "你的rtspurl" -q 0 -f mpegts -codec:v mpeg1video -s 1366x768 http://127.0.0.1:8081/supersecret
出现下面的文字说明运行正确
打开jsmpeg文件夹里面的view-stream.html页面如果没有问题应该出现下面的画面,到此为止在h5播放rtsp方案算基本完成
上述方案目前还没有投入生产使用,想要真正投入使用至少要解决同时播放多个rtsp流的问题,官方提供websocket-relay.js只能播放一个源,所以需要重写里面的代码,学一下node.js吧,考虑到性能问题,最好在有GPU的客户端使用,否则性能会是一个瓶颈,网络带宽也是一个值得考虑的问题
2019年7月17日更新代码,因为之前有人问我怎么实现多个视频流同时播放的问题,这里我把代码提交上来了,先看一下代码里面的注释,说明之后补充,感谢,代码提交到这里了(https://gitee.com/yzfar/RtspWebSocket.git)