html页面播放rtsp流媒体

采取的方案

node.js + Ffmpeg + jsmpeg

工具

node.js
Ffmpeg
jsmpeg
下载路径：自己百度云盘中，路径在常用工具/常用软件夹中

Ffmpeg的安装

直接将下载文件解压到一个路径下，然后经该路径配置到环境变量path中，
例如我将文件解压到桌面，在path中添加C:\Users\admin\Desktop\ffmpeg
添加成功后，通过cmd在命令行中输入ffmpeg
如果出现上图现象，那么环境变量配置成功。

node.js的安装

node.js按照默认一步步安装即可
配置node.js到环境变量当中
1.先配置一个NODE_HOME

2.然后将path中添加如下内容

%NODE_HOME%;%NODE_HOME\node-global%;

3.测试node是否按照成功
在cmd中输入node -v，如果有版本号，那么安装成功

jsmpeg安装

1.安装websocket
在cmd命令下，输入如下命令,全局安装websocket

npm install ws -g

2.jsmpeg安装
将上面压缩文件解压到任意一个目录下

然后通过cmd命令行，进入到上面解压后的目录下，执行如下命令，该文件夹将会多出两个文件，文件在上图中已经标记出来了

npm  install ws

同样在该目录下执行如下命令，启动

node websocket-relay.js supersecret 8081 8082

说明：

Supersecret是密码

8081是ffmpeg推送端口

8082是前端webSocket端口

执行效果如下

演示过程

第一步

第一步是上面已经执行过的命令，这里不需要在执行一次，执行命令内容如下

node websocket-relay.js supersecret 8081 8082

第二步

另外启动一个cmd程序，执行如下命令

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

例如我的rtsp流是rtsp://127.0.0.1:6880/test,所以我执行的是

ffmpeg -i "rtsp://127.0.0.1:6880/test" -q 0 -f mpegts -codec:v mpeg1video -s 1366x768 http://127.0.0.1:8081/supersecret

第三步

将jsmpeg目录下的view-stream.html文件的内容修改一下，替换方法如下

view-stream.html文件中
var url = 'ws://'+document.location.hostname+':8082/';的值替换为var url = 'ws://127.0.0.1:8082/';

然后通过浏览器打开view-stream.html文件
效果如下：
因为我是截取本地的rtsp流且分辨率较低，所以导致只能出现部分图像