转自开源社区一个大佬文章，只是内容有些过时安装会出错，所以就更新一下
准备工具
- Ffmpeg（点击下载），用来解码的，做视频逃不掉这个,因为系统不一样选择builds包自行下载
- Node.js（点击下载），搭建webSocket服务器，以及运行一个jsmpeg的js文件
- jsmpeg（点击下载），运行主程序
1 安装Ffmpeg
- Ffmpeg（做视频的应该都听过这个软件，在github上星星很多，使用c语言编写，可以在gitHub上面看到有兴趣研究一下代码，它不只是解析rtsp这么简单），这里下载是一个压缩文件，
- 下载完了解压到一个盘符里面，比如我解压到D盘的soft下面
如图： - 配置环境变量，把ffmpeg下的bin配置到系统path变量里面，根据自己不同的路径配置 如图：
- 配置之后控制台输入ffmpeg出现下面的文字说明安装正确，否则请自行百度 如图：
上面是配置正确的信息
2 安装Node
- 下载node安装文件，傻瓜式的安装这里就不截图了，安装完成之后在cmd控制台输入node -v验证是否安装完成 如图：
出现版本信息说明安装正确，关于node的一些其他相关操作自行百度，就不详细叙述了。
3 运行jsmpeg
- 解压jsmpeg压缩文件到某个盘符，里面出现有一个websocket-relay.js，我们主要运行这个js文件 如图：
在运行websocket-relay.js之前node需要安装webSocket模块
- webSocket模块安装
在cmd控制台输入: npm install ws
出现这种文字说明安装正确，然后在当前目录下运行jsmpeg文件夹里面的websocket-relay.js 执行命令： node websocket-relay.js supersecret 8081 8082
说明：
- Supersecret是密码
- 8081是ffmpeg推送端口
- 8082是前端webSocket端口
出现上面的文字说明执行正确,然后另起一个窗口运行ffmpeg 执行命令： ffmpeg -i "你的rtspurl" -q 0 -f mpegts -codec:v mpeg1video -s 1366x768 http://127.0.0.1:8081/supersecret
你的rtspurl就是监控地址的全地址包含协议头 rtsp这些，然后出现下面的文字说明运行正确
打开jsmpeg文件夹里面的view-stream.html页面如果没有问题应该出现下面的画面，到此为止在h5播放rtsp方案算基本完成
上述方案目前还没有投入生产使用，想要真正投入使用至少要解决同时播放多个rtsp流的问题，官方提供websocket-relay.js只能播放一个源，所以需要重写里面的代码，学一下node.js吧，考虑到性能问题，最好在有GPU的客户端使用，否则性能会是一个瓶颈，网络带宽也是一个值得考虑的问题
多个摄像头播放补充
作者源码地址 gitee
操作步骤
- 其他步骤和上面的一致保证环境没得问题之后在cd到项目目录
然后执行: node websocket.js supersecret 8081 8082，我们主程序改为websocket.js了 2. 在另一个cmd输入：ffmpeg "你的rtsl" -q 0 -f mpegts -codec:v mpeg1video -s 800x600 http://127.0.0.1:8081/supersecret/live1 3. 再开一个cmd输入，这里测试:ffmpeg "你的rtsl" -q 0 -f mpegts -codec:v mpeg1video -s 800x600 http://127.0.0.1:8081/supersecret/live2 4. 上述2和3这两不一样的就是最后的live1和live2了 5. 最后修改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卡不知道可不可以，参考: 其他说明 原文地址