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

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

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

原文链接

目录:

相关资源:

背景

几种视频流比较

http-flv搭配flv.js播放方案

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插件)