本文主要引用自: https://blog.csdn.net/Ricardo18/article/details/89359623
本文主要是安装nginx以及使用nginx的rtmp-module来实现直播服务。
环境介绍:
1. 阿里云购买了 1核1G 7M带宽的服务器,并安装CentOS7.7系统
2. nginx-1.12.2
3. 在CentOS上安装了宝塔运维,方便文件上传等操作
下载地址如下:
wget http://nginx.org/download/nginx-1.12.2.tar.gz
wget https://codeload.github.com/arut/nginx-rtmp-module/zip/master
由于bt(宝塔运维)自带解压软件,所以使用运维界面可直接解压。
也可以使用下面的命令进行解压。
tar -zxvf nginx-1.12.2.tar.gz
unzip nginx-rtmp-module-master.zip
下面命令直接运行即可,已经安装过的库会有提示,直接进行下一步即可。
yum -y install gcc-c++
yum -y install pcre pcre-devel
yum -y install zlib zlib-devel
yum -y install openssl openssl-devel
cd /www/server/rtmp-live/nginx-1.12.2
#完成rtmp模块安装,=后面输入你的模块包的绝对路径
./configure --add-module=/www/server/rtmp-live/nginx-rtmp-module-master
make&make install
注意此时nginx启动、重启等操场需要在/usr/local/nginx/sbin下进行。
nginx的配置文件也必须在/usr/local/nginx/conf/nginx.conf 此路径下修改才能生效。
cd /usr/local/nginx/sbin
./nginx -t
显示下面的结果则表示安装成功。
首先打开nginx配置文件:
vi /usr/local/nginx/conf/nginx.conf
http{} 同级加入下面配置:
rtmp {
server {
listen 1935; #监听的端口
chunk_size 4000;
application hls {
live on;
hls on;
hls_path /www/hls;#视频流存放地址
hls_fragment 5s;
hls_playlist_length 15s;
hls_continuous on; #连续模式。
hls_cleanup off; #保存切片。
hls_nested on; #嵌套模式。
}
}
}
位置入下图:
推流时会在视频存放地址生成对应 串流密钥的文件夹,并在文件夹中生成index.m3u8 以及切片文件(.ts)
location /hls { #添加视频流存放地址。
types {
application/vnd.apple.mpegurl m3u8;
video/mp2t ts;
}
#访问权限开启,否则访问这个地址会报403
autoindex on;
alias /www/hls;#视频流存放地址,与上面的hls_path相对应,这里root和alias的区别可自行百度
expires -1;
add_header Cache-Control no-cache;
#防止跨域问题
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
}
位置如下图:
cd /usr/local/nginx/sbin
./nginx -s reload
注意: 由于本文环境使用的是阿里云以及宝塔运维,所以测试前需要将端口:80、1935打开。
推流时使用的是OBS进行推流,在设置-串流中输入服务器地址和串流密钥即可开始推流。
由于服务器在nginx中配置的application为 “hls”,所以服务器的地址必须填写为:rtmp://(IP/域名):1935/hls。
串流密钥可以随便填写,此处我填写的为“1111”。
拉流此处介绍两种方式:
(1)使用VLC用 “rtmp://(IP/域名):1935/hls/1111” 进行拉流
首先下载VLC播放器:https://www.videolan.org/
在file - open network 中填写拉流地址:“rtmp://(IP/域名):1935/hls/1111”
双击地址即可进行播放:
(2)使用网页播放m3u8
将下面代码中的连接修改为您自己的拉流连接,保存成html后打开即可播放。注意连接格式为:
“http://” + ip + “/hls” + 推流密钥 + /index.m3u8
例如: http://192.168.1.123/hls/1111/index.m3u8
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>前端播放m3u8格式视频</title>
<link href="https://vjs.zencdn.net/7.4.1/video-js.css" rel="stylesheet">
<script src='https://vjs.zencdn.net/7.4.1/video.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js" type="text/javascript"></script>
<!-- videojs-contrib-hls 用于在电脑端播放 如果只需手机播放可以不引入 -->
</head>
<body>
<style>
.video-js .vjs-tech {position: relative !important;}
</style>
<div>
<video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" data-setup='{}' style='width: 100%;height: auto'>
<source id="source" src="http://ip/hls/1111/index.m3u8"></source>
</video>
</div>
<div class="qiehuan" style="width:100px;height: 100px;background: red;margin:0 auto;line-height: 100px;color:#fff;text-align: center">切换视频</div>
<div> 当前直播连接为: <div id="liveUrl">http://ip/hls/1111/index.m3u8</div> </div>
</body>
<script>
// videojs 简单使用
var myVideo = videojs('myVideo', {
bigPlayButton: true,
textTrackDisplay: false,
posterImage: false,
errorDisplay: false,
})
myVideo.play()
var changeVideo = function (vdoSrc) {
if (/\.m3u8$/.test(vdoSrc)) { //判断视频源是否是m3u8的格式
myVideo.src({
src: vdoSrc,
type: 'application/x-mpegURL' //在重新添加视频源的时候需要给新的type的值
})
} else {
myVideo.src(vdoSrc)
}
myVideo.load();
myVideo.play();
}
var src = 'https://live-krs.oss-cn-beijing.aliyuncs.com/index.m3u8';
document.querySelector('.qiehuan').addEventListener('click', function () {
changeVideo(src);
document.getElementById("liveUrl").innerHTML=src;
// document.getElementById("liveUrl").innerHTML="";
})
</script>
{{ cmt.username }}
{{ cmt.content }}
{{ cmt.commentDate | formatDate('YYYY.MM.DD hh:mm') }}