當前位置：首頁 >

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

發布時間：2023/12/14 36 豆豆

生活随笔收集整理的這篇文章主要介紹了小型直播系统系列-乐聊TV的开发（二）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

小型直播系統系列-樂聊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，然后進行設置，步驟如下圖

步驟一：

——————————

步驟二

步驟三

現在你已經成功的推流成功，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的使用
很重要的一點，需要解決視頻跨域問題。也就是視頻播放路徑和我們的項目在同一域名端口下。

總結

以上是生活随笔為你收集整理的小型直播系统系列-乐聊TV的开发（二）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Json-server简单实现mock数
下一篇：小红帽中用eclipse编译window