1. 程式人生 > >Nginx-rtmp+ FFmpeg +Dodker + vue.js 直播系統搭建

Nginx-rtmp+ FFmpeg +Dodker + vue.js 直播系統搭建

進入 doc tex fas rtmp服務器 服務器搭建 display controls export

思路(如圖):

技術分享圖片

1,開啟推流服務器(這裏我的Nginx-rtmp服務器搭建成功)

進入docker 開啟推流服務器 docker run -it -p 1935:1935 -p 8000:80 --rm alfg/nginx-rtmp

技術分享圖片

2,推流(兩種方法)

命令推流:

#推流視頻文件
ffmpeg -threads 2 -re -fflags +genpts -stream_loop -1 -i test.mp4 -c copy -f flv rtmp://192.168.99.100:1935/stream/test
播放地址http://192.168.99.100:8000/live/test.m3u8

#將攝像頭推流到hls ffmpeg -f vfwcap -i "0" -c:v libx264 -preset ultrafast -acodec libmp3lame -ar 44100 -ac 1 -f flv rtmp://localhost:1935/hls/home 播放地址http://localhost:8080/hls/home.m3u8 #將屏幕推流到rtmp start ffmpeg -f gdigrab -i desktop -vcodec libx264 -preset ultrafast -acodec libmp3lame -ar 44100 -ac 1 -f flv 播放地址rtmp:
//localhost:1935/live/jing

使用第三方軟件推流:(例如:OBS Studio)

3,拉流

這裏前端使用的是通過VUE

<video id="my-video" class="video-js vjs-default-skin" controls preload="auto" >
                                        <source src="http://192.168.99.100:8000/live/test.m3u8" type="application/x-mpegURL">
                                </
video> <script> //vue 的video插件 import videojs from video.js import videojs-contrib-hls export default { mounted:function(){ //自動執行直播平臺 videojs(my-video, { bigPlayButton: false, textTrackDisplay: false, posterImage: true, errorDisplay: false, controlBar: true }, function () { this.play() }) } } } </script>

效果如下:

技術分享圖片

Nginx-rtmp+ FFmpeg +Dodker + vue.js 直播系統搭建