此方式只对安卓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>
