简单速成的-Nginx rtmp mp4视频点播服务搭建

最新推荐文章于 2024-07-10 13:28:51 发布
最新推荐文章于 2024-07-10 13:28:51 发布
阅读量4.5k 收藏 10
点赞数 2
分类专栏： nodejs 文章标签： nginx rtmp vue docker
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wenwst/article/details/105956904
版权
1.说明

本文使用Nginx搭建视频点播服务。也是最简单的一种配置方式。使用在hub.docker.com中的rtmp-hls最新的镜像搭建。
所要达到的目标也非常简单： 将mp4文件通过rtmp协议进行在线播放。

2.参考地址
https://hub.docker.com/r/alqutami/rtmp-hls
https://github.com/arut/nginx-rtmp-module
3.镜像

使用到的镜像为：当前时间(2020-05-08)

alqutami/rtmp-hls:latest
4.镜像获取

拉取docker镜像的命令如下:

docker pull alqutami/rtmp-hls:latest
5.获取配置

查看镜像配置信息

docker run -it -p 1935:1935 -p 8080:8080   alqutami/rtmp-hls  cat /etc/nginx/nginx.conf

输出如下：

worker_processes  auto;
#error_log  logs/error.log;

events {
    worker_connections  1024;
}

# RTMP configuration
rtmp {
    server {
		listen 1935; # Listen on standard RTMP port
		chunk_size 4000; 
		# ping 30s;
		# notify_method get;

		# This application is to accept incoming stream
		application live {
			live on; # Allows live input

			# for each received stream, transcode for adaptive streaming
			# This single ffmpeg command takes the input and transforms
			# the source into 4 different streams with different bitrates
			# and qualities. # these settings respect the aspect ratio.
			exec_push  /usr/local/bin/ffmpeg -i rtmp://localhost:1935/$app/$name -async 1 -vsync -1
						-c:v libx264 -c:a aac -b:v 256k  -b:a 64k  -vf "scale=480:trunc(ow/a/2)*2"  -tune zerolatency -preset superfast -crf 23 -f flv rtmp://localhost:1935/show/$name_low
						-c:v libx264 -c:a aac -b:v 768k  -b:a 128k -vf "scale=720:trunc(ow/a/2)*2"  -tune zerolatency -preset superfast -crf 23 -f flv rtmp://localhost:1935/show/$name_mid
						-c:v libx264 -c:a aac -b:v 1024k -b:a 128k -vf "scale=960:trunc(ow/a/2)*2"  -tune zerolatency -preset superfast -crf 23 -f flv rtmp://localhost:1935/show/$name_high
						-c:v libx264 -c:a aac -b:v 1920k -b:a 128k -vf "scale=1280:trunc(ow/a/2)*2" -tune zerolatency -preset superfast -crf 23 -f flv rtmp://localhost:1935/show/$name_hd720
						-c copy -f flv rtmp://localhost:1935/show/$name_src;
		}

		# This is the HLS application
		application show {
			live on; # Allows live input from above application
			deny play all; # disable consuming the stream from nginx as rtmp
			
			hls on; # Enable HTTP Live Streaming
			hls_fragment 3;
			hls_playlist_length 20;
			hls_path /mnt/hls/;  # hls fragments path
			# Instruct clients to adjust resolution according to bandwidth
			hls_variant _src BANDWIDTH=4096000; # Source bitrate, source resolution
			hls_variant _hd720 BANDWIDTH=2048000; # High bitrate, HD 720p resolution
			hls_variant _high BANDWIDTH=1152000; # High bitrate, higher-than-SD resolution
			hls_variant _mid BANDWIDTH=448000; # Medium bitrate, SD resolution
			hls_variant _low BANDWIDTH=288000; # Low bitrate, sub-SD resolution
			
			# MPEG-DASH
            dash on;
            dash_path /mnt/dash/;  # dash fragments path
			dash_fragment 3;
			dash_playlist_length 20;			
		}
	}
}


