最近帮朋友的公司部署了一套分流+水印的直播系统

顺手打包成docker镜像，方便大家需要用到的时候开箱即用，不需要百度一些零碎的文章 也可做简单的直播服务，只需调整配置文件便可达到你的需求.

需求：将直播流分流到两个云厂商的直播云，一个有水印，一个无水印。使用hls播放

朋友需求的拓扑示意图：

nginx MP4加速 nginx rtmp延迟_nginx MP4加速

当前拓扑示意图(阿某云和腾讯云不方便放出推流和拉流地址，有兴趣的同学可以去申请玩一下)

nginx MP4加速 nginx rtmp延迟_nginx rtmp直播无延迟_02

基于docker-nginx-rtmp进行配置部署，这篇文章的意义是实现直播分流及直播画面水印.

  • Nginx 1.16.1(从源代码编译的稳定版本)
  • nginx-rtmp-module 1.2.1(从源代码编译)
  • ffmpeg 4.2.1(从源代码编译)
  • 已配置好的nginx.conf
  • 水印图片存放位置(容器内)：
    /opt/images/logo.png
  • 本机
  • 直播云(例：
    阿某云、腾讯云、ucloud)
  • 只支持1920*1080(如需支持其他分辨率可参考nginx.conf)
  • 实现两路分流
  • 实现直播水印效果

部署运行

1安装docker(Centos7,其他系统请发挥你的搜索功能)

$ docker pull ar414/nginx-rtmp-ffmpeg$ docker run -it -d -p 1935:1935 -p 8080:80 --rm ar414/nginx-rtmp-ffmpeg

3 推流地址(Stream live content to)：

rtmp://:1935/stream/$STREAM_NAME

4 SSL证书

将证书复制到容器内，并在容器内修改nginx.conf配置文件，然后重新commit(操作容器内的文件都需要重新commit才会生效)

listen 443 ssl;ssl_certificate     /opt/certs/example.com.crt;ssl_certificate_key /opt/certs/example.com.key;

5 OBS配置

obs 官网：

  • Stream Type: Custom Streaming Server
  • URL: rtmp://:1935/stream
  • Stream Key：ar414

nginx MP4加速 nginx rtmp延迟_配置文件_03

6 观看测试

HLS播放测试工具：player.alicdn.com/aliplayer/s… (如果配置了证书则使用https)

7 HLS播放地址

RTMP测试工具：PotPlayer

8 RTMP播放地址

  • 无水印：
    rtmp://:1935/stream/ar414

    • nginx MP4加速 nginx rtmp延迟_ide_04

  • 有水印：
    需要分流到其他服务器上

完整配置文件：

https://github.com/ar414-com/nginx-rtmp-ffmpeg-conf/blob/master/nginx.conf

9 RTMP配置

