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