位置: IT常识 - 正文

Nginx-http-flv-module流媒体服务器搭建+模拟推流+flv.js在前端html和Vue中播放HTTP-FLV视频流

编辑:rootadmin
Nginx-http-flv-module流媒体服务器搭建+模拟推流+flv.js在前端html和Vue中播放HTTP-FLV视频流 场景

推荐整理分享Nginx-http-flv-module流媒体服务器搭建+模拟推流+flv.js在前端html和Vue中播放HTTP-FLV视频流,希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

Windows上搭建Nginx RTMP服务器并使用FFmpeg实现本地视频推流:

Windows上搭建Nginx RTMP服务器并使用FFmpeg实现本地视频推流_win nginx-rtmp最新版_霸道流氓气质的博客-CSDN博客

Vue中使用vue-video-player和videojs-flash插件实现播放rtmp视频文件流:

Vue中使用vue-video-player和videojs-flash插件实现播放rtmp视频文件流_videojs-flash vue_霸道流氓气质的博客-CSDN博客

前面使用Vue播放RTMP流时,需要借助于flash。这种方式对于flash插件的安装

与后续浏览器支持等都不是很好。可以采用将rtmp的视频流转换成HTTP-FLV的方式,

然后前端通过bilibili的flv.js实现播放。

nginx-http-flv-module

nginx-http-flv-module: 基于nginx-rtmp-module的流媒体服务器。具备nginx-rtmp-module的所有功能,增加了HTTP-FLV,GOP缓存和VHOST(一个IP对应多个域名)的功能。Media streaming server based on nginx-rtmp-module. In addtion to the features nginx-rtmp-module provides, HTTP-FLV, GOP cache and VHOST (one IP for multi domain names) are supported now.

中文说明

nginx-http-flv-module/README.CN.md at master · winshining/nginx-http-flv-module · GitHub

一款基于 nginx-rtmp-module 的流媒体服务器。

nginx-http-flv-module 具备nginx-rtmp-module 的所有功能,并且对比如下:

支持的播放器

VLC (RTMP & HTTP-FLV) / OBS (RTMP & HTTP-FLV) / JW Player (RTMP) / flv.js (HTTP-FLV).

注意事项

1、Adobe 将在 2020 年 12 月 31 日之后停止对 flash 播放器 的官方支持,

主流浏览器随后将移除 flash 播放器,使用 flash 播放器的插件将不再可用。

2、flv.js 只能运行在支持 Media Source Extensions 的浏览器上。

3、nginx-http-flv-module 包含了 nginx-rtmp-module 所有的功能,

所以不要将 nginx-http-flv-module 和 nginx-rtmp-module 一起编译。

4、如果使用 flv.js 播放流,那么请保证发布的流被正确编码,

因为 flv.js 只支持 H.264 编码的视频和 AAC/MP3 编码的音频。

5、其中的 add_header ‘Access-Control-Allow-Origin’ ‘*’ 与 add_header ‘Access-Control-Allow-Credentials’ ‘true’ 很重要,

主要解决了前端通过HTTP方式拉流是的跨域问题。

其他注意事项和详细细节可见官方github。

注:

博客:霸道流氓气质的博客_CSDN博客-C#,架构之路,SpringBoot领域博主

实现

1、官方示例以及推荐等都是在Linux服务器上。

但是如果需要在本地Windows电脑上进行调试或者服务器就必须是Windows服务器的话,

需要编译Windows版本,或者直接网络上搜索下载已经编译好的Windows版本。

比如:

https://download.csdn.net/download/codebooks/12793877

但是是否可用需要自己下载验证。

以下载上面的为例,下载解压后,自带run.bat运行脚本

脚本内容为:

nginx.exe -c conf/http-flv.conf

这里是指定走配置文件conf/http-flv.conf

Nginx-http-flv-module流媒体服务器搭建+模拟推流+flv.js在前端html和Vue中播放HTTP-FLV视频流

所以如果要修改的话也是修改http-flv.conf文件,而不是原来默认的nginx.conf文件了。

双击启动脚本启动后,可以从任务管理器中验证是否启动成功,或者通过其他查看日志等方式验证。

2、配置文件

关注两个地方,比如这里的官方例子

假设在 http 配置块中的 listen 配置项是:

