html5 rtmp html5 rtmp播放

由于工作的原因需要开发海康和大华的摄像头，当中遇到了在浏览器播放实时画面的问题，由于摄像头是rtsp格式的，h5原生不支持这种格式，网上查了很多教程大多是使用rtsp转rtmp，不过rtmp需要falsh的支持，但是在chrome已经默认禁用、包括未来也会逐渐淘汰，所有最终这种方案被淘汰。

于是我想应该把rtsp转化成一种类似http协议的方式，能够直接被h5识别，于是我google，百度就不用说了，查了半天全是没有的东西。终于我找到了一种叫jsmpeg的插件，它主要是通过webSocket发送MPEG，前端通过js解析MPEG不断绘制canvas，包括音频。最终测试的结果就是一个1920*1080分辨率的画面延时大概的0.5s左右，超出我的预料，性能居然这么高。后台观察发现浏览器使用了GPU加速。

说了这么多开始教程吧

准备工具

1. Ffmpeg（点击下载），用来解码的，做视频逃不掉这个
2. Node.js（点击下载），搭建webSocket服务器，以及运行一个jsmpeg的js文件
3. jsmpeg（点击下载），运行主程序

链接：https://pan.baidu.com/s/14Q48pf44ShfBThcdWVkEDA 
提取码：trrj

文件下载好了现在说怎么安装

1. Ffmpeg（做视频的应该都听过这个软件，在github上星星很多，使用c语言编写，可以在gitHub上面看到有兴趣研究一下代码，它不只是解析rtsp这么简单），这里下载是一个压缩文件，

1. 下载完了解压到一个盘符里面，比如我解压到D盘的soft下面

1. 配置环境变量，把ffmpeg下的bin配置到系统path变量里面，根据自己不同的路径配置

1. 配置之后控制台输入ffmpeg出现下面的文字说明安装正确，否则请自行百度

上面是配置正确的信息

1. Node.js安装

1. 下载node安装文件，傻瓜式的安装这里就不截图了，安装完成之后在cmd控制台输入node -v验证是否安装完成

出现版本信息说明安装正确

1. 这里说一下node的npm路径设置，npm是用来安装其他js模块的，就像是安装插件。这里默认npm安装插件会安装再c盘的用户文件夹下，很不科学，下面几条命令修改路径

1. npm安装程序位置
   npm config set prefix "你自定义的安装程序位置、比如D://soft/nodeInstall "
2. npm缓存位置

npm config set cache "你自定义的安装程序位置、比如D://soft/nodeCache "

1. 设置环境变量

npm安装程序位置/ node_modules  ---添加到path变量里面，这是在安装完node模块之后避免有些时候访问不了这个模块

1. 运行jsmpeg

解压jsmpeg压缩文件到某个盘符，里面出现有一个websocket-relay.js，我们主要运行这个js文件

在运行websocket-relay.js之前node需要安装webSocket模块

1. webSocket模块安装

在cmd控制台输入: npm install ws -g

        

出现这种文字说明安装正确

1. 运行jsmpeg文件夹里面的websocket-relay.js

在另一个cmd控制台cd到jsmpeg所在路径，执行: node websocket-relay.js supersecret 8081 8082

说明：

Supersecret是密码

8081是ffmpeg推送端口

8082是前端webSocket端口

       

出现上面的文字说明执行正确

1. 运行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)

2019年8月19日多个摄像头播放的补充

之前我把播放多个摄像头的代码上传的码云上面了，今天我说一下怎么播放

废话不多说，怎么用说一下

1. 第一

其他步骤和上面的一致保证环境没得问题之后在cd到项目目录

然后执行: node websocket.js supersecret 8081 8082，我们主程序改为websocket.js了

1. 第二

在另一个cmd输入：

ffmpeg "你的rtsl" -q 0 -f mpegts -codec:v mpeg1video -s 800x600 http://127.0.0.1:8081/supersecret/live1

再开一个cmd输入，这里测试:

ffmpeg "你的rtsl" -q 0 -f mpegts -codec:v mpeg1video -s 800x600 http://127.0.0.1:8081/supersecret/live2

这两不一样的就是最后的live1和live2了

1. 第三

修改view-stream.html里面的代码如下

变化的就是var url = 'ws://127.0.0.1:8082/live';变化的就是live1和live2和第二步的相对应就像，双击打开view-stream.html呈现如下效果

这里补充一下，代码里面没有关闭视频流的功能，在日志打印关闭连接之后最好删除一下后台的ffmpeg流，不然会造成性能问题，这个关闭的代码在js里面不能体现出来，最好是在控制cmd命令的程序里面关闭一下。

对于解码的时候有的说cpu占用很高的情况这里我说一下，第一种减少摄像头的码率，第二种采用gpu加速解码ffmpeg，网上也有很多参考，但是对硬件是有要求的，如果项目够大，可以要求客户购买显卡，比如英伟达的1080ti，A卡不知道可不可以。

           作者：程鹏

                                                                                                                                                                               欢迎留言