900字范文 > 浏览器不支持flash插件之后 h5播放rtmp直播流的解决方案

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

时间：2020-05-26 05:31:52

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

原文链接

背景

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

也可以通过下载源码，自行编译生成可执行文件：/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' 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/streamidhttp-flv直播地址：http://192.168.0.31:8080/live?port=1935&app=live&stream=streamidsrs分发的http-flv地址拼接格式与nginx分发的地址拼接略有不同，使用srs的朋友查看srs官方文档给出的例子！！！