电子商务实验网站建设实训过程,东城网站制作公司,html个人博客完整代码,汕头市门户网站建设最近要实现一个类似导播台的功能#xff0c;于是我先用 FFmpeg 实现一个参考对照的 Demo#xff0c;我将其整理为一篇文章#xff0c;方便后续大家或者和自己参考#xff01; 1、软件工具介绍
本次部署相关软件 / 工具如下#xff1a;
FFmpeg#xff1a;全称是 Fast Fo… 最近要实现一个类似导播台的功能于是我先用 FFmpeg 实现一个参考对照的 Demo我将其整理为一篇文章方便后续大家或者和自己参考 1、软件工具介绍
本次部署相关软件 / 工具如下
FFmpeg全称是 Fast Forward Moving Picture Expert Group是一个免费的开源程序库也是一套视频音频的完整解决方案它提供了视频解码、编码、后期处理等一系列功能对世界上千奇百怪的视频音频编码有着完善的支持。Nginx-RTMPNginx 是一款高性能的 Web 和反向代理服务器RTMPReal-Time Messaging Protocol是用于音频、视频数据传输的协议。Nginx-RTMP 模块可以让 Nginx 实例支持 RTMP 协议从而实现流媒体服务。Docker 一个容器化的平台可以方便地打包和运行应用程序不受底层基础设施的影响。在这个解决方案中Nginx-RTMP 模块被封装到 Docker 镜像中使得环境配置变得简单同时也易于在不同的环境中迁移和扩展。
PS本篇内容不讨论 FFmpeg、Docker 的安装 2、流程说明
一个媒体流直播流的传输通常包括推流端、流媒体服务器和拉流端
推流端负责采集音视频数据并将其发送到流媒体服务器。常见的推流工具有 OBS、FFmpeg 等。流媒体服务器接收推流端发送的数据进行转码、分发和存储等处理。常见的流媒体服务器有 Nginx配合 RTMP 模块、Wowza、Red5 等。拉流端从流媒体服务器获取音视频数据并进行播放。拉流端可以是网页、手机应用或者其他支持播放的设备和软件。
在本篇文章中我们将使用 FFmpeg 作为推流端Nginx-RTMPDocker 中部署最为多媒体服务器前端网页作为拉流端。
推流端多媒体服务器拉流端FFmpegNginx-RTMPDocker 中部署前端网页 3、具体步骤
3.1、步骤 1 - Docker 下载 Nginx-RTMP 镜像
首先需要在机器上安装 Docker并配置好 Docker 环境。之后从 Docker Hub 或其他可信的镜像仓库中拉取已经集成了 Nginx-RTMP 模块的 Docker 镜像。
docker pull tiangolo/nginx-rtmp:latest3.2、步骤 2 - 编写 Nginx 配置
我们后续会将本地文件映射到 Docker 的 Nginx 容器中所以我们将 nginx.conf 编写在本地即可配置中的文件地址可以提前建好
worker_processes 1;events {worker_connections 1024;
}rtmp {server {listen 1935; # RTMP标准端口chunk_size 4096;# 在相应的 RTMP 应用配置中启用 HLS 并指定 HLS 文件存储的路径application live {live on;record off;# 启用HLShls on;hls_path /usr/share/nginx/html/hls;hls_fragment 3s;hls_playlist_length 60s;}}
}# 配置 HTTP 服务器以支持 HLS 播放
http {server {listen 8080;location /hls {alias /usr/share/nginx/html/hls;add_header Access-Control-Allow-Origin * always;types {application/vnd.apple.mpegurl m3u8;video/mp2t ts;}}}
}3.3、步骤 3 - 启动 Nginx 的 Docker 容器
这里我们做好相应的端口和挂载地址之后启动一个名为 nginx-rtmp 的容器
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 推流
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注意相关地址正确性
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleHLS Streaming/titlescript srchttps://cdn.jsdelivr.net/npm/hls.jslatest/script
/head
bodyvideo idvideo controls autoplay stylewidth: 100%; height: auto;/videoscriptvar video document.getElementById(video);if (Hls.isSupported()) {var hls new Hls();hls.loadSource(http://localhost:80/hls/stream.m3u8); // HLS 流地址hls.attachMedia(video);hls.on(Hls.Events.MANIFEST_PARSED, function() {video.play();});}// For browsers that support HLS natively (like Safari)else if (video.canPlayType(application/vnd.apple.mpegurl)) {video.src http://localhost:80/hls/stream.m3u8;video.addEventListener(loadedmetadata, function() {video.play();});}
/script/body
/html播放示例 至此整个流程复现完毕文章结束
