srs+ffmpeg+flv.js查看实时监控

曾经终败给现在 2022-11-12 13:56 218阅读 0赞

##### 一、Linux中搭建srs服务器 #####

1、在Linux中下载srs

git clone https://github.com/ossrs/srs
    #下载很慢可以使用下面的地址
    git clone https://gitee.com/winlinvip/srs.oschina

2、编译srs

#进入trunk目录
    cd srs/trunk
    
    #编译
    ./configure && make

3、创建自己的flv配置文件，可以从官方给的去复制修改

#将官方的配置文件复制为自己的
    cp http.flv.live.config my.http.flv.live.config
    
    vim my.http.flv.live.config
    
    #文件内容：
    listen              1935;
    max_connections     1000;
    daemon              off;
    srs_log_tank        console;
    http_server {
        enabled         on;
        listen          80;
        dir             ./objs/nginx/html;
    }
    vhost __defaultVhost__ {
        http_remux {
            enabled     on;
            mount       [vhost]/[app]/[stream].flv;
            hstrs       on;
        }
    
        dvr {
            enabled                 on;
            dvr_path                ./objs/nginx/html/[app]/[stream].flv;
            dvr_plan                session;
            dvr_duration            30;
            dvr_wait_keyframe       on;
            time_jitter             full;
        }
    	
    	#降低延迟
    	gop_cache                   off;
        queue_length                10;
        min_latency                 on;
        mr {
            enabled                 off;
        }
        mw_latency                  100;
        tcp_nodelay                 on;
    }

4、启动srs

#返回trunk目录
    cd ../
    ./objs/srs -c conf/my.http.flv.live.conf

##### 二、使用ffmpeg搭建本地推流环境 #####

1、下载ffmpeg：[官方地址][Link 1]  
2、将bin目录加入到环境变量的系统变量\[Path\]中  
3、cmd窗口输入ffmpeg，有以下内容表示搭建成功  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25vdjR0aA_size_16_color_FFFFFF_t_70]

##### 三、页面显示摄像头的实时画面 #####

1、使用ffmpeg向srs推流，这里使用的是海康的rtsp转rtmp和flv

ffmpeg -rtsp_transport tcp -i "rtsp://admin:12345@192.168.1.65:554/h264/ch1/main/av_stream" -vcodec copy -acodec copy -an -f flv "rtmp://192.168.1.152/live/video"

2、html页面，[flv.js下载][flv.js]，没有积分可以淘宝几毛钱买一次下载机会

<video id="video1" class="myVideo" controls autoplay autobuffer muted preload="auto" ></video>
    
    <script type="text/javascript" src="./js/video/flv.js"></script>
    <script>
    	var videoElement = document.getElementById('video1');
    	var flvPlayer = flvjs.createPlayer({
    		type: 'flv',
    		url: str
    	},{
    		enableWorker: false,
    		enableStashBuffer: false,
    		stashInitialSize: 1,
    		lazyLoad: false,
    		lazyLoadMaxDuration: 1,
    		lazyLoadRecoverDuration: 1,
    		deferLoadAfterSourceOpen: false,
    		autoCleanupMaxBackwardDuration: 1,
    		autoCleanupMinBackwardDuration: 1,
    		statisticsInfoReportInterval: 1,
    		fixAudioTimestampGap: false
    	});
    	flvPlayer.attachMediaElement(videoElement);
    	flvPlayer.load();
    	flvPlayer.play();
    		
    	#降低延迟	
    	document.getElementById("video1").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.4;	//值越小延迟越小，但是经常会有一个转圈的动作
        });
    </script>

[Link 1]: https://ffmpeg.org/download.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25vdjR0aA_size_16_color_FFFFFF_t_70]: /images/20221022/96d63a12ea8b4935b9255001768f3b5d.png
[flv.js]: https://download.csdn.net/download/nov4th/16075950