[nginx流媒体服务器] nginx+vue 使用rtmp实现hls直播

项目里面需要使用直播技术,在网上看了一些文章,终于测试成功了,在此记录一下。这里借鉴了https://blog.csdn.net/Ricardo18/article/details/89359623这篇文章。

准备

对于RTMP、HLS、HTTP-FLV的介绍我就不在详细说了,借鉴的文章里讲的很详细。
因为我实在win10(开发环境)下部署测试的,所以我就记录windows下部署怎么做

  • Nginx
    Nginx下载地址
    我下载的是nginx 1.7.11.3 Gryphon.zip版本,据说是这个版本带有rtmp组件,但是我没有找到,又自己重新下载了rtmp组件
  • nginx rtmp组件
    rtmp组件下载
  • OBS Studio
    OBS下载地址
    因为测试的时候使用的时OBS,后期会使用APP,但是推流操作是大同小异的。
  • VLC media player
    VLC media player下载
    测试拉流

安装部署

将下载的nginx 1.7.11.3 Gryphon.zip解压到指定目录,

在这里插入图片描述
然后将下载的rtmp组件nginx-rtmp-module-master.zip解压至nginx根目录
在这里插入图片描述
至于OBS Studio 和 VLC media player的安装这里就不贴图了,双击下载的.exe文件安装就行了。

Nginx配置

在nginx根目录下找到conf文件夹,在conf文件夹下创建nginx.conf,内容如下:

	worker_processes  6; #工作进程数,默认为:1 如果调大的话,可以设置为CPU核心数
	events {
	    worker_connections  1024; #单个工作进程允许的最大连接数 默认:1024
	}
	rtmp_auto_push on; #开启自动推送(多worker直播流)模式 默认:off
	#RTMP服务
	rtmp{
	    server{
		    listen 1935;        #服务端口
			chunk_size 4096;    #数据传输块的大小
			application live {
				live on; #开启直播
				hls on;  #开启hls协议
	            hls_path D:/hls/live;  #视频流存放地址
				hls_fragment 1s;
				hls_playlist_length 4s;
				hls_continuous on; #连续模式
	            hls_cleanup on;    #对多余的切片进行删除
	            hls_nested on;     #嵌套模式
			}
		}
	} 
 #http服务
 http {
	server {
		listen       80;
		server_name  192.168.1.170;
		location / {
			root   html;
			index  index.html index.htm;
		}
		location /live {
			types {
				application/vnd.apple.mpegurl m3u8;
				video/mp2t ts;
			}
			autoindex on;
			alias D:/hls/live; #上面的 hls_path,这两个地址需一致
			expires -1;
			add_header Cache-Control no-cache;
			#防止跨域问题
			add_header Access-Control-Allow-Origin *;
		}
		#配置/stat可以使用 ip:80/stat 查看推拉流的状态
		location /stat{
			rtmp_stat all;
			rtmp_stat_stylesheet stat.xsl;
		}
		location /stat.xsl{
			#这个是rtmp模块的路径
			root ./nginx-rtmp-module-master;
		}
		error_page   500 502 503 504  /50x.html;
		location = /50x.html {
			root   html;
		}
	}
}

启动Nginx

打开cmd命令行 -> cd /d 切换到你的nginx根目录下
使用命令 nginx -t 检查配置文件
在这里插入图片描述
如图,说明配置文件没有问题,,
使用命令 start nginx 启动nginx
然后打开浏览器。访问你配置的ip:port我的是192.168.1.170:80 所以我访问192.168.1.170就可以,
在这里插入图片描述
访问到这个页面,说明你的nginx启动成功了,
然后访问ip:port/stat 192.168.1.170/stat
在这里插入图片描述
如果访问到这个页面,那么说明你的rtmp组件也是打开了。

测试推流

打开安装好的OBS软件

  1. 添加一个场景
    在这里插入图片描述
  2. 添加来源
    点击**+**选择来源类型,我这里选的是显示器采集
    在这里插入图片描述
    这里选择好以后,就会出现显示器的画面,下一步点击设置
    在这里插入图片描述
    设置里点击推流,在右边服务器填入 rtmp://ip:port/live 我的是 rtmp://192.168.1.170:1935/live,这里先不设置密钥,,点击应用,然后确定
    在这里插入图片描述
    然后点击开始推流。。
    在这里插入图片描述
    浏览器访问 ip:port/stat 我的:http://192.168.1.170/stat
    在这里插入图片描述
    可以看到已经又一条直播流在了,状态是活跃的,active
    接下来,打开 VLC播放器,,,选择媒体,,选择打开网络串流,输入你的流地址,点击播放(开始拉流)。
    在这里插入图片描述
    在这里插入图片描述
  • 到这里已经完成了整个nginx部署流媒体服务器,并且实现了推流和拉流的操作。

这里顺便提一下,在使用vue前端拉流的时候,如果使用 rtmp://192.168.1.170:1935/live
拉流,就会出现cros传输类型不支持的错误,因为chrome浏览器已经不支持flash, 所以需要使用
http://192.168.1.170/live/index.m3u8 (这是没有密钥的情况)来拉流, 在vlc播放器里也可以使用。 如果在推流的时候设置了密钥,那么就需要在index.m3u8前加上一级密钥,
http://192.168.1.170/live/****/index.m3u8 至于像cctv这种 http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8 使用密钥替换掉index的操作, 目前还在研究哈,

目前有APP推流和VUE拉流,详情请看UniApp+Vue+Nginx实现简单直播

Logo

前往低代码交流专区

更多推荐