http {    ...    server {        listen 8080; #不是默认的 80 端口        ...        location /live {            flv_live on;        }    }}

在 rtmp 配置块中的 listen 配置项是:

rtmp {    ...    server {        listen 1985; #不是默认的 1935 端口        ...        application myapp {            live on;        }    }}

并且发布的流的名称是 mystream,那么基于 HTTP 的播放 url 是:

http://example.com:8080/live?port=1985&app=myapp&stream=mystream

下面附官方提示的配置文件示例

​worker_processes  1; #运行在 Windows 上时,设置为 1,因为 Windows 不支持 Unix domain socket#worker_processes  auto; #1.3.8 和 1.2.5 以及之后的版本#worker_cpu_affinity  0001 0010 0100 1000; #只能用于 FreeBSD 和 Linux#worker_cpu_affinity  auto; #1.9.10 以及之后的版本error_log logs/error.log error;#如果此模块被编译为动态模块并且要使用与 RTMP 相关的功#能时,必须指定下面的配置项并且它必须位于 events 配置#项之前,否则 NGINX 启动时不会加载此模块或者加载失败#load_module modules/ngx_http_flv_live_module.so;events {    worker_connections  4096;}http {    include       mime.types;    default_type  application/octet-stream;    keepalive_timeout  65;    server {        listen       80;        location / {            root   /var/www;            index  index.html index.htm;        }        error_page   500 502 503 504  /50x.html;        location = /50x.html {            root   html;        }        location /live {            flv_live on; #打开 HTTP 播放 FLV 直播流功能            chunked_transfer_encoding on; #支持 'Transfer-Encoding: chunked' 方式回复            add_header 'Access-Control-Allow-Origin' '*'; #添加额外的 HTTP 头            add_header 'Access-Control-Allow-Credentials' 'true'; #添加额外的 HTTP 头        }        location /hls {            types {                application/vnd.apple.mpegurl m3u8;                video/mp2t ts;            }            root /tmp;            add_header 'Cache-Control' 'no-cache';        }        location /dash {            root /tmp;            add_header 'Cache-Control' 'no-cache';        }        location /stat {            #推流播放和录制统计数据的配置            rtmp_stat all;            rtmp_stat_stylesheet stat.xsl;        }        location /stat.xsl {            root /var/www/rtmp; #指定 stat.xsl 的位置        }        #如果需要 JSON 风格的 stat, 不用指定 stat.xsl        #但是需要指定一个新的配置项 rtmp_stat_format        #location /stat {        #    rtmp_stat all;        #    rtmp_stat_format json;        #}        location /control {            rtmp_control all; #rtmp 控制模块的配置        }    }}rtmp_auto_push on;rtmp_auto_push_reconnect 1s;rtmp_socket_dir /tmp;rtmp {    out_queue           4096;    out_cork            8;    max_streams         128;    timeout             15s;    drop_idle_publisher 15s;    log_interval 5s; #log 模块在 access.log 中记录日志的间隔时间,对调试非常有用    log_size     1m; #log 模块用来记录日志的缓冲区大小    server {        listen 1935;        server_name www.test.*; #用于虚拟主机名后缀通配        application myapp {            live on;            gop_cache on; #打开 GOP 缓存,减少首屏等待时间        }        application hls {            live on;            hls on;            hls_path /tmp/hls;        }        application dash {            live on;            dash on;            dash_path /tmp/dash;        }    }    server {        listen 1935;        server_name *.test.com; #用于虚拟主机名前缀通配        application myapp {            live on;            gop_cache on; #打开 GOP 缓存,减少首屏等待时间        }    }    server {        listen 1935;        server_name www.test.com; #用于虚拟主机名完全匹配        application myapp {            live on;            gop_cache on; #打开 GOP 缓存,减少首屏等待时间        }    }}​

然后上面下载的Windows编译版本的配置文件http-flv.conf的内容为

​worker_processes  1;error_log logs/error.log error;events {    worker_connections  4096;}http {    include       mime.types;    default_type  application/octet-stream;    keepalive_timeout  65;    server {        listen       800;        location / {            root   www;            index  index.html index.htm;        }        error_page   500 502 503 504  /50x.html;        location = /50x.html {            root   html;        }        location /live {            flv_live on; #打开HTTP播放FLV直播流功能            chunked_transfer_encoding on; #支持'Transfer-Encoding: chunked'方式回复            add_header 'Access-Control-Allow-Origin' '*'; #添加额外的HTTP头            add_header 'Access-Control-Allow-Credentials' 'true'; #添加额外的HTTP头        }        location /hls {            types {                application/vnd.apple.mpegurl m3u8;                video/mp2t ts;            }            root temp;            add_header 'Cache-Control' 'no-cache';        }        location /dash {            root temp;            add_header 'Cache-Control' 'no-cache';        }        location /stat {            #推流播放和录制统计数据的配置            rtmp_stat all;            rtmp_stat_stylesheet stat.xsl;        }        location /stat.xsl {            root www/rtmp; #指定stat.xsl的位置        }        #如果需要JSON风格的stat, 不用指定stat.xsl        #但是需要指定一个新的配置项rtmp_stat_format        #location /stat {        #    rtmp_stat all;        #    rtmp_stat_format json;        #}        location /control {            rtmp_control all; #rtmp控制模块的配置        }    }}rtmp_auto_push on;rtmp_auto_push_reconnect 1s;rtmp_socket_dir temp;rtmp {    out_queue           4096;    out_cork            8;    max_streams         128;    timeout             15s;    drop_idle_publisher 15s;    log_interval 5s; #log模块在access.log中记录日志的间隔时间,对调试非常有用    log_size     1m; #log模块用来记录日志的缓冲区大小    server {        listen 1935;        #server_name www.test.*; #用于虚拟主机名后缀通配  server_name 127.0.0.1;        application myapp {            live on;            gop_cache on; #打开GOP缓存,减少首屏等待时间        }        application hls {            live on;            hls on;            hls_path temp/hls;        }        application dash {            live on;            dash on;            dash_path temp/dash;        }    }}​

3、Windows上本地模拟推送RTMP视频流到nginx-http-flv-module

参考上面使用FFMpeg推送的流程,修改模拟推流bat脚本为

ffmpeg.exe -re -i D:\WorkSpace\Other\FFmpegDemo\test\1.mp4 -vcodec libx264 -acodec aac -f flv rtmp://127.0.0.1:1935/myapp/badaopause

推流成功之后,使用VLC进行拉流测试,网络串流地址为

http://127.0.0.1:800/live?port=1935&app=myapp&stream=badao

注意这里的

800对应http配置的端口

live对应http配置的location后面的/live

port=1935对应rtmp中配置的端口

app=myapp对应的myapp是rtmp中配置的application myapp

stream=badao的badao是对应推流时的rtmp://127.0.0.1:1935/myapp/badao的badao

拉流推流效果。

为了模拟时间延迟效果,可以使用其他推流工具,截图桌面时间显示进行推流,测试延迟效果。

Docker和docker-compose中部署nginx-rtmp实现流媒体服务与oob和ffmpeg推流测试:

Docker和docker-compose中部署nginx-rtmp实现流媒体服务与oob和ffmpeg推流测试_docker 推流_霸道流氓气质的博客-CSDN博客

这里可以参考使用oob进行模拟推流测试效果

4、bilibili的flv.js

GitHub - bilibili/flv.js: HTML5 FLV Player

可以看到其特点是

HTTP FLV低延迟实时流播放

在html中使用flv.js播放http-flv

将flv.min.js下载到本地

https://github.com/bilibili/flv.js/releases/download/v1.5.0/flv.min.js

然后新建html

<!DOCTYPE html><html><head>    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">    <title>flv.js demo</title>    <style>        .mainContainer {            display: block;            width: 1024px;            margin-left: auto;            margin-right: auto;        }        .urlInput {            display: block;            width: 100%;            margin-left: auto;            margin-right: auto;            margin-top: 8px;            margin-bottom: 8px;        }        .centeredVideo {            display: block;            width: 100%;            height: 576px;            margin-left: auto;            margin-right: auto;            margin-bottom: auto;        }        .controls {            display: block;            width: 100%;            text-align: center;            margin-left: auto;            margin-right: auto;        }    </style></head><body><p class="mainContainer">    <video name="videoElement" id="videoElement" class="centeredVideo" controls muted autoplay width="1024"           height="576">        Your browser is too old which doesn't support HTML5 video.    </video></p><script src="js/flv.min.js"></script><script>    function start() {        if (flvjs.isSupported()) {            var videoElement = document.getElementById('videoElement');            var flvPlayer = flvjs.createPlayer({                type: 'flv',               url:'http://127.0.0.1:800/live?port=1935&app=myapp&stream=badao'            });            flvPlayer.attachMediaElement(videoElement);            flvPlayer.load();            flvPlayer.play();        }    }    document.addEventListener('DOMContentLoaded', function () {        start();    });</script></body></html>

将url设置为上面的拉流地址,注意flv.min.js的路径

浏览器中访问该html看下效果

5、在Vue中使用flv.js播放http-flv

安装依赖

npm install --save flv.js

新建页面修改代码

<template lang="html">  <div id="app">    <video      id="videoLive"      crossorigin="anonymous"      controls      autoplay      width="100%"      height="100%"      style="object-fit: fill"    ></video>  </div></template><script>import flvjs from "flv.js";export default {  name: "flvPlayer",  data() {    return {      flvPlayer: null,    };  },  mounted() {   this.createVideo('http://127.0.0.1:800/liveport=1935&app=myapp&stream=badao',"videoLive")  },  methods: {    createVideo(url, elementId) {      if (flvjs.isSupported()) {        let videoElement = document.getElementById(elementId);        this.flvPlayer = flvjs.createPlayer({          type: "flv",          enableWorker: true, //浏览器端开启flv.js的worker,多进程运行flv.js          isLive: true, //直播模式          hasAudio: false, //关闭音频          hasVideo: true,          stashInitialSize: 128,          enableStashBuffer: true, //播放flv时,设置是否启用播放缓存,只在直播起作用。          url: url,        });        this.flvPlayer.attachMediaElement(videoElement);        this.flvPlayer.load();        this.flvPlayer.play();      }    },  },};</script><style lang="css"></style>

运行查看效果

本文链接地址:https://www.jiuchutong.com/zhishi/290219.html 转载请保留说明!

上一篇:一只棕颈鹭正在德索托堡公园里捕猎,佛罗里达州 (© Brian Lasenby/Getty Images)(一只棕色)

下一篇:最轻的超极本是什么(超级本轻薄本)

  • 微信看别人朋友圈会有记录吗(微信看别人朋友圈别人会知道吗)

    微信看别人朋友圈会有记录吗(微信看别人朋友圈别人会知道吗)

  • 抖音视频的下载权限如何设置(抖音视频的下载量怎么看)

    抖音视频的下载权限如何设置(抖音视频的下载量怎么看)

  • 一加7t手机是2k屏吗

    一加7t手机是2k屏吗

  • soul是卸载了才有灰吗(soul卸载了还会有推送消息嘛)

    soul是卸载了才有灰吗(soul卸载了还会有推送消息嘛)

  • qq群怎么举报才能封群(qq群怎么举报群主)

    qq群怎么举报才能封群(qq群怎么举报群主)

  • 苹果反转关了还是黑色(iphone反转手机屏幕亮怎么关闭)

    苹果反转关了还是黑色(iphone反转手机屏幕亮怎么关闭)

  • k20pro充电器多少w(k20 pro充电器)

    k20pro充电器多少w(k20 pro充电器)

  • 充电接口松动及插不紧的解决方法(充电接口松动及处理方法)

    充电接口松动及插不紧的解决方法(充电接口松动及处理方法)

  • 抖音平台的特点和优势是什么(简述抖音平台的特点)

    抖音平台的特点和优势是什么(简述抖音平台的特点)

  • 荣耀30和30pro区别(荣耀30和荣耀30pro差在哪)

    荣耀30和30pro区别(荣耀30和荣耀30pro差在哪)

  • 怎么强制关闭电脑程序(怎么强制关闭电脑运行程序)

    怎么强制关闭电脑程序(怎么强制关闭电脑运行程序)

  • 物联网安全面对的挑战主要有哪些(物联网安全问题主要体现在哪些方面)

    物联网安全面对的挑战主要有哪些(物联网安全问题主要体现在哪些方面)

  • 直放站和基站区别(基站 直放站)

    直放站和基站区别(基站 直放站)

  • 为啥淘宝买家秀很模糊(淘宝买家秀为什么会消 失)

    为啥淘宝买家秀很模糊(淘宝买家秀为什么会消 失)

  • 电脑钉钉视频黑屏什么原因(钉钉视频黑屏)

    电脑钉钉视频黑屏什么原因(钉钉视频黑屏)

  • 苹果8p怎么恢复原来的系统(苹果8p怎么恢复模式)

    苹果8p怎么恢复原来的系统(苹果8p怎么恢复模式)

  • vivo跟oppo都是国企吗(vivo和oppo都是国产吗)

    vivo跟oppo都是国企吗(vivo和oppo都是国产吗)

  • ipada1538是什么版本(ipada1538多少钱)

    ipada1538是什么版本(ipada1538多少钱)

  • htcu11怎么截图(htcu11手机)

    htcu11怎么截图(htcu11手机)

  • word怎么打上标(word怎么打上标符号)

    word怎么打上标(word怎么打上标符号)

  • 解绑亲情号对方知道吗(解绑亲情号对方会收到通知吗)

    解绑亲情号对方知道吗(解绑亲情号对方会收到通知吗)

  • 微信已读功能在哪(微信已读功能在哪里开启)

    微信已读功能在哪(微信已读功能在哪里开启)

  • 苹果x有面容和无面容的区别(苹果x有面容和无面容的差价)

    苹果x有面容和无面容的区别(苹果x有面容和无面容的差价)

  • 快手app在哪里打开(快手app在哪里打电话)

    快手app在哪里打开(快手app在哪里打电话)

  • 最小的固态硬盘是什么(最小的固态硬盘多大尺寸)

    最小的固态硬盘是什么(最小的固态硬盘多大尺寸)

  • 动产租赁税率是多少2023
  • 百旺金税盘官网
  • 手机上税票怎么开
  • 收到增值税发票怎么认证
  • 纳税申报操作流程
  • 报账单大写金额填写方式
  • 机票行程单能报销几次
  • 城建税有没减半
  • 支付个人无发票怎么入账
  • 住宿费专用发票税率是多少
  • 红冲暂估原材料如何做会计分录
  • 跨年的预付账款如何冲销
  • 国税变更办税人怎么变更
  • 出口退税预审在申报系统怎么做
  • 小微企业免征增值税申报表怎样填
  • 正确解读《非居民金融账户涉税信息尽职调查管理办法》
  • 总公司集中支付说明
  • 自来水企业应该交什么税
  • 没有签订合同需要交税吗
  • 工程款主营业务成本
  • 劳务外包业务外包的区别
  • 印花税的征收范围
  • 增值税税差调整原因
  • 免征的税款每月几号申报
  • 微型小型车
  • 如何理解结转利润的意思
  • uniapp异常处理
  • 收到以前年度退税款的会计分录
  • QQPCTray.exe是什么进程 QQPCTray.exe文件介绍
  • 差旅费增值税专用发票少报销可以吗
  • PHP:iconv_mime_decode()的用法_iconv函数
  • 所得税时间性差异与永久性有关吗
  • 企业间合作建房且建成后自用
  • uniapp打包成h5如何调用原生
  • 融资租入固定资产是什么意思
  • 自己组装产品再卖掉
  • 付出对价的公允
  • php取值
  • 专家坐诊信息
  • 客服部门发生的费用
  • 个人终止投资经营的条件
  • 帝国cms安装教程
  • 增值税小规模纳税人适用3%征收率
  • 增值税进项税额在借方还是贷方
  • 人工成本与工资的关系
  • 出租车公共服务
  • 资产损失账务处理要求
  • 租赁厂房对方不租怎么办
  • 小规模纳税人需要每月清卡吗
  • 对公账户一直没有对账,会有什么后果吗?
  • 会计核算形式的设计具体内容包括
  • 增值税一般纳税人是什么意思
  • 购买固定资产进项税现金流量
  • 资产负债率计算方法公式
  • 捐赠利得的会计科目
  • 收付实现制和权责发生制的主要区别是确认
  • 个税返还开票什么项目
  • 生产成本增加记哪边
  • 明细账建账的步骤
  • 日记账处理数据流程图
  • 新设企业如何建账
  • mysql实现分页查询
  • 错误的英文
  • centos7 cp
  • 帝国时代2能在win10
  • xp开机后蓝屏
  • 使用标准用户帐号的方法
  • xp系统新建用户后原来的用户没有了
  • win xp 内存
  • 向量上面有个倒着的v
  • js判断密码强弱
  • unity3d总结
  • javascript基础
  • jquery设置图片大小
  • js使用类
  • javascript面向对象 第三方类库
  • 广西发票查询平台
  • 呼和浩特市契税2021年新规
  • 没有税务备案,不用申报增值税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设