浏览器不支持flash插件之后,h5播放rtmp直播流的解决方案

您所在的位置:网站首页 LETV-T1现在还可以播放吗 浏览器不支持flash插件之后,h5播放rtmp直播流的解决方案

浏览器不支持flash插件之后,h5播放rtmp直播流的解决方案

2023-05-24 18:16| 来源: 网络整理| 查看: 265

浏览器不支持flash插件之后,h5播放rtmp直播流的解决方案使用http-flv 背景几种视频流比较http-flv搭配flv.js播放方案rtmp与http-flv地址格式flv.js延迟问题flv.js的并发直播在线测试地址:

JavaCV转封装rtsp到rtmp(无需转码,低资源消耗) 海康sdk捕获码流数据通过JavaCV推成rtmp流的实现思路(PS流转封装RTMP)

相关资源: nginx-http-flv:https://download.csdn.net/download/weixin_40777510/12513147 nginx-rtmp:https://download.csdn.net/download/weixin_40777510/12270281 RTSPtoRTMP开源项目地址:https://gitee.com/banmajio/RTSPtoRTMP HCSDKtoRTMP项目地址:https://gitee.com/banmajio/HCSDKtoRTMP rtmp在线测试地址:http://cloud.liveqing.com:10080/#/liveplayer http-flv在线测试地址:http://bilibili.github.io/flv.js/demo/

背景

目前监控直播大多采用rtmp-nginx-flash来进行无插件播放的。但是2020年底,所有浏览器不再支持flash插件之后,rtmp的视频流就不能在浏览器中播放了。这个时候可以采用将rtmp重新封装成http-flv的视频流,采用flv.js来进行播放。

几种视频流比较 协议http-flvrtmphls传输方式http流tcp流http流视频封装格式flvflvTs文件延迟低低高数据分段连续流连续流切片文件h5播放flv.jsvideo.jshls.js http-flv搭配flv.js播放方案

rtmp和http-flv的视频格式都是flv格式的,只是传输协议而不同。rtmp是tcp的传输协议,而http-flv是http长链接的传输协议。 可以采用搭载http-flv模块的nginx服务对rtmp流重新封装为http-flv的流进行分发。搭载http-flv的nginx服务可以通过nginx-http-flv此处下载,没有积分的找拼多多代下载几毛钱!!! 已经编译成可执行的.exe文件,直接双击即可运行。端口即其他配置修改nginx.conf文件即可。 也可以通过下载源码,自行编译生成可执行文件:https://github.com/winshining/nginx-http-flv-module

流媒体服务推荐使用srs服务,配置部署都很简单!!!

rtmp与http-flv地址格式 worker_processes 1; #error_log logs/error.log; #error_log logs/error.log notice; #error_log logs/error.log info; #error_log logs/error.log debug; #pid logs/nginx.pid; events { worker_connections 1024; } # 添加RTMP服务 rtmp { server { listen 1935; application live { live on; } } } # 添加http-flv服务 http { server { listen 8080; server_name localhost; location /live { flv_live on; chunked_transfer_encoding on; #open 'Transfer-Encoding: chunked' response add_header 'Access-Control-Allow-Credentials' 'true'; #add additional HTTP header add_header 'Access-Control-Allow-Origin' '*'; #add additional HTTP header add_header Access-Control-Allow-Headers X-Requested-With; add_header Access-Control-Allow-Methods GET,POST,OPTIONS; add_header 'Cache-Control' 'no-cache'; } } }

如上配置,可以通过nginx服务同时分发rtmp流和http-flv流。

rtmp直播地址:rtmp://192.168.0.31:1935/live/streamid http-flv直播地址:http://192.168.0.31:8080/live?port=1935&app=live&stream=streamid srs分发的http-flv地址拼接格式与nginx分发的地址拼接略有不同,使用srs的朋友查看srs官方文档给出的例子!!!

flv.js延迟问题

累积延迟:flv.js有累积延迟问题,它在播放的过程中,会越来越落后于视频流的进度,这里应该定期的清空MSE的缓冲。

flv.js的并发

chrome浏览器对于同一个域名的并发连接是6路,而HTTP-FLV是基于HTTP协议的长连接,一般不注意的话,很容易误以为流媒体服务器有什么并发上的性能问题,其实这是浏览器的锅,这里建议使用多域名或是多端口号来避开浏览器对单域名的并发数的限速。

直播在线测试地址:

rtmp在线测试地址:http://cloud.liveqing.com:10080/#/liveplayer(需要加载flash插件) http-flv在线测试地址:http://bilibili.github.io/flv.js/demo/(不需要flash插件)



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3