通过SRS
配置的服务器,使用的ffmpeg
进行的推流,使用flv.js
进行的播放。
之所以如此,是因为 推流端使用的NodeJS + Electron + Vue
搭建的客户端,期中对flash
的支持不是很好,所以rtmp的流遇到各种问题。
另外,现在大部分浏览器开始禁用flash
所以开始使用http-flv
的推流实现方式.
Promise.resolve(
//视频推送的命令
[
"-rtbufsize",
"30412800",
"-r", //帧率
"30",
"-f",
"dshow", //dshow 录屏
"-s",
"640x480", // 分辨率 低的流程但模糊,高的卡顿但清晰,这个需要调节
"-i",
originPath, // 输入流:这里是通过H5, navigator.mediaDevices.enumerateDevices() 获取的设备信息,后面要改
"-vcodec",
"libx264",
"-max_delay",
"100",
"-codec:a",
"aac",
"-preset:v",
"ultrafast",
"-tune:v",
"zerolatency",
"-vf",
"boxblur=1.5:1",
"-f",
"flv",
"-g",
"5",
"-b",
"700000",
"-audio_buffer_size",
"30",
]
).then(it => {
//结果处理
});
rtbufsize
的设置是因为电脑配置不高,然后ffmpeg的默认缓冲区域不够用。if (flvjs.isSupported()) {
_this.videoLive = flvjs.createPlayer({
type: 'flv',
isLive: true,
url: curPlayUrl,
duration: 0,
}, {
enableStashBuffer: false,
isLive: true,
lazyLoad: false,
lazyLoadMaxDuration: 0,
lazyLoadRecoverDuration: 0,
deferLoadAfterSourceOpen: false,
fixAudioTimestampGap: false,
}
);
_this.videoLive.attachMediaElement(_this.$refs.videoRef);
_this.videoLive.load(); //加载
_this.videoLive.play();
//避免时间长时间积累缓冲导致延迟越来越高
setInterval(() => {
if (!_this.videoLive.buffered.length) {
return;
}
let end = _this.videoLive.buffered.end(0);
let diff = end - _this.videoLive.currentTime;
if (diff >= 1.5) {
_this.videoLive.currentTime = end - 0.1;
}
}, 3 * 10 * 1000);
}
flv.js 正常的使用会很卡,以及长时间累积会导致延迟越来越高。其中和推流配置和vedio的缓冲都有原因。目前这个配置是试了后感觉好使点的。
listen 1935;
max_connections 1000;
srs_log_tank file;
srs_log_file ./objs/srs.log;
http_api {
enabled on;
listen 1985;
}
http_server {
enabled on;
listen 80;
dir ./objs/nginx/html;
}
stats {
network 0;
disk sda sdb xvda xvdb;
}
vhost __defaultVhost__ {
#最小延迟打开,默认是打开的,该选项打开的时候,mr默认关闭。
min_latency on;
#Merged-Read,针对RTMP协议,为了提高性能,SRS对于上行的read使用merged-read,即SRS在读写时一次读取N毫秒的数据
mr {
enabled off;
#默认350ms,范围[300-2000]
#latency 350;
}
#Merged-Write,SRS永远使用Merged-Write,即一次发送N毫秒的包给客户端。这个算法可以将RTMP下行的效率提升5倍左右,范围[350-1800]
mw_latency 100;
#enabled on;
#https://github.com/simple-rtmp-server/srs/wiki/v2_CN_LowLatency#gop-cache
gop_cache off;
#配置直播队列的长度,服务器会将数据放在直播队列中,如果超过这个长度就清空到最后一个I帧
#https://github.com/simple-rtmp-server/srs/wiki/v2_CN_LowLatency#%E7%B4%AF%E7%A7%AF%E5%BB%B6%E8%BF%9F
queue_length 10;
#http_flv配置
http_remux {
enabled on;
mount [vhost]/[app]/[stream].flv;
hstrs on;
}
}
注意文件的编码格式。要不然运行不起来srs。