浏览器不支持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-flv	rtmp	hls
传输方式	http流	tcp流	http流
视频封装格式	flv	flv	Ts文件
延迟	低	低	高
数据分段	连续流	连续流	切片文件
h5播放	flv.js	video.js	hls.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插件)