首页 > Web开发 > 详细

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

时间:2019-05-12 15:58:34      阅读:265      评论:0      收藏:0      [点我收藏+]

思路(如图):

技术分享图片

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 直播系统搭建

原文:https://www.cnblogs.com/xcsg/p/10852383.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!