daemon off;error_log /dev/stdout info;events {    worker_connections 1024;}rtmp {    server {        listen 1935;        chunk_size 4000;        application stream {            live on;            exec ffmpeg -i rtmp://localhost:1935/stream/$name -i /opt/images/ar414.png              -filter_complex "overlay=10:10,split=1[ar414]"              -map '[ar414]' -map 0:a -s 1920x1080 -c:v libx264 -c:a aac -g 30 -r 30 -tune zerolatency -preset veryfast -crf 23 -f flv rtmp://localhost:1935/hls/$name_wm              -c:a libfdk_aac -b:a 128k -c:v libx264 -b:v 2500k -f flv -g 30 -r 30 -s 1920x1080 -preset superfast -profile:v baseline rtmp://localhost:1935/hls/$name;        }        application hls {            live on;            hls on;            hls_fragment 5;            hls_path /opt/data/hls;        }    }}http {    access_log /dev/stdout combined;    ssl_ciphers         HIGH:!aNULL:!MD5;    ssl_protocols       TLSv1 TLSv1.1 TLSv1.2;    ssl_session_cache   shared:SSL:10m;    ssl_session_timeout 10m;    server {        listen 80;        # Uncomment these lines to enable SSL.        # Update the ssl paths with your own certificate and private key.        # listen 443 ssl;        # ssl_certificate     /opt/certs/example.com.crt;        # ssl_certificate_key /opt/certs/example.com.key;        location /hls {            types {                application/vnd.apple.mpegurl m3u8;                video/mp2t ts;            }            root /opt/data;            add_header Cache-Control no-cache;            add_header Access-Control-Allow-Origin *;        }        location /live {          alias /opt/data/hls;          types {              application/vnd.apple.mpegurl m3u8;              video/mp2t ts;          }          add_header Cache-Control no-cache;          add_header Access-Control-Allow-Origin *;        }        location /stat {            rtmp_stat all;            rtmp_stat_stylesheet static/stat.xsl;        }        location /static {            alias /www/static;        }        location = /crossdomain.xml {            root /www/static;            default_type text/xml;            expires 24h;        }    }}

10 如果需要推多个直播云则复制多个 exec ffmpeg即可 如下：

application stream {    live on;    #分流至本机hls    exec ffmpeg -i rtmp://localhost:1935/stream/$name -i /opt/images/ar414.png      -filter_complex "overlay=10:10,split=1[ar414]"      -map '[ar414]' -map 0:a -s 1920x1080 -c:v libx264 -c:a aac -g 30 -r 30 -tune zerolatency -preset veryfast -crf 23 -f flv rtmp://localhost:1935/hls/$name_wm      -c:a libfdk_aac -b:a 128k -c:v libx264 -b:v 2500k -f flv -g 30 -r 30 -s 1920x1080 -preset superfast -profile:v baseline rtmp://localhost:1935/hls/$name;    #分流至腾讯云    exec ffmpeg -i rtmp://localhost:1935/stream/$name -i /opt/images/ar414.png      -filter_complex "overlay=10:10,split=1[ar414]"      -map '[ar414]' -map 0:a -s 1920x1080 -c:v libx264 -c:a aac -g 30 -r 30 -tune zerolatency -preset veryfast -crf 23 -f flv rtmp://live-push.tencent.com/stream/$name_wm      -c:a libfdk_aac -b:a 128k -c:v libx264 -b:v 2500k -f flv -g 30 -r 30 -s 1920x1080 -preset superfast -profile:v baseline rtmp://live-push.tencent.com/stream/$name;    #分流至阿某云    exec ffmpeg -i rtmp://localhost:1935/stream/$name -i /opt/images/ar414.png      -filter_complex "overlay=10:10,split=1[ar414]"      -map '[ar414]' -map 0:a -s 1920x1080 -c:v libx264 -c:a aac -g 30 -r 30 -tune zerolatency -preset veryfast -crf 23 -f flv rtmp://live-push.aliyun.com/stream/$name_wm      -c:a libfdk_aac -b:a 128k -c:v libx264 -b:v 2500k -f flv -g 30 -r 30 -s 1920x1080 -preset superfast -profile:v baseline rtmp://live-push.aliyun.com/stream/$name;}

11 水印位置

  • 水印位置

水印图片位置

overlay值

左上角

10:10

右上角

main_w-overlay_w-10:10

左下角

10:main_h-overlay_h-10

右下角

main_w-overlay_w-10 : main_h-overlay_h-10

  • overlay参数

参数

说明

main_w

视频单帧图像宽度(当前配置文件1920)

main_h

视频单帧图像高度(当前配置文件1080)

overlay_w

水印图片的宽度

overlay_h

水印图片的高度

通过浏览器访问视频

nginx MP4加速 nginx rtmp延迟_ide_05

Mobile(移动端)， 这个我测试了一下，效果非常的好

<html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>Mobile HLS videotitle>head><body><h1>Mobile HLS videoh1><ul>    <li>移动端可直接通过 >video< 标签来播放 <code>.m3u8code> 格式的视频li>    <li>PC端需要通过其他手段(例如 videojs-contrib-hls)来解码 <code>.m3u8code> 格式的视频, 才能够通过 >video< 标签或者 flash 来播放li>ul><h2>移动端播放 HLS(<code>.m3u8code>) 视频h2><video width="300" height="200"       playsinline webkit-playsinline       autoplay controls preload="auto"       x-webkit-airplay="true" x5-video-player-fullscreen="true" x5-video-player-typ="h5">    <source src="http://192.168.1.3:8080/live/ar414.m3u8" type="application/x-mpegURL">video><h2>参考h2><p><a href="https://m.zhanqi.tv/1128054">xx直播a>p><pre>>video       controls="controls" autoplay="autoplay"    x-webkit-airplay="true" x5-video-player-fullscreen="true"    preload="auto" playsinline="true" webkit-playsinline    x5-video-player-typ="h5"<    >source type="application/x-mpegURL" src="http://dlhls.cdn.zhanqi.tv/zqlive/22578_yKdJM.m3u8"<>/video<pre>body>html>

大家看到的这个播放器html代码(PC端)

<html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>PC HLS videotitle>    <link href="http://cdn.bootcss.com/video.js/6.0.0-RC.5/alt/video-js-cdn.min.css" rel="stylesheet">head><body><h1>PC 端播放 HLS(<code>.m3u8code>) 视频h1><p>借助 video.js 和 videojs-contrib-hlsp><p>由于 videojs-contrib-hls 需要通过 XHR 来获取解析 m3u8 文件, 因此会遭遇跨域问题, 请设置浏览器运行跨域p><video id="hls-video" width="300" height="200" class="video-js vjs-default-skin"       playsinline webkit-playsinline       autoplay controls preload="auto"       x-webkit-airplay="true" x5-video-player-fullscreen="true" x5-video-player-typ="h5">        <source src="http://192.168.1.3:8080/live/ar414.m3u8" type="application/x-mpegURL">        video><script src="http://cdn.bootcss.com/video.js/6.0.0-RC.5/video.js">script><script src="http://cdn.bootcss.com/videojs-contrib-hls/5.3.3/videojs-contrib-hls.js">script><script>    // XMLHttpRequest cannot load http://xxx/video.m3u8. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://192.168.198.98:8000' is therefore not allowed access.    // 由于 videojs-contrib-hls 需要通过 XHR 来获取解析 m3u8 文件, 因此会遭遇跨域问题, 请设置浏览器运行跨域    var player = videojs('hls-video');    player.play();script>body>html>