1.环境准备

Linux centos7.6 
nginx-1.18.0 源码包
wget http://nginx.org/download/nginx-1.8.1.tar.gz  
nginx-rtmp-module-master 模块包
https://github.com/arut/nginx-rtmp-module

在这里插入图片描述

1.1依赖环境安装

[root@imagesrs data]# yum install git gcc gcc-c++ openssl openssl-devel pcre pcre-devel zlib zlib-devel -y

2.源码包安装

2.1添加用户

[root@imagesrs data]# useradd -r -s /sbin/nologin nginx

2.2解压nginx-rtmp-module-master

[root@imagesrs nginx-1.18.0]# unzip nginx-rtmp-module-master.zip

2.3安装nginx

[root@imagesrs data]# tar -xvf nginx-1.18.0.tar.gz

[root@imagesrs data]# cd nginx-1.18.0/

[root@imagesrs data]# ./configure --prefix=/usr/local/nginx \
 --user=nginx \
 --group=nginx \
 --with-http_ssl_module \
 --add-module=/data/nginx-rtmp-module-master(模块源码包位置)

创建软链接
[root@Centos7 sbin]# ln -s /usr/local/nginx/sbin/nginx  /usr/sbin/
[root@Centos7 sbin]# ls /usr/sbin/nginx 

查看模块:
Nginx -V

2.4修改nginx 配置文件

[root@imagesrs conf]#cd /usr/local/nginx/conf
[root@imagesrs conf]# vim nginx.conf
user nginx;
worker_processes  1;
events {
    worker_connections  1024;
}
rtmp {
        server {
                listen 1935;   #端口号
                chunk_size 4000;
		
		
                application hls {
                        live on;
                        hls on;
                        hls_path /usr/local/nginx/html/hls;   #切片存放位置
                        hls_fragment 5s;		
						hls_playlist_length 15s;
						hls_continuous on; 
						hls_cleanup on;
						hls_nested on;
                }
          }
     }
http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
    server {
        listen       80;
        server_name  localhost;
        location / {
            root   /usr/local/nginx/html;
            index  index.html index.htm;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
	location /hls {
	    types {
		application/vnd.apple.mpegurl m3u8;
	}
	    alias /usr/local/nginx/html/hls;
	    expires -1;
	    add_header Cache-Control no-cache;
	}
	location /stat {
		rtmp_stat all;
		rtmp_stat_stylesheet stat.xsl;
	}
	location /stat.xsl {
		root /usr/local/extend_module/nginx-rtmp-module/;
	}
}
}
    

在这里插入图片描述

启动nginx 
[root@imagesrs conf]# nginx
重新加载:
[root@imagesrs conf]# nginx -s reload
检查配置文件:
[root@imagesrs conf]# nginx -t
查看端口号:
[root@imagesrs conf]#ss -ntl
端口号:1935   80

在这里插入图片描述
在这里插入图片描述
关于更多rtmp的参数可以参考:
https://github.com/arut/nginx-rtmp-module/wiki

3.直播服务器与推流、拉流操作

需要下载两个程序
拉流:VLC https://vlc-media-player.en.softonic.com/
直播推流:OBS https://obsproject.com/

在这里插入图片描述
客户端推送:

直播推流端使用rtmp协议推流,端口为1935。URL格式为:rtmp://ip:端口/hls。推流软件推荐使用开源的OBS。https://obsproject.com/
流名称要与写的观看直播的页面中的xxxx.m3u8名称一致

推流操作:
在这里插入图片描述
在这里插入图片描述点击开始推流;
浏览器输入http:/xx.xx.xx.xx/hls/111/index.m3u8就能看直播了
111目录名根据最终生成目录决定

拉流操作:
打开VLC --> 媒体 --> 打开网络串流 --> 输入rtmp/或者hls地址
/usr/local/nginx/html/hls/111目录下生成的切片文件
在这里插入图片描述

浏览器查看:
HlS 地址:http://192.168.197.133/hls/111/index.m3u8
在这里插入图片描述LVC 查看:正常
在这里插入图片描述
在这里插入图片描述
前端HTML 代码展示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>PC HLS video</title>
    <link href="http://cdn.bootcss.com/video.js/6.0.0-RC.5/alt/video-js-cdn.min.css" rel="stylesheet">
</head>
<body>

<h1>PC 端播放 HLS(<code>.m3u8</code>) 视频</h1>
<p>借助 video.js 和 videojs-contrib-hls</p>
<p>由于 videojs-contrib-hls 需要通过 XHR 来获取解析 m3u8 文件, 因此会遭遇跨域问题, 请设置浏览器运行跨域</p>

<video id="hls-video" width="300" height="200" class="video-js vjs-default-skin"
       playsinline webkit-playsinline
       autoplay controls preload="auto"
       x-webkit-airplay="true" x5-video-player-fullscreen="true" x5-video-player-typ="h5">
    <!-- 直播的视频源 -->
    <source src="http://192.168.197.133/hls/111/index.m3u8" type="application/x-mpegURL">
    <!-- 点播的视频源 -->
    <!--<source src="http://devstreaming.apple.com/videos/wwdc/2015/413eflf3lrh1tyo/413/hls_vod_mvp.m3u8" type="application/x-mpegURL">-->
</video>

<script src="http://cdn.bootcss.com/video.js/6.0.0-RC.5/video.js"></script>
<!-- PC 端浏览器不支持播放 hls 文件(m3u8), 需要 videojs-contrib-hls 来给我们解码 -->
<script src="http://cdn.bootcss.com/videojs-contrib-hls/5.3.3/videojs-contrib-hls.js"></script>
<script>
    // XMLHttpRequest cannot load http://xxx/video.m3u8. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://192.168.198.98:8000' is therefore not allowed access.
    // 由于 videojs-contrib-hls 需要通过 XHR 来获取解析 m3u8 文件, 因此会遭遇跨域问题, 请设置浏览器运行跨域
    var player = videojs('hls-video');
    player.play();
</script>
</body>

在这里插入图片描述参考网址:
https://www.cnblogs.com/woaiyunwei/p/13128917.html

GitHub 加速计划 / li / linux-dash
6
1
下载
A beautiful web dashboard for Linux
最近提交(Master分支:3 个月前 )
186a802e added ecosystem file for PM2 4 年前
5def40a3 Add host customization support for the NodeJS version 4 年前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