Windows10環境下 Nginx+ffmpeg 製作本地伺服器HLS直播流
繼上次製作了RTMP直播源之後，因為網際網路更常用的是HLS源和HTTP-FLV，所以這次又製作了HLS源
所需條件：
安裝過程請看：https://blog.csdn.net/qq_40816360/article/details/83999836
-
nginx-rtmp-module（帶rtmp模組） ，連結：https://link.jianshu.com/?t=http%3A%2F%2Fnginx-win.ecsds.eu%2Fdownload%2Fnginx%201.7.11.3%20Gryphon.zip
-
ffmpeg，連結：https://pan.baidu.com/s/1XItEYzDjpGrkAUinBwQTUw
提取碼：o0fg -
VLC播放器，https://www.videolan.org/
遇到的困難
而這次遇到比較麻煩的問題是，根據上次的nginx.conf配置，添加了application hls並推流之後，雖然可以生成M3U8檔案和相關的ts檔案，但是卻無法用http://localhost:8765/hls/movie.m3u8形式進行VLC的觀看，但是用rtmp://localhost:1935/hls/movie進行觀看，實在是非常不懂，一直覺得是配置的問題，但是就是無法找出什麼地方不行，後來直接更換nginx的nginx.conf配置
#user nobody; worker_processes 1; #error_log logs/error.log; #error_log logs/error.log notice; #error_log logs/error.log info; #pid logs/nginx.pid; events { worker_connections 1024; } rtmp{ server { listen 1935; chunk_size 4000; #RTMP application myapp { live on; } #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 hls; hls_fragment 5s; } } } http{ server { listen 8765; server_name localhost; location / { root html; index index.html index.htm; } location /hls { # Serve HLS fragments types { application/vnd.apple.mpegurl m3u8; video/mp2t ts; } alias hls; expires -1; add_header Access-Control-Allow-Origin *; } error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } } }
這個配置可以進行推rtmp流，也可以推hls的流
解釋：
- 在rtmp模組中，增加了hls的application，hls_path表示的是推流生成的m3u8和ts檔案的存放路徑，例如：我的資料夾是D:/nginx/hls ，這個hls資料夾是我自定義的，D:/nginx是nginx的根目錄。
- 在http中，增加一個訪問地址，location hls ，裡面的alias hls，就代表了在訪問localhost:8765/hls（location）的時候，他會指向hls（alias）的資料夾，可以看location /的地址，它的root是html，表明你輸入localhost:8765的時候他就進入Html資料夾，你就可以看到那個nginx啟動成功頁面
推rtmp流：
ffmpeg -re -i test.mp4 -vcodec libx264 -acodec aac -strict -2 -f flv rtmp://localhost:1935/myapp/pc
引數在rtmp博文中已有介紹
驗證rtmp流推送情況：
vlc播放器輸入：rtmp://localhost:1935/myapp/pc
推HLS流：
ffmpeg -loglevel verbose -re -i test.mp4 -vcodec libx264 -vprofile baseline -acodec libmp3lame -ar 44100 -ac 1 -f flv rtmp://localhost:1935/hls/movie
驗證HLS流推送情況：
vlc播放器輸入：http://localhost:8765/hls/movie.m3u8 或者Safari瀏覽器開啟此地址
解釋：
1、http://localhost:8765/hls 會指向nginx/hls資料夾
2、movie.m3u8 是動態更新的m3u8檔案
開啟nginx目錄下的hls資料夾，你可以看到m3u8和ts檔案一直在不斷更新
注意：跨域問題
在nginx.conf中要配置跨域，add_header Access-Control-Allow-Origin *;
這樣就不會在video.js或其他播放器下無法訪問
使用video.js播放hls直播源
注意：如果直接開啟頁面不行，就嘗試下放下伺服器環境下開啟
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>video.js</title>
<link href="https://unpkg.com/[email protected]/dist/video-js.min.css" rel="stylesheet">
<script src="https://unpkg.com/[email protected]/dist/video.min.js"></script>
<script src="https://unpkg.com/videojs-flash/dist/videojs-flash.js"></script>
<script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script>
</head>
<body>
<video id="my-player" class="video-js" controls>
<source src="http://localhost:8765/hls/movie.m3u8" type="application/x-mpegURL">
<p class="vjs-no-js">
not support
</p>
</video>
<script type="text/javascript">
var player = videojs('my-player',{
width:400,
heigh:200
});
</script>
</body>
</html>