文档首页> 视频直播 Live> 低时延客户端SDK参考> Web SDK> SDK使用
更新时间：2024-02-27 GMT+08:00
查看PDF
分享

SDK使用

  1. 检测浏览器是否兼容SDK。具体接口详情请参见checkSystemRequirements。

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
    		 
    async isBrowserSupport() {
   let check = false
   try {
      check = await HWLLSPlayer.checkSystemRequirements()
      console.warn('browser isSupport: ' + check)
   } catch (error) {
      console.error(`check browser isSupport error: ${error.getCode()} - ${error.getMsg()}`)
      if (error.getCode && error.getCode() === 50000006) {
         let commonClient = HWLLSPlayer.createClient("flv") // "hls"
         await commonClient.startPlay(url,options)
      }
   }
   return check
}

  2. 创建客户端。具体接口详情请参见createClient。

    1
    		 
    let client = HWLLSPlayer.createClient("webrtc")

  3. 注册事件监听，如播放成功后，客户端会收到video-start和audio-start事件通知，如播放失败，客户端会收到Error事件通知，可根据错误进行业务降级处理。

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
    		 
    client.on('video-start', () => {
   console.log('video-start')
})

client.on('audio-start', () => {
   console.log('audio-start')
})

client.on('Error', (error) => {
   if (error.errCode === 50000007 || error.errCode === 50000022) {
      let commonClient = HWLLSPlayer.createClient("flv") // "hls"
      await commonClient.startPlay(url,options)
   }
})

  4. 开始播放。具体接口详情请参见startPlay。

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
    		 
    async startPlay() {
   try{
     await client.startPlay(url,options)
     console.log('startPlay success')
   } catch(error){
     console.log('startPlay fail',error)
     if (error.getCode && error.getCode() === 50000021) {
        let commonClient = HWLLSPlayer.createClient("flv") // "hls"
        await commonClient.startPlay(url,options)
     }
   }
}
    • url：必选，string类型，拉流地址。具体地址格式请参见startPlay详情。
    • options：可选，StartPlayOptions类型。

      StartPlayOptions定义如下：{

      • elementId：必选，播放Dom标识ID。
      • objectFit：可选，string类型，默认值为cover。支持的枚举值如下：
        • contain：优先保证视频内容全部显示。视频尺寸等比缩放，直至视频窗口的一边与视窗边框对齐。如果视频尺寸与显示视窗尺寸不一致，在保持长宽比的前提下，将视频进行缩放后填满视窗，缩放后的视频四周会有一圈黑边。
        • cover：优先保证视窗被填满。视频尺寸等比缩放，直至整个视窗被视频填满。如果视频长宽与显示窗口不同，则视频流会按照显示视窗的比例进行周边裁剪或图像拉伸后填满视窗。
        • fill：视频内容完全填充视窗。如果视频的宽高比与视窗不相匹配，那么视频将被拉伸以适应视窗。
      • muted：可选，boolean类型，true表示静音，false表示不静音。默认值为false。
      • sessionId：可选，string类型，一次完整会话的统一标识。
      • showLoading：可选，boolean类型，true表示开启loading的展示效果，默认值为false。当该参数设置为true时，起播loading效果同步开启，播放过程中发生缓冲时loading的效果，需根据setParameter接口中的LOADING_CONFIG进行设置。
      • autoPlay：可选，boolean类型，true表示开启自动起播功能，false表示非自动起播，需要人为触发播放，默认为true。
      • poster：可选，对象定义如下：{
        • url：可选，string类型。设置播放封面图片完整地址，图片格式限JPGPNG和静态GIF格式，大小不超过1MB，尺寸不超过1920 x 1080，文件名不得含有中文字符。
        • mode：可选，string类型。默认值为cover。支持的枚举值如下：{
          • fill：视频内容完全填充视窗，如果视频的宽高比与视窗不相匹配，那么视频将被拉伸以适应视窗。
          • crop：播放封面原始尺寸大小展示，如果海报超出播放区域，则会对超出部分进行裁剪，否则在播放窗口居中展示。

          }

        • startEnable：可选，boolean类型。启动播放时是否展示播放封面，true表示展示，false表示不展示播放封面，默认值false。该参数只在设置非自动播放场景下生效。
        • pauseEnable：可选，boolean类型。触发暂停操作时，是否在播放页面展示播放封面，true表示展示播放封面，false表示不展示，默认值false。

        }

      • webrtcConfig：可选，WebRTCConfig类型。指定媒体类型进行拉流的配置参数，WebRTCConfig定义如下：{
        • receiveVideo：可选，boolean类型。设置是否拉取视频进行播放，true表示拉取视频进行播放，false表示不拉取视频播放，默认值true。该属性值和receiveAudio不能同时设置为false。
        • receiveAudio：可选，boolean类型。设置是否拉取音频进行播放，true表示拉取音频进行播放，false表示不拉取音频播放，默认值true。该属性值和receiveVideo不能同时设置为false。

      }

      • schedulePolicy：可选，SchedulePolicy类型。指定接入调度策略，SchedulePolicy定义如下：{
        • DNS：可选，string类型。表示域名DNS解析接入，默认值"DNS"。
        • HTTPDNS：可选，string类型。表示使用HTTPDNS接入域名。

        }

      • domainPolicy：可选，DomainPolicy类型。指定接入域名的策略，该设置仅在schedulePolicy参数为"DNS"模式时生效，DomainPolicy定义如下：{
        • 0：可选，number类型。表示使用用户自定义域名，默认值0。
        • 1：可选，number类型。表示使用公共接入域名。

        }

  5. 停止播放。具体接口详情请参见stopPlay。

    1
2
3
4
5
6
7
8
    		 
    stopPlay() {
   try {
     client.stopPlay()
     console.log('stopPlay success')
   } catch (error) {
     console.log('stopPlay fail', error)
   }
}

  6. 销毁客户端对象。具体接口详情请参见destoryClient。

    1
    		 
    client.destoryClient()

父主题： Web SDK
分享：

    相关文档

    相关产品