http {
	sendfile off;
	tcp_nopush on;
	directio 512;
	# aio on;
	
	# HTTP server required to serve the player and HLS fragments
	server {
		listen 8080;
		
		# Serve HLS fragments
		location /hls {
			types {
				application/vnd.apple.mpegurl m3u8;
				video/mp2t ts;
			}
			
			root /mnt;

            add_header Cache-Control no-cache; # Disable cache
			
			# CORS setup
			add_header 'Access-Control-Allow-Origin' '*' always;
			add_header 'Access-Control-Expose-Headers' 'Content-Length';
            
			# allow CORS preflight requests
			if ($request_method = 'OPTIONS') {
				add_header 'Access-Control-Allow-Origin' '*';
				add_header 'Access-Control-Max-Age' 1728000;
				add_header 'Content-Type' 'text/plain charset=UTF-8';
				add_header 'Content-Length' 0;
				return 204;
			}
		}
		
        # Serve DASH fragments
        location /dash {
            types {
                application/dash+xml mpd;
                video/mp4 mp4;
            }

			root /mnt;
			
			add_header Cache-Control no-cache; # Disable cache


            # CORS setup
            add_header 'Access-Control-Allow-Origin' '*' always;
            add_header 'Access-Control-Expose-Headers' 'Content-Length';

            # Allow CORS preflight requests
            if ($request_method = 'OPTIONS') {
                add_header 'Access-Control-Allow-Origin' '*';
                add_header 'Access-Control-Max-Age' 1728000;
                add_header 'Content-Type' 'text/plain charset=UTF-8';
                add_header 'Content-Length' 0;
                return 204;
            }
        }		
		
		# This URL provides RTMP statistics in XML
		location /stat {
			rtmp_stat all;
			rtmp_stat_stylesheet stat.xsl; # Use stat.xsl stylesheet 
		}

		location /stat.xsl {
			# XML stylesheet to view RTMP stats.
			root /usr/local/nginx/html;
		}

	}
}

由于本文只针对rtmp的简单的点播，因此，不详细说明以上配置的内容。

5. 添加配置

将默认的配置文件复制出来，然后将以下的配置内容添加进去。
需要加入的配置内容如下:

 # video on demand
    application vod {
        play /mnt/flvs;
    }
   application vod2 {
        play /mnt/mp4s;
    }

添加完成后，配置文件的内容为: rtmp.conf

worker_processes  auto;
#error_log  logs/error.log;

events {
    worker_connections  1024;
}

# RTMP configuration
rtmp {
    server {
		listen 1935; # Listen on standard RTMP port
		chunk_size 4000; 
		# ping 30s;
		# notify_method get;

         # video on demand
        application vod {
            play /mnt/flvs;
        }

        application vod2 {
            play /mnt/mp4s;
        }

		# This application is to accept incoming stream
		application live {
			live on; # Allows live input

			# for each received stream, transcode for adaptive streaming
			# This single ffmpeg command takes the input and transforms
			# the source into 4 different streams with different bitrates
			# and qualities. # these settings respect the aspect ratio.
			exec_push  /usr/local/bin/ffmpeg -i rtmp://localhost:1935/$app/$name -async 1 -vsync -1
						-c:v libx264 -c:a aac -b:v 256k  -b:a 64k  -vf "scale=480:trunc(ow/a/2)*2"  -tune zerolatency -preset superfast -crf 23 -f flv rtmp://localhost:1935/show/$name_low
						-c:v libx264 -c:a aac -b:v 768k  -b:a 128k -vf "scale=720:trunc(ow/a/2)*2"  -tune zerolatency -preset superfast -crf 23 -f flv rtmp://localhost:1935/show/$name_mid
						-c:v libx264 -c:a aac -b:v 1024k -b:a 128k -vf "scale=960:trunc(ow/a/2)*2"  -tune zerolatency -preset superfast -crf 23 -f flv rtmp://localhost:1935/show/$name_high
						-c:v libx264 -c:a aac -b:v 1920k -b:a 128k -vf "scale=1280:trunc(ow/a/2)*2" -tune zerolatency -preset superfast -crf 23 -f flv rtmp://localhost:1935/show/$name_hd720
						-c copy -f flv rtmp://localhost:1935/show/$name_src;
		}

		# This is the HLS application
		application show {
			live on; # Allows live input from above application
			deny play all; # disable consuming the stream from nginx as rtmp
			
			hls on; # Enable HTTP Live Streaming
			hls_fragment 3;
			hls_playlist_length 20;
			hls_path /mnt/hls/;  # hls fragments path
			# Instruct clients to adjust resolution according to bandwidth
			hls_variant _src BANDWIDTH=4096000; # Source bitrate, source resolution
			hls_variant _hd720 BANDWIDTH=2048000; # High bitrate, HD 720p resolution
			hls_variant _high BANDWIDTH=1152000; # High bitrate, higher-than-SD resolution
			hls_variant _mid BANDWIDTH=448000; # Medium bitrate, SD resolution
			hls_variant _low BANDWIDTH=288000; # Low bitrate, sub-SD resolution
			
			# MPEG-DASH
            dash on;
            dash_path /mnt/dash/;  # dash fragments path
			dash_fragment 3;
			dash_playlist_length 20;			
		}
	}
}


