文档首页/ 视频直播 Live/ 低时延客户端SDK参考/ Web SDK/ 最佳实践/ 降级处理
更新时间：2024-10-30 GMT+08:00
查看PDF
分享

降级处理

降级场景

降级说明

使用LLL SDK进行直播拉流时，可能会遇到播放失败等问题，可以考虑使用其他协议播放。

触发条件

  • 浏览器环境不支持webrtc特性，可以通过checkSystemRequirements接口来判断。
  • 服务端请求、建链均失败。
  • 媒体起播播放超时，且解码帧数为0时，会进入降级流程。
  • 未开启断流重试时，播放过程中出现断流，也会进入降级流程。

降级方式

包含下述2种降级方式：

如果指定降级和自动降级都设置了，仅指定降级会生效。

示例代码如下所示：

const client = HWLLSPlayer.createClient()

client.startPlay(url, {
    ...
    hlsUrl: // 填写hls的播放地址
    flvUrl: // 填写flv的播放地址
    autoDowngrade: true, // true表示启用自动降级播放，false表示不启用自动降级播放
    ...
})
  • 指定降级

    设置HWLLSClient中的startPlay接口，指定options里面参数downgradeUrl的flv或hls地址，即可实现异常时的降级播放。

    如果hlsUrl和flvUrl播放地址只选填一个，会降级至指定地址；如果两个播放地址都填，则降级后的播放顺序为先HLS后FLV。

    const client = HWLLSPlayer.createClient()

client.startPlay(url, {
    ...
    downgradeUrl: {
        hlsUrl: // 填写hls的播放地址
        flvUrl: // 填写flv的播放地址
    }
    ...
})
  • 自动降级

    设置HWLLSClient中的startPlay接口，指定options里面参数autoDowngrade的值为true，即可实现接口异常时的自动降级播放。

    const client = HWLLSPlayer.createClient()

client.startPlay(url, {
    ...
    autoDowngrade: true, // true表示启用自动降级播放，false表示不启用自动降级播放
    ...
})

降级回调

降级播放后，会有回调事件。

const client = HWLLSPlayer.createClient()

client.on('player-changed', (mediaFormat) => {
    // mediaFormat: hls、flv
})

代码示例

请知，LLL SDK需解压至sdk/目录。

2种降级方式的示例代码，如下所示：

  • 指定降级 
    <!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>
父主题： 最佳实践

相关文档