浏览器不支持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播放方案
流媒体服务推荐使用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' responseadd_header 'Access-Control-Allow-Credentials' 'true'; #add additional HTTP headeradd_header 'Access-Control-Allow-Origin' '*'; #add additional HTTP headeradd_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的并发
浏览器不支持flash插件之后，h5播放rtmp直播流的解决方案相关推荐
- Vue 播放rtmp直播流
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 Vue 播放rtmp直播流 前言 一.vueVideo.vue封装 二.调用方式 前言 该组件是在vue-video-player基础 ...
- vue-cli3.0实现播放rtmp直播流
前言: 用vue来实现播放rtmp,代码很简单,主要用的ckplayer, 在使用过videojs,video等其他插件以后,在播放视频直播流这里,觉得还是ckplayer比较给力,这里说下使用方法 ...
- 浏览器不支持 flash 插件
出现上方问题,可点击下方链接下载 flash 中心,在 flash 中心打开网页就可以了.Flash官网-Flash Player下载 _Flash中心https://www.flash.cn/
- h5 rtmp推荐控件_H5浏览器播放RTMP直播流
Insert title here id="my-player" class="video-js" controls preload="auto&qu ...
- Web-Rtmp: 使用 WebSocket 在网页上播放 RTMP 直播流
https://blog.csdn.net/weixin_34037173/article/details/86120075
- 为什么越来越多的浏览器都宣布将不支持Flash插件？
Adobe Flash Player的问题在于其极端影响浏览器运转的功率,并且存在很高的安全危险.据悉,Chrome将于12月完全完毕对Adobe Flash Player的支撑.现在用户们还能够手动 ...
- js判断浏览器是否支持flash的方法
传统浏览器可以使用window.ActiveXObject检查浏览器是否启用相关的控件.检查浏览器是否启用flash控件,需要先检查浏览器是否支持ActiveXObject,可以使用typeof检查w ...
- Ubuntu 15 安装Chromium浏览器并添加Flash插件Pepper Flash Player
Chromium谷歌的开源浏览器将不再支持Netscape浏览器插件API,Adobe公司的Flash将无法正常工作了.然而用户可以使用Pepper Flash Player,这是谷歌浏览器上一款替代 ...
- 安卓微信浏览器无法支持input multiple的h5属性多图上传
H5手机端 实现多图上传的功能 但是实际上 安卓手机上只能义词上传一张图片(测试的机型:小米)代码如下: 在微信开发中遇见一个问题 应用上传插件安卓手机无法进行多张上传 当时现象: 微信浏览器选择安卓 ...
最新文章
- 学界 | 终结吧！机器学习的数学焦虑
- SpringMVC源码分析（8）剖析ViewResolver
- Python进阶09 动态类型
- mysql主从配置笔记_MySQL主从配置学习笔记
- Phyton自定义包导入。
- 51nod1676-无向图同构【乱搞】
- HBase之MemStore flush流程
- linux 适配电脑内核,Linux内核实践 如何添加网络协议[三]：实现 -电脑资料
- 如何从一行输入的字符串中基于空格切割出单词
- 【Android】自己定义控件——仿天猫Indicator
- c语言贪吃蛇 纯c,纯C语言贪吃蛇游戏
- 2017 ACM-ICPC 青岛站 总结
- ubuntu16.04安装搜狗拼音输入法
- 我可以利用计算机查找资料,《信息检索》复习题库 (1)
- 线性回归中一次性实现所有自变量的单因素分析
- 0基础UnityURP渲染管线人物渲染_皮肤_头发_眼睛_各向异性_SSS之实践
- [5G学习]01-5G无线接口架构介绍
- ###好好###远离送命题: 问答系统中语义匹配的『杀手锏』
- 插空排序C语言（直接插入排序）
- 白鹭引擎（Egret Engine ）