html5中h265_html5播放rtsp方案

青旅半醒 2022-11-06 04:47 320阅读 0赞

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

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

说了这么多开始教程吧

准备工具

1 . Ffmpeg()，配置环境添加到path变量中

2 . Node.js()，配置环境添加到path变量中

3 . jsmpeg()，运行主程序

4 . 运行jsmpeg

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

![acf950fdf5f71762daaa43fcc060a221.png][]

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

终端: npm install ws

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

终端: node websocket-relay.js supersecret 8081 8082

说明：Supersecret是密码8081是ffmpeg推送端口8082是前端webSocket端口

运行解码程序

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

![04ba3f24c7a586978e6be4738078c86c.png][]

![879555a545ce5b742a6ff891712b890a.png][]

上述方案目前还没有投入生产使用，想要真正投入使用至少要解决同时播放多个rtsp流的问题，官方提供websocket-relay.js只能播放一个源，所以需要重写里面的代码，学一下node.js吧，考虑到性能问题，最好在有GPU的客户端使用，否则性能会是一个瓶颈，网络带宽也是一个值得考虑的问题

2019年7月17日更新代码，因为之前有人问我怎么实现多个视频流同时播放的问题，这里我把代码提交上来了，先看一下代码里面的注释，说明之后补充，感谢，代码提交到这里了(https://gitee.com/yzfar/RtspWebSocket.git)

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

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

第一

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

![d8dee7982bac88a3e5a95ad1e742c747.png][]

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

第二

终端：ffmpeg "rtsp" -q 0 -f mpegts -codec:v mpeg1video -s 800x600

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

终端：ffmpeg " rtsp" -q 0 -f mpegts -codec:v mpeg1video -s 800x600 http://127.0.0.1:8081/supersecret/live2

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

第三

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

![d20228dbcca7197ebeb7916b40496d79.png][]

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

![bb6d1dc30f914de8de9abb1a775df8e8.png][]

这里补充一下，代码里面没有关闭视频流的功能，在日志打印关闭连接之后最好删除一下后台的ffmpeg流，不然会造成性能问题，这个关闭的代码在js里面不能体现出来，最好是在控制cmd命令的程序里面关闭一下。最近开发了一个视频监控系统，有兴趣的朋友可以了解一下合作一下

ffmpeg具备gpu加速功能，本人未测试过，有兴趣的朋友可以尝试一下cuda方式。

第一条使用英特尔的CPU硬件加速，普通pc机cpu有效，服务器如至强处理器无效

ffmpeg -c:v h264\_qsv -rtsp\_transport tcp -i "rtsp" -q 0 -vcodec h264\_qsv -f mpegts -codec:v mpeg1video -s 800x600 http://127.0.0.1:8081/supersecret/live1

第二条使用cuda加速，需要gpu并安装cuda

ffmpeg -c:v h264\_cuvid -rtsp\_transport tcp -i "rtsp" -q 0 -vcodec h264\_cuvid -f mpegts -codec:v mpeg1video -s 800x600 http://127.0.0.1:8081/supersecret/live2

另外需要使用声音的采用如下命令

ffmpeg -i -i "rts" -f mpegts -codec:v mpeg1video -s 800x600 -codec:a mp2 http://127.0.0.1:8081/supersecret/live2

6 . 开源视频播放系统

我发现大家对视频直播的需求比较大于是开源这个项目出来，减少重复工作，项目地址：

先看一下效果

![916c7815a236ffe63f36947dd9931077.png][]

主要功能包括：

1 .  自动负载均衡(扩展agent数量)

2 . 比较低的延迟

3 . 对于非IE内核使用H5的播放功能，IE使用的是rtmp(需要nginx-rtmp，因为IE不支持声音)

4 . 支持声音播放

5 . 同一播放流复用，不用重新解码

支持ssl加密方式

运行环境：

1 . Windows、Linux

2 . 2jdk1.8、ffmpeg、nodejs、nginx-rtmp(IE播放)

运行配置

1 . video-regist的注册中心，常规配置bootstrap.yml

2 . video-agent负责解码

![6711e95520ea8d0a23a1ac01a596a002.png][]

3 . video-center，负责调用缓存业务中心

![b480bdda797b2ac1d412a6acc1e58b6d.png][]

启动程序

1 . video-regist

2 . video-agent(可部署多个)

3 . video-center

引入css和js部分

参考multiPlay.html和default.html页面

前端api说明

varwssConn = wsConnect(window.location.host, UUID());//初始化一个连接对象(于后台交互)，单例，UUID()为一个随机数标识

varvideo = $("dom").video(wssConn);

varoption = \{

url : rtsp,// rtsp流

userName : userName,// rtsp流用户名

passWord : passWord,// rtsp流密码

width : 800,//视频宽度

height : 450,//视频高度

type : 0//解码类型0:cpu,1:qsv,2:cuda，查看agent端是否支持该解码方式，可能需要相关硬件

\};

video.play(option,null);//开始播放

video.close();//关闭

作者：chengpeng，未经授权不得转载

[acf950fdf5f71762daaa43fcc060a221.png]: /images/20221023/af8e4f41a0a74b43930af064e7f37c5d.png
[04ba3f24c7a586978e6be4738078c86c.png]: /images/20221023/5a2be8d33a514fecb7c50a46d3972c6d.png
[879555a545ce5b742a6ff891712b890a.png]: /images/20221023/5a4c9468cf76499585a6fa3b6323f977.png
[d8dee7982bac88a3e5a95ad1e742c747.png]: /images/20221023/8b26730371d84a9cadae4ba2bf5b5e2a.png
[d20228dbcca7197ebeb7916b40496d79.png]: /images/20221023/6e10abb7e7d7437692e881043ac9ef3b.png
[bb6d1dc30f914de8de9abb1a775df8e8.png]: /images/20221023/f4455a86f933478681a7dd6736e5afe3.png
[916c7815a236ffe63f36947dd9931077.png]: /images/20221023/1e558d41bcbc4f94b794d901bb2aa728.png
[6711e95520ea8d0a23a1ac01a596a002.png]: /images/20221023/c2d9abda2081496f985982a56e9046c1.png
[b480bdda797b2ac1d412a6acc1e58b6d.png]: /images/20221023/865c67c05a6845e2b39a9606fc48c828.png