http {
	sendfile off;
	tcp_nopush on;
	directio 512;
	# aio on;
	
	# HTTP server required to serve the player and HLS fragments
	server {
		listen 8080;
		
		# Serve HLS fragments
		location /hls {
			types {
				application/vnd.apple.mpegurl m3u8;
				video/mp2t ts;
			}
			
			root /mnt;

            add_header Cache-Control no-cache; # Disable cache
			
			# CORS setup
			add_header 'Access-Control-Allow-Origin' '*' always;
			add_header 'Access-Control-Expose-Headers' 'Content-Length';
            
			# allow CORS preflight requests
			if ($request_method = 'OPTIONS') {
				add_header 'Access-Control-Allow-Origin' '*';
				add_header 'Access-Control-Max-Age' 1728000;
				add_header 'Content-Type' 'text/plain charset=UTF-8';
				add_header 'Content-Length' 0;
				return 204;
			}
		}
		
        # Serve DASH fragments
        location /dash {
            types {
                application/dash+xml mpd;
                video/mp4 mp4;
            }

			root /mnt;
			
			add_header Cache-Control no-cache; # Disable cache


            # CORS setup
            add_header 'Access-Control-Allow-Origin' '*' always;
            add_header 'Access-Control-Expose-Headers' 'Content-Length';

            # Allow CORS preflight requests
            if ($request_method = 'OPTIONS') {
                add_header 'Access-Control-Allow-Origin' '*';
                add_header 'Access-Control-Max-Age' 1728000;
                add_header 'Content-Type' 'text/plain charset=UTF-8';
                add_header 'Content-Length' 0;
                return 204;
            }
        }		
		
		# This URL provides RTMP statistics in XML
		location /stat {
			rtmp_stat all;
			rtmp_stat_stylesheet stat.xsl; # Use stat.xsl stylesheet 
		}

		location /stat.xsl {
			# XML stylesheet to view RTMP stats.
			root /usr/local/nginx/html;
		}

	}
}
7.启动镜像
docker run -d -p 1935:1935 -p 8080:8080 -v /配置文件的目录/rtmp.conf:/etc/nginx/nginx.conf -v /mp4文件的存放目录/assets:/mnt alqutami/rtmp-hls

在配置文件中，mp4文件的存放目录地址为：/mnt/mp4s。则，需要将mp4文件放入:
/mp4文件的存放目录/assets/mp4s目录中

8.使用VLC连接

地址为：rtmp://127.0.0.1:1935/vod2/abc.mp4
在这里插入图片描述
播放效果:
在这里插入图片描述

