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

降级处理

降级场景

降级说明

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

触发条件

  • 浏览器环境不支持webrtc特性

    可以通过接口checkSystemRequirements判断是否支持

  • 服务端请求失败、建链失败
  • 媒体起播播放超时，且解码帧数为0，则会进入降级流程
  • 在未开启断流重试时，播放过程中断流，也会进入降级流程

降级方式

  1. 指定降级

    HWLLSClient中的startPlay接口，参数options指定flv或hls地址，即可完成异常时的指定降级播放

    const client = HWLLSPlayer.createClient()

client.startPlay(url, {
    ...
    downgradeUrl: {
        hlsUrl: // todo 填写hls的降级地址
        flvUrl: // todo 填写flv的降级地址
    }
    ...
})

    如果只填入一种降级地址，那么会降级至指定地址，如果两个地址都填，则降级顺序为HLS->FLV

  2. 自动降级

    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>
父主题： 最佳实践

相关文档