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

一、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：官方地址
2、将bin目录加入到环境变量的系统变量[Path]中
3、cmd窗口输入ffmpeg，有以下内容表示搭建成功

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

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下载

<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>