9.使用vue-video-player

playerOptions内容如下:

playerOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
        autoplay: false, //如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: 'zh-CN',
        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        techOrder: ['flash','html5'],      // 兼容顺序
　　　　flash: {

          hls: { withCredentials: false },
          swf: 'https://cdn.bootcdn.net/ajax/libs/videojs-swf/5.4.2/video-js.swf' // 引入静态文件swf
        },
        html5: { hls: { withCredentials: false } },
        sources: [{ // 流配置，数组形式，会根据兼容顺序自动切换
          // type: 'rtmp/mp4',
          type: 'rtmp/mp4',
          src: 'rtmp://192.168.1.102:1935/vod2/abc.mp4',
        }],
        poster: "", //你的封面地址
        // width: document.documentElement.clientWidth,
        notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true  //全屏按钮
        }
      }

效果:
在这里插入图片描述

wenwst
关注
专栏目录
Nginx-rtmp流媒体服务器搭建+ffmpeg推流.pdf
06-12
本文将对Nginx-rtmp流媒体服务器的搭建和ffmpeg推流进行详细的讲解，从操作系统的选择到Nginx的编译安装，最后到配置Nginx服务和ffmpeg推流的配置。 一、操作系统的选择 在搭建流媒体服务器时，选择合适的操作系统...
用nginx搭建基于rtmp或者http的flv、mp4流媒体服务器
喝拉菲的猫
03-24 1542
一、流媒体播放方式 1、 HTTP方式 这种方式要下载FLV视频文件到本地播放，一旦FLV视频文件下载完成，就不会消耗服务器的资源和带宽，但是拖动功能没有RTMP/RTMP流媒体方式强大，很多视频网站都是用HTTP方式实现的，如：YouTube，土豆，酷6等 2、 RTMP/RTMP流媒体方式 这种方式不用下载FLV视频文件到本地，可以实时的播放flv文件，可以任意拖拽播放...
Nginx配置支持mp4视频流播放,超简单
热门推荐
hua0721的博客
11-28 1万+
Nginx配置支持mp4视频流播放,超简单，配置之后支持边下边播，支持快进快退
nginx安装配置视频服务器,linux环境
最新发布
简单，坚持
07-10 304
本文首先介绍音视频技术理论，接着讲在linux上如何安装、配置用于视频流播放的nginx；然后通过ffmpeg提供一个视频推流，最后通过网页的方式播放flv流。
【Microsoft Azure 的1024种玩法】四十二. 通过Windows Admin Center快速创建Azure Virtual Machines
一只特立独行的兔先森
05-14 1109
大小
使用Nginx代理访问服务器的.mp4文件,并使用Vue播放
yueyue763184的博客
04-03 3540
在/home/nginx/www目录下创建images文件夹，并上传.mp4文件在其下，主要是使用video来播放。
docker 搭建nginx-rtmp
司马懿的西山居
11-18 8209
拉取镜像 首先，在docker的镜像页面 https://hub.docker.com/search?type=image 搜索关键词 “nginx rtmp” sudo docker pull alqutami/rtmp-hls 说明 这是一个基于 Nginx 和 nginx-rtmp-module 的模块 使用 FFmpeg 来转码和自适应流媒体 默认配置 RTMP open HLS open（适配5种变量） DASH open 统计页面 http://<server ip&g
基于nginx搭建在线播放mp4
qq_32002285的博客
12-14 6876
需求：使用的腾讯云服务器有公网环境，虽然服务器带宽只有1兆，但使用比特彗星下载却可以达到十几兆，但下载好了观看是个问题，从服务器上下载到本地的话只能以1兆的速度下载，所以就想到了在线观看 系统： nginx 下载地址http://nginx.org/download/nginx-1.21.4.zip 默认访问地址 http://127.0.0.1 配置文件服务器 location / { root C:/; # ...
nginx-rtmp搭建rtmp流媒体服务
12-14
本文将详细介绍如何使用nginx-rtmp模块搭建一个支持RTMP（Real-Time Messaging Protocol）的流媒体服务器，以便处理来自大华摄像头等设备的视频流。 首先，让我们了解什么是nginx-rtmp。Nginx是一款高性能的HTTP和...
nginx-rtmp模块源码包nginx-rtmp-module-master
03-25
Nginx-RTMP 模块是 Nginx 的一个扩展，用于处理 Real-Time Messaging Protocol (RTMP) 流，它允许 Nginx 作为 RTMP 服务器运行，支持直播和点播服务。这个源码包 "nginx-rtmp-module-master" 包含了 Nginx-RTMP 模块...
虚谷号Nginx RTMP(点播服务器搭建)1
08-04
虚谷号Nginx RTMP点播服务器搭建教程 Nginx是一款高性能的HTTP和反向代理服务器，也是一款邮件代理服务器。通过结合RTMP模块，它可以成为一个强大的流媒体服务器，支持实时流传输协议（RTMP）。本教程将详细介绍...
nginx-rtmp-monitoring：nginx rtmp模块的实时监视统计信息显示板
02-03
带有实时监控仪表板的rtmp＆hls服务器。 如何安装 chmod +x setup.sh && ./setup.sh 登录到仪表板 在浏览器中打开 登录的默认凭据： 用户名：admin 要查找密码，您需要运行以下命令： docker exec -it fstv_...
Docker部署rtmp服务器
qq_44803615的博客
04-25 867
利用docker搭建一个rtmp服务器
基于K8S搭建HLS直播/点播云服务
ysf465639310的专栏
03-17 2529
基于K8S搭建HLS直播/点播云服务 Nginx本身是一个非常出色的HTTP服务器,FFMPEG是非常好的音视频解决方案.这两个东西通过一个nginx的模块nginx-rtmp-module, 组合在一起即可以搭建一个功能相对比较完善的流媒体服务器。同时利用K8S集群管理，快速完成直播点播云服务。 Pod模块架构图 模块讲解 待续 容器编排 待续 该模式缺点 由于通过读取ts文件的方式进行流媒体...
使用Nginx配置mp4视频播放踩坑记录
weixin_34331102的博客
02-27 1万+
一、环境配置 Nginx : Tengine（2.1.1）/ Nginx（1.6.2） 二、安装步骤1、下载/ngx_http_enhance_mp4_module执行命令： cd /data/wwwroot/server/nginx_module git clone https://github.com/whatvn/ngx_htt...
rtsp直播流转换成rtmp流在浏览器正常播放（Windows命令行，Java代码)
Mr_XiMu的博客
10-15 7429
rtsp直播流转换成rtmp流在浏览器正常播放（Windows命令行，Java代码)
HLS-搭建Nginx流媒体点播服务(SaaS docker)
ysf465639310的专栏
03-06 2860
HLS-搭建Nginx流媒体服务器 Nginx本身是一个非常出色的HTTP服务器,FFMPEG是非常好的音视频解决方案.这两个东西通过一个nginx的模块nginx-rtmp-module, 组合在一起即可以搭建一个功能相对比较完善的流媒体服务器。同时利用Docker容器，编写nginx-rtmp容器，简单高效。 docker-compose.yml 编写 直接使用docker hub 上的 rt...
nginx配置mp4文件在线播放
chenxun1522的博客
10-18 4772
1、打开nginx的文件夹遍历功能 vim /usr/local/nginx/conf/nginx.conf #编辑配置文件，在http {下面添加以下内容： autoindex on; #开启nginx目录浏览功能 autoindex_exact_size off; #文件大小从KB开始显示...
windows+nginx配置mp4视频在线播放
qq1784855023的博客
05-09 6214
windows+nginx配置mp4视频在线播放 其实很简单，添加几句代码就可以了 打开nginx的conf配置文件，在这一段代码 server { listen 80; server_name localhost; #charset koi8-r; #access_log logs/host.acc...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值