降级处理
降级场景
降级说明
使用3L SDK进行直播拉流时,可能会遇到播放失败等问题,此时可以考虑使用其他协议进行播放
触发条件
- 浏览器环境不支持webrtc特性
可以通过接口checkSystemRequirements判断是否支持
- 服务端请求失败、建链失败
- 媒体起播播放超时,且解码帧数为0,则会进入降级流程
- 在未开启断流重试时,播放过程中断流,也会进入降级流程
降级方式
- 指定降级
HWLLSClient中的startPlay接口,参数options指定flv或hls地址,即可完成异常时的指定降级播放
const client = HWLLSPlayer.createClient() client.startPlay(url, { ... downgradeUrl: { hlsUrl: // todo 填写hls的降级地址 flvUrl: // todo 填写flv的降级地址 } ... })
如果只填入一种降级地址,那么会降级至指定地址,如果两个地址都填,则降级顺序为HLS->FLV
- 自动降级
HWLLSClient中的startPlay接口,参数options指定autoDowngrade为true,即可完成接口异常时的自动降级播放
const client = HWLLSPlayer.createClient() client.startPlay(url, { ... autoDowngrade: true, // true表示启用自动降级播放,false表示不启用自动降级播放 ... })
如果同时启用指定降级和自动降级,那么只会使用指定降级
const client = HWLLSPlayer.createClient() client.startPlay(url, { ... hlsUrl: // todo 填写hls的降级地址 flvUrl: // todo 填写flv的降级地址 autoDowngrade: true, // true表示启用自动降级播放,false表示不启用自动降级播放 ... })
降级回调
降级播放后,会有回调事件
const client = HWLLSPlayer.createClient() client.on('player-changed', (mediaFormat) => { // mediaFormat: hls、flv })
代码示例
3L SDK需解压至sdk/目录
- 指定降级
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Downgrade Demo</title> <script src="sdk/HWLLSPlayer.js"></script> </head> <body> <div id="preview" style="width: 1280px; height: 720px; position:relative;"></div> <button id="btnStartPlay">start play</button> <button id="btnStopPlay">stop play</button> <script> const btnStartPlay = document.getElementById('btnStartPlay') const btnStopPlay = document.getElementById('btnStopPlay') const streamUrl = 'your stream url' const flvUrl = 'your flv url' const client = HWLLSPlayer.createClient() bindEvent(client) btnStartPlay.addEventListener('click', () => { startPlay(client, streamUrl, 'preview', { flvUrl: flvUrl }) }) btnStopPlay.addEventListener('click', () => { stopPlay(client) }) function bindEvent(client) { client.on('Error', (error) => { console.log(`error: ${JSON.stringify(error)}`) }) client.on('player-changed', (mediaFormat) => { console.log(`player changed:${mediaFormat}`) }) } function startPlay(client, url, elementId, downgradeUrl) { client.startPlay(url, { elementId: elementId, downgradeUrl: downgradeUrl, }) } function stopPlay(client) { client.stopPlay() } </script> </body> </html>
- 自动降级
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Downgrade Demo</title> <script src="sdk/HWLLSPlayer.js"></script> </head> <body> <div id="preview" style="width: 1280px; height: 720px; position:relative;"></div> <button id="btnStartPlay">start play</button> <button id="btnStopPlay">stop play</button> <script> const btnStartPlay = document.getElementById('btnStartPlay') const btnStopPlay = document.getElementById('btnStopPlay') const streamUrl = 'your stream url' const client = HWLLSPlayer.createClient() bindEvent(client) btnStartPlay.addEventListener('click', () => { startPlay(client, streamUrl, 'preview', true) }) btnStopPlay.addEventListener('click', () => { stopPlay(client) }) function bindEvent(client) { client.on('Error', (error) => { console.log(`error: ${JSON.stringify(error)}`) }) client.on('player-changed', (mediaFormat) => { console.log(`player changed:${mediaFormat}`) }) } function startPlay(client, url, elementId, autoDowngrade) { client.startPlay(url, { elementId: elementId, autoDowngrade: autoDowngrade, }) } function stopPlay(client) { client.stopPlay() } </script> </body> </html>