【入门】无插件web直播解决方案,ffmpeg+nginx-http-flv-module+flv.js

概述

这几天一直在搭建一个web端的直播平台,需求是无插件,低延迟,开源免费。

但是网上的教程,大多比较零散,没有整合成一套解决方案。

所以搜索了很多资料,也问了不少群里的大佬。本篇博客是一个资源整合贴,也是一个避坑贴。

最终选定的解决方案:ffmpeg推流——>nginx-http-flv-module流服务器——>flv.js前端播放器

直播流协议:http-flv。优势:延迟低,无插件播放。

方案优势:所有组件均为开源免费。ffmpeg成熟、资料多。nginx-http-flv-module流服务器作者仍在维护,功能强大。flv.js是b站的开源播放器,GitHub有1W多star,可以无插件播放http-flv直播流。

下面分别讲解。

nginx-http-flv-module流服务器搭建

我的服务器环境是 Ubuntu 16.04.3 LTS + nginx-1.1.17 + nginx-http-flv-module最新版。具体配置方法如下:

centos7下,nginx-1.1.17不适用,出现各种异常,最后换为nginx-1.8.1.tar.gz解决问题。浪费大量时间!

1.nginx和nginx-http-flv-module的编译安装

下载NGINX和nginx-http-flv-module。

将它们解压到某一路径。

打开NGINX的源代码路径并执行:

将模块编译进NGINX

./configure --add-module=/path/to/nginx-http-flv-module
make
make install

来自nginx-http-flv-module的官方GitHub

作者大da一笔带过的事,可花费我了很长时间尝试。

总结:

  • /path/to应该修改成你的nginx-http-flv-module文件夹的位置。
  • nginx和nginx-http-flv-module源码下载命令
wget http://nginx.org/download/nginx-1.1.17.tar.gz

git clone git://github.com/winshining/nginx-http-flv-module.git
  • 解压后的两个文件夹应在同一目录下。

2.修改nginx的配置文件

  • 打开配置文件
vim /usr/local/nginx/conf/nginx.conf #打开配置文件

  • 删除原内容,复制nginx-http-flv-module的官方GitHub中的配置。在readme的这个位置:
  • 一些关键配置:
...

http {
    include       mime.types;
    default_type  application/octet-stream;

    keepalive_timeout  65;

    server {
        listen       80; #http-flv的拉流端口

        ...
        
        # http-flv的相关配置
        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头
        }

        ...
    }
}

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.*; #用于虚拟主机名后缀通配

        #ffmpeg推流的application 
        application myapp {
            live on;
            gop_cache on; #打开GOP缓存,减少首屏等待时间
        }

       ...
    }

   ...
}
  • 注意gop_cache这个参数,on时延迟高,但第一帧画面加载快。off时正好相反,延迟低,第一帧加载略慢。
  • 还有很多参数我还不懂怎么调
  • 配置完成!

ffmpeg推流设置

  • 首先,ffmpeg是个开源且强大的工具,可在官网直接下载。http://ffmpeg.org/download.html
  • 再将ffmpeg的bin目录导入环境变量Path。
  • 最后,cmd推流命令,详情请参考这篇资料https://www.jianshu.com/p/c141fc7881e7
  • 举例,我用笔记本摄像头推流的命令:
ffmpeg -f dshow -i video="Integrated Webcam" -g 25 -vcodec libx264  -preset:v ultrafast -tune:v zerolatency -f flv rtmp://127.0.0.1:1935/myapp/mystream

-g 25:每隔25帧,插入一个关键帧,可提高缓冲速度。而且延迟不会明显增加。

  • url根据nginx配置文件的不同,而改变。
    rtmp://example.com[:port]/appname/streamname

flv.js的配置

  • flv.js是个工程化的前端项目,可以从GitHub下载后,使用工具生成js文件。可参考这篇博客:https://www.jianshu.com/p/8dda2be878b3
  • 不懂前端的vue,node.js这些东西,或不想麻烦怎么办?直接导入在线js文件!cdn网址:https://www.bootcdn.cn/flv.js/   
  • flv.js的在线导入代码:
  • 开始撸播放器的代码,或直接从网上下载个demo改改来用:https://www.cnblogs.com/saysmy/p/7851911.html
  • 播放器调优,不调调是真的卡,兼容性还差。修改player的创建参数:
