html5播放rtsp方案

原创
2018/06/19 22:52
阅读数 22.9W

由于摄像头是rtsp格式的,h5原生不支持这种格式,网上查了很多教程大多是使用rtsprtmp,不过rtmp需要falsh的支持,但是在chrome已经默认禁用、包括未来也会逐渐淘汰,所有最终这种方案被淘汰。一种叫jsmpeg的插件,它主要是通过webSocket发送MPEG,前端通过js解析MPEG不断绘制canvas,包括音频。最终测试的结果就是一个1920*1080分辨率的画面延时大概的0.5s左右,性能蛮高的

说了这么多开始教程吧

(未知原因博客无法访问了,重新审核一下)

准备工具

1 . Ffmpeg),配置境添加到path

2 . Node.js),配置境添加到path

3 . jsmpeg),运行主程序

4 . 运行jsmpeg

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

https://oscimg.oschina.net/oscnet/3d0bbeae44cfe3918493f3689a8b366816c.jpg

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

终端: npm install ws

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

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

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

  • 运行解码程序

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

https://oscimg.oschina.net/oscnet/8e82554ec7c4ebdac01e41d9efa44bd32c8.jpg

       https://oscimg.oschina.net/oscnet/3c74ccf95811e5ba35d3c455f58569c3470.jpg

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

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

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

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

  • 第一

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

https://oscimg.oschina.net/oscnet/0a441d90c75c2ee313a331b1dcbe5722f37.jpg

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

  • 第二

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

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

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

这两不一样的就是最后的live1live2

  • 第三

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

https://oscimg.oschina.net/oscnet/bf12bb7b29338eb8b0964a753ecf07c3a28.jpg

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

https://oscimg.oschina.net/oscnet/c99aeae000cce98b9d3922ba289a61a3688.jpg

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

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

  • 第一条使用英特尔的CPU硬件加速,普通pccpu有效,服务器如至强处理器无效

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

基于webrtc播放的解决方案移步到https://my.oschina.net/chengpengvb/blog/5023676

6 . 开源视频播放系统

我发现大家对视频直播的需求比较大于是开源这个项目出来,减少重复工作,项目地址:https://github.com/chengpengvb/video

先看一下效果

  • 主要功能包括:

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

    2 . 比较低的延迟

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

    4 . 支持声音播放

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

支持ssl加密方式

  • 运行环境:

    1 . WindowsLinux

    2 . 2jdk1.8ffmpegnodejsnginx-rtmpIE播放)

  • 运行配置

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

    2 . video-agent负责解码

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

  • 启动程序

    1 . video-regist

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

    3 . video-center

    4 . 打开浏览器:http://127.0.0.1:8080/或者http://127.0.0.1:8080/index

  • 引入cssjs部分

    参考multiPlay.htmldefault.html页面

  • 前端api说明

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

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

var option = {

       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

                                                           

 

展开阅读全文
打赏
20
35 收藏
分享
加载中
楼主,多点几次,就会有许多Player,造成内存泄漏,报错是:could not allocate memory,咋解决啊
11/26 17:26
回复
举报
是不是你的电脑内存不足,ffmpeg无法在堆上再分配空间
11/26 17:34
回复
举报
比如开8个监控视频,就有8个player和WASM,然后再次点进来,变成16个player和16个WASM,点一次就加8个player和WASM,多点几次就卡死了,只有刷新才能复原。是不是因为没有销毁这些对象,导致的内存泄露啊
11/26 19:50
回复
举报
看不到评论?
05/14 16:19
回复
举报
如何用程序中断拉流
02/03 10:59
回复
举报
博主你好,
[rtsp @ 0x3438520] RTP: PT=60: bad cseq 677f expected=5912
[hevc @ 0x343d460] Could not find ref with POC 46
这个一出现,画面模糊了
02/03 10:55
回复
举报
websocket没rtmp稳定,还是有点卡
02/03 10:13
回复
举报
串流了,俩个是视频画面一样
02/01 18:31
回复
举报
大神你好:请问rtsp流的格式为tcp 。按照你的方法来报错500 应该怎么解决。。在线等。急.谢谢
2020/11/16 15:29
回复
举报
大佬 ,项目地址:https://github.com/chengpengvb/video 这里面的程序怎么运行啊。搞不定啊。介绍太少了
2020/11/09 10:29
回复
举报
请教一个问题,用不同的画布去覆盖之前的画布,视频播放正常,但是感觉页面占cpu很严重,这个能解决吗
2020/10/29 15:06
回复
举报
画布要销毁的
2020/12/03 09:58
回复
举报
花屏,报错:error while decoding MB 0 6, bytestream 43018
2020/10/09 15:05
回复
举报
更多评论
打赏
139 评论
35 收藏
20
分享
返回顶部
顶部