html5播放rtsp视频流

背景

        工作中接触到安防系统，需要将摄像头的rtsp视频流在网页中展示，这在目前的video标签中是无法直接实现的。由于第一次接触，这里学习了一下其中的一种方案，在度娘和歌手的探索中，尝试过多种方案，大多数需要进行比较复杂的配置，或者学习新的技术，这对面向百度编程的工程师头很大，所以我只能寻找现成的demo，不需要进行任何修改，只需要把视频流地址换成项目所用的即可，亲测可行。

工具

        解码工具： [ffmpeg]Releases · BtbN/FFmpeg-Builds · GitHubContribute to BtbN/FFmpeg-Builds development by creating an account on GitHub.https://github.com/BtbN/FFmpeg-Builds/releases        下载适合你电脑系统配置的版本

        服务端：[node.js]下载 | Node.jsNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.https://nodejs.org/zh-cn/download/        下载适合你电脑系统配置的版本

        运行样例：[jsmpeg]GitHub - phoboslab/jsmpeg: MPEG1 Video Decoder in JavaScriptMPEG1 Video Decoder in JavaScript. Contribute to phoboslab/jsmpeg development by creating an account on GitHub.https://github.com/phoboslab/jsmpeg

原理

        nodejs运行脚本，以http协议监听本地一个端口（如8081），同时以websocket协议监听本地另一个端口（如8082），在8082端口收到来自8081端口的数据时，推送该数据给各个以websocket协议连接8082端口的网页客户端，最后网页客户端调用jspmeg.js里的对应接口进行解码播放。

操作

        1. 下载完ffmpeg稳定编译后版本，配置其环境变量，路径为bin文件夹路径。配置完后在命令行输入ffmpeg，应该有对应的消息出现，没有的话可能环境变量暂未生效，可以尝试重启电脑再试一次。

        2. nodejs傻瓜式安装，这里不做赘述，很多大佬都有对应博客。记得把环境变量也一行配置。

        3. jsmpeg下载解压后，命令行打开其所在文件夹，我们需要交给nodejs运行的脚本是websocket-relay.js，它需要websocket模块的支持，我们在命令行输入

npm install ws -g

为nodejs安装websocket模块 ，现在我们就可以执行脚本了，在命令行输入

node websocket-relay.js supersecret 8081 8082

解释：以nodejs来运行脚本websocket-relay.js，加密的密钥是supersecret ，在本地以websocket 协议8082端口，监听本地http协议8081端口收到的消息，并将其推送给websoket协议8081端口的所有连接。

        4. 新打开一个命令行窗口，输入命令

ffmpeg -i "你的rtsp地址" -q 0 -f mpegts -codec:v mpeg1video -s 1366x768 http://127.0.0.1:8081/supersecret

注意把端口和密钥和前面相对应。

        5. 上面都没有问题的话，这时候就可以用浏览器打开jsmpeg文件夹里的网页文件view-stream.html。

        6. 以上demo仅作为一个入门的代码参考，想要实现更多其他骚操作还得自行深入学习哦。