var flvPlayer = flvjs.createPlayer({
                type: 'flv',
                enableWorker: true,     //浏览器端开启flv.js的worker,多进程运行flv.js
                isLive: true,           //直播模式
                hasAudio: false,        //关闭音频             
                hasVideo: true,
                stashInitialSize: 128,  
                enableStashBuffer: false, //播放flv时,设置是否启用播放缓存,只在直播起作用。
                url: ''
            });
  • 各参数详细含义可百度。。
  • url由nginx配置文件决定,格式
    http://example.com:8080/live?port=1935&app=myapp&stream=mystream

    至此,整个解决方案已完成搭建。可以根据实际使用情况调整各参数。

效果图:

【入门】无插件web直播解决方案,ffmpeg+nginx-http-flv-module+flv.js_第1张图片

================================================================================================

++flv.js播放器累计时延的尝试消除

问题:使用中发现,如果最小化播放器的页面,或者进行浏览器页面切换,会增加播放器时延。正如以下资料中描述的“切换前后台带来的累积延时”。转自:http://www.samirchen.com/live-delay-optimization/

优化切换前后台带来的累积延时

在直播场景中,有一种情况是切换前后台造成累积延时。这里举个例子:在前台时,直播视频在播放,然后退到后台,此时暂停播放器,音视频数据继续缓存,当回到前台时,继续从刚才退出时的视频流数据开始播放,而实际的直播现在已经不在这个时间点了。这段前后台切换的时间里,就积累了一段延时。

对于这种延时改怎么处理呢?

  • 第一种方案是播放器采用视频同步音频的策略,然后退到后台时保持音频继续播放(在 iOS 平台需要开启 App 的 Background Audio 能力来配合)。这样可以保持音频一直播放不产生延时,而当回到前台时,视频同步音频直接切换到最新时间戳即可。

  • 第二种方案是回到前台时重新刷新直播,重连直播流,这样即可消灭累积延时。但是这种方案的问题是重连直播流的过程需要一定的时间,这样回到前台时会有卡顿,或者出现黑屏,尤其是当你的首屏加载优化不够时,这个卡顿或黑屏时间会较长。所以这种方案在你的首屏加载优化的比较好的情况下可以采用。此外,你可以退到后台时截取视频当前帧贴图到直播间上,从而当切回前台时,防止黑屏,优化体验,实践效果还是不错的。

一种解决方法:我最终在flv.js GitHub的相关issue中找到了一种解决方法。代码如下:

setInterval(function () {
            console.log("时延校正判断");
            if (!_video.buffered.length) {
                return;
            }
            var end = _video.buffered.end(0);
            var diff = end - _video.currentTime;
            console.log(diff);
            if (diff >= 4) {
                console.log("进行时延校正");
                _video.currentTime = end;
                //alert("时延过长,请点击时延校准");
            }
        }, 3000)

这种方法对video.buffered.end(0)和video.currentTime进行差值判断。若差值大于一定值,自动进行校准。

其原理是:获取了视频的缓冲范围,如果缓存超过一定长度,就跳跃播放。

也可不进行校准,直接停止播放,提醒用户刷新界面(一些直播网站也是这么做的,用户离开时间过长将拒绝播放)。

相关资料:直播中累积延时的优化,低延时直播应用,flv.jsGithub

 

感谢网友的资料,感谢群友的思路,感谢各位开源大佬。

================================================================================================

++保存直播视频到服务器

user root; #给Nginx足够的文件访问权限

rtmp {
    out_queue           1024;
    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;
                record video;                         #记录直播视频
                record_path /tmp/rec;                 #视频保存路径
                record_suffix -%d-%b-%y-%T.flv;       #视频保存名:日期+.flv

....

 

你可能感兴趣的:(linux)