ToB企服应用市场:ToB评测及商务社交产业平台

标题: 构建流媒体管道:利用 Docker 部署 Nginx-RTMP 从 FFmpeg RTMP 推流到 HLS [打印本页]

作者: 锦通    时间: 2024-10-12 23:52
标题: 构建流媒体管道:利用 Docker 部署 Nginx-RTMP 从 FFmpeg RTMP 推流到 HLS
最近要实现一个雷同导播台的功能,于是我先用 FFmpeg 实现一个参考对照的 Demo,我将其整理为一篇文章,方便后续各人大概和自己参考!
  
1、软件工具先容

本次部署相干软件 / 工具如下:
PS:本篇内容不讨论 FFmpeg、Docker 的安装

2、流程说明

一个媒体流(直播流)的传输通常包括:推流端、流媒体服务器和拉流端:

在本篇文章中,我们将利用 FFmpeg 作为推流端,Nginx-RTMP(Docker 中部署)最为多媒体服务器,前端网页作为拉流端。
推流端多媒体服务器拉流端FFmpegNginx-RTMP(Docker 中部署前端网页
3、具体步骤

3.1、步骤 1 - Docker 下载 Nginx-RTMP 镜像

首先,必要在呆板上安装 Docker,并配置好 Docker 情况。之后从 Docker Hub 或其他可信的镜像仓库中拉取已经集成了 Nginx-RTMP 模块的 Docker 镜像。
  1. docker pull tiangolo/nginx-rtmp:latest
复制代码
3.2、步骤 2 - 编写 Nginx 配置

我们后续会将本地文件映射到 Docker 的 Nginx 容器中,所以我们将 nginx.conf 编写在本地即可(配置中的文件地点可以提前建好):
  1. worker_processes 1;
  2. events {
  3.     worker_connections 1024;
  4. }
  5. rtmp {
  6.     server {
  7.         listen 1935; # RTMP标准端口
  8.         chunk_size 4096;
  9.                                 # 在相应的 RTMP 应用配置中启用 HLS 并指定 HLS 文件存储的路径
  10.         application live {
  11.             live on;
  12.             record off;
  13.             
  14.             # 启用HLS
  15.                                     hls on;
  16.                                     hls_path /usr/share/nginx/html/hls;
  17.                                     hls_fragment 3s;
  18.                                     hls_playlist_length 60s;
  19.         }
  20.     }
  21. }
  22. # 配置 HTTP 服务器以支持 HLS 播放
  23. http {
  24.     server {
  25.         listen 8080;
  26.         location /hls {
  27.             alias /usr/share/nginx/html/hls;
  28.             add_header 'Access-Control-Allow-Origin' '*' always;
  29.             types {
  30.                 application/vnd.apple.mpegurl m3u8;
  31.                 video/mp2t ts;
  32.             }
  33.         }
  34.     }
  35. }
复制代码
3.3、步骤 3 - 启动 Nginx 的 Docker 容器

这里我们做好相应的端口和挂载地点之后启动一个名为 nginx-rtmp 的容器:
  1. docker run -p 1935:1935 -p 80:8080 --name nginx-rtmp -v /Users/lizhengi/DockerVolumes/nginx/conf/nginx.conf:/etc/nginx/nginx.conf -v /Users/lizhengi/DockerVolumes/nginx/html:/usr/share/nginx/html -d tiangolo/nginx-rtmp
复制代码
3.4、步骤 4 - 利用 FFmpeg 向 Nginx 推流

利用 FFmpeg 向 Nginx 推流:
  1. ffmpeg -re -i /Users/lizhengi/Downloads/120004475_da2-1-192.mp4 -c:v libx264 -preset veryfast -maxrate 3000k -bufsize 6000k -pix_fmt yuv420p -g 50 -c:a aac -b:a 160k -f flv rtmp://localhost:1935/live/stream
复制代码
打印示例:

3.5、步骤 5 - 前端网页查看

前端网页查看 Demo(注意相干地点正确性):
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>HLS Streaming</title>
  7.     <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
  8. </head>
  9. <body>
  10. <video id="video" controls autoplay style="width: 100%; height: auto;"></video>
  11. <script>
  12.     var video = document.getElementById('video');
  13.     if (Hls.isSupported()) {
  14.         var hls = new Hls();
  15.         hls.loadSource('http://localhost:80/hls/stream.m3u8'); // HLS 流地址
  16.         hls.attachMedia(video);
  17.         hls.on(Hls.Events.MANIFEST_PARSED, function() {
  18.             video.play();
  19.         });
  20.     }
  21.     // For browsers that support HLS natively (like Safari)
  22.     else if (video.canPlayType('application/vnd.apple.mpegurl')) {
  23.         video.src = 'http://localhost:80/hls/stream.m3u8';
  24.         video.addEventListener('loadedmetadata', function() {
  25.             video.play();
  26.         });
  27.     }
  28. </script>
  29. </body>
  30. </html>
复制代码
播放示例:

至此,整个流程复现完毕,文章结束!!!!

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。




欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4