背景
近日项目中需要做些录播和直播类的功能,需要用到播放flv视频的组件,找到了B站的开源组件flv.js
本文章不涉及到flv.js具体使用方法,flv.js具体使用参见B站github地址
只将将使用中遇到的问题总结一下,共参考
- flv录制后,快进问题
- flv回放时,跨域问题
flv快进问题
flv.js在快进时,视频会卡住不动,原因有两个:
- 服务端没配好
OPTIONS
请求,在nginx的配置文件中添加:
server {
......
location / {
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
#
# Custom headers and headers various browsers *should* be OK with but aren't
#
add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
#
# Tell client that this pre-flight info is valid for 20 days
#
add_header 'Access-Control-Max-Age' 1728000;
add_header 'Content-Type' 'text/plain; charset=utf-8';
add_header 'Content-Length' 0;
return 204;
}
if ($request_method = 'POST') {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
}
if ($request_method = 'GET') {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
}
root /usr/share/nginx/html;
index index.html index.htm;
}
......
}
- flv没有元数据信息,需要使用工具yamdi注入信息
关于yamdi参见yamdi官方文档
使用yamdi注入元数据信息命令如下:
yamdi -i src.flv -o src_meta.flv
这样操作后,flv在快进时就不卡顿了
flv在直播过程中声音弱化问题
实际使用中发现,fixAudioTimestampGap
会对声音做处理
官网是这么描述的: Fill silent audio frames to avoid a/v unsync when detect large audio timestamp gap. 主要处理声音与视频不同步的问题。默认值为:true。在网路允许的情况下,可以改为false。
flvPlayer = flvjs.createPlayer({
type: type,
url: url,
hasAudio: true,
hasVideo: true,
isLive: false,
withCredentials: false,
cors: true,
}, {
enableWorker: true,
lazyLoadMaxDuration: 3 * 60,
seekType: 'range',
fixAudioTimestampGap: false, //主要是这个配置,直播时音频的码率会被降低,直播游戏时背景音会有回响,但是说话声音没问题
});