centos7搭建srs2流媒体服务器,使用flvjs实现摄像头

2019-04-19  本文已影响0人  小偷阿辉
此方式只对安卓web播放有效,ios天然不支持,只能使用hls方式,此方式延时可以控制在3秒内

首先访问srs官网
https://github.com/ossrs/srs
下载srs2,

git clone https://github.com/ossrs/srs

推荐中国镜像下载

git clone https://git.oschina.net/winlinvip/srs.oschina.git

更新最新代码

cd ./srs/trunk&&git pull

编译安装

./configure --prefix=/usr/local/srs-flv&&make&&make install

稍等一会~

编辑配置文件

vi ./conf/http.flv.live.conf

写入一下配置,具体可参考官方配置说明

listen              1935;
max_connections     1000;
#daemon              off;
#srs_log_tank        console;
http_server {
    enabled         on;
    listen          8080;
    dir             ./objs/nginx/html;
}
vhost __defaultVhost__ {
#    gop_cache       off;
#    queue_length    10;
#    min_latency     on;
#    mr {
#        enabled     off;
#    }
#    mw_latency      100;
#    tcp_nodelay     on;
    http_remux {
        enabled     on;
        mount       [vhost]/[app]/[stream].flv;
        hstrs       on;
    }
}

之后启动srs for flv

./objs/srs -c ./conf/http.flv.live.conf

后台查看进程是否启动成功

ps -ef|grep srs
image.png

执行ffmpeg推流命令

命令options请参考http://www.cuplayer.com/player/PlayerCode/FFmpeg/2018/1114/3329.html

ffmpeg -re  -rtsp_transport tcp -threads 1 -buffer_size 1024000 -max_delay 500000 -i rtsp:admin:@192.168.3.22:554/stream1 -c:v libx264 -b:v 350k -profile:v baseline -level 3.0  -acodec aac  -strict experimental -ar 44100 -ac 2 -b:a 96k  -fflags nobuffer -preset  ultrafast -tune   zerolatency -vcodec h264 -f flv -an rtmp://192.168.153.128:1935/live/192168322

flv地址为访问地址为http://192.168.153.128:1935/live/192168322.flv

flv.js配置



<!DOCTYPE html>
<html>

<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <title>flv.js demo</title>
    <script th:src="@{/jquery.min.js}"></script>
    <script th:src="@{/dist/flv.js}"></script>
</head>
<body
<div style='display: block;'>
                           <video width="100%" height="100%"   x-webkit-airplay="allow" name="videoElement" id="videoElement" class=" video-js vjs-default-skin " x5-video-player-type="h5" x5-video-player-fullscreen="false"  x-webkit-airplay="allow" controls="" poster="img/poster.jpg"  x5-playsinline=""
                                 playsinline="" webkit-playsinline="" >
                                Your browser is too old which doesn't support HTML5 video.
                               </video>
                               </div>

<body>
<script>
var checkBoxFields = ['isLive', 'withCredentials', 'hasAudio', 'hasVideo'];

var mediaDataSource = {
                                type: 'flv',
                                isLive: true,
                                withCredentials : false,//一定要带上这个,否则会报跨域异常
                                hasAudio : false,
                                hasVideo : true,
                                cors : true,
                            };
$(function(){

mediaDataSource['url'] = 'http://192.168.153.128:1935/live/192168322.flv';
 console.log('MediaDataSource', mediaDataSource);
                            flv_load_mds(mediaDataSource,document.getElementsByName("videoElement")[0],i);
});
function flv_load_mds(mediaDataSource,element,i) {
        element.addEventListener('progress', function() {
            var range = 0;
            var bf = this.buffered;
            var time = this.currentTime;

            while(!(bf.start(range) <= time && time <= bf.end(range))) {
                range += 1;
            }
            this.currentTime = this.buffered.end(range) - 0.01;
        });
        if (typeof players['flvPlayer'+i] !== "undefined") {
            console.log("undefined");
            if (players['flvPlayer'+i] != null) {
                players['flvPlayer'+i].unload();
                players['flvPlayer'+i].detachMediaElement();
                players['flvPlayer'+i].destroy();
                player = null;
            }
        }
        players['flvPlayer'+i] = flvjs.createPlayer(mediaDataSource, {
            enableWorker: false,
            controls:true,
            //lazyLoadMaxDuration: 3 * 60,
            autoplay:false,
            seekType: 'range',
            enableStashBuffer: false,
            stashInitialSize: 128,//减少首桢显示等待时长
        });
        players['flvPlayer'+i].attachMediaElement(element);
        players['flvPlayer'+i].load();
        console.log("加载");
        // players['flvPlayer'+i].on(flvjs.Events.LOADING_COMPLETE,function () {
        //     alert("error comming");
        //     //players['flvPlayer'+i].pause();
        // });
        //debugger;
         players['flvPlayer'+i].play();

}

</script>
</html>
上一篇下一篇

猜你喜欢

热点阅读