小型直播系统系列-乐聊TV的开发（二）

程序员文章站 2022-06-01 23:34:30

...

小型直播系统系列-乐聊TV的开发（二）

上一节我们讲到系统概括，这一节我们详细讲解一下nginx的使用：

nginx-rtmp-module的使用

1.软件编译
从下面的网址分别下载nginx和nginx-rtmp-module：
http://nginx.org/en/download.html
https://github.com/arut/nginx-rtmp-module
然后解压 -zxvf
2.进入nginx的源码目录下面
./configure –add-module=/path/to/nginx-rtmp-module –with-http_ssl_module –with-debug
来增加这个模块，然后
make
make install
3.在原有的nginx.conf中加入如下配置

rtmp {  

    server {  

        listen 1935;  

        chunk_size 4000;  

        #HLS  

        # For HLS to work please create a directory in tmpfs (/tmp/app here)  
        # for the fragments. The directory contents is served via HTTP (see  
        # http{} section in config)  
        #  
        # Incoming stream must be in H264/AAC. For iPhones use baseline H264  
        # profile (see ffmpeg example).  
        # This example creates RTMP stream from movie ready for HLS:  
        #  
        # ffmpeg -loglevel verbose -re -i movie.avi  -vcodec libx264   
        #    -vprofile baseline -acodec libmp3lame -ar 44100 -ac 1   
        #    -f flv rtmp://localhost:1935/hls/movie  
        #  
        # If you need to transcode live stream use 'exec' feature.  
        #  
        application hls {  
            live on;  
            hls on;  
            hls_path /usr/local/nginx/html/hls;  
            hls_fragment 5s;  
        }  
    }  
}  

http {  

    server {  

        listen  8080;  
        location /hls {  
            # Serve HLS fragments  
            types {  
                application/vnd.apple.mpegurl m3u8;  
                video/mp2t ts;  
            }  
            root html;  
            expires -1;  
        }  
    }  
}

其中rtmp部分与原有的http部分在同一个级别，但是下面的http部分要放到已有的http部分中，也就是增加一个server部分。
然后运行如下命令检查nginx.conf是否有语法错误
service nginx configtest
重新加载配置文件
service nginx reload
运行下面的命令查看nginx状态
service nginx status
然后查看端口
netstat -nlp

前端播放m3u8视频

当我们成功安装好了rtmp模块之后，就可以用作为直播服务器，那么直播的来源哪里来呢？这里用到一个推流播放器 obs。

obs的使用

http://soft.qazwaxs.com/OBS到这里现在下载obs，然后进行设置，步骤如下图

步骤一：

小型直播系统系列-乐聊TV的开发（二）

——————————

步骤二

小型直播系统系列-乐聊TV的开发（二）

步骤三

现在你已经成功的推流成功，cd到你设置的目录下面，就可以看到后缀是.m3u8的视频了,下面开始拉流，介绍的是前端拉流用到的框架结构 vue-video-player + videojs-contrib-hls。如果你迫不及待，现在就可以用页面进行观看一波

<!DOCTYPE html>  
<html>  
<head>  
    <meta http-equiv="content-type" content="text/html; charset=utf-8">  
    <title>HLS Player</title>  
</head>  
<body>  
<video poster="poster.png" height="720" width="1280" controls>  
    <source src="http://192.168.90.26:8080/hls/mystream.m3u8" type="application/vnd.apple.mpegurl" />  
    <p class="warning">Your browser does not support HTML5 video.</p>  
</video>  
</body>  
</html>

但是很遗憾，只有苹果手机的Safari浏览器支持，安卓手机的没测试。

vue-video-player + videojs-contrib-hls

前端拉流采用的是 vue-video-player + videojs-contrib-hls，github地址是https://github.com/videojs/videojs-contrib-hls，video.js是一个开源的视频播放器，开始我使用的是一个cdplayer，同样支持m3u8的播放，这里可能有人有疑问，为什么不用h5直接播放呢？
因为苹果手机天生支持m3u8格式的播放，但是pc很遗憾并不支持，所以需要我们自己编写播放规则
可以百度一下 vue-video-player + videojs-contrib-hls的使用
很重要的一点，需要解决视频跨域问题。也就是视频播放路径和我们的项目在同一域名端口下。

相关标签： nginx 直播 springboot-聊天室

上一篇：算法篇：滑动窗口(一)

下一篇：小型酒店管理系统