Updated on 2024-08-08 GMT+08:00

SDK Usage

  1. Check whether a browser is compatible with the SDK. For details, see 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. Create a client. For details, see createClient.

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

  3. Register event listening. For example, if the playback is successful, the client receives the video-start and audio-start notifications. If the playback fails, the client receives the Error notification. The service can be downgraded according to the 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. Start the playback. For details, see 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: (mandatory) ingest URL. The value is a string. For details about the URL format, see startPlay.
    • options: (optional) Playback configuration parameter.

      The definition of StartPlayOptions is as follows: {

      • elementId: (mandatory) indicates the playback DOM ID.
      • objectFit: (optional) String type. Default value: cover. The following enumerated values are supported:
        • contain: preferentially ensures that all video content is displayed. The video is scaled proportionally until one side of the video window is aligned with the window border. If the video size is inconsistent with the display window size, when the aspect ratio is locked and the video is zoomed in or out to fill the window, a black bar is displayed around the zoomed-in or zoomed-out video.
        • cover: preferentially ensures that the window is filled. The video is scaled proportionally until the entire window is filled with video. If the video size is inconsistent with the display window size, the video stream will be cropped or the image will be stretched to fill the display window.
        • fill: The window is filled with video. If the aspect ratio of the video does not match the window, the video will be stretched to fit the window.
      • muted: (optional) Boolean type. true indicates muted; false indicates unmuted. The default value is false.
      • sessionId: (optional) String type. Indicates the unified ID of a complete session.
      • showLoading: (optional) Boolean type. Indicates whether to enable the loading display effect. true indicates that the loading display effect is enabled. The default value is false. When this parameter is set to true, the loading effect upon playback start will also be enabled. The loading effect upon buffering during playback needs to be set based on the LOADING_CONFIG in the setParameter API.
      • autoPlay: (optional) Boolean type. true indicates that the autoplay function is enabled. false indicates that the autoplay function needs to be manually triggered. The default value is true.
      • poster: (optional) The object definition is as follows: {
        • url: (optional) String type. Sets the complete address of the thumbnail image to be played. The image must be in JPG, PNG, or static GIF format, the size cannot exceed 1 MB, and the resolution cannot exceed 1920 x 1080. The file name cannot contain Chinese characters.
        • mode: (optional) String type. The default value is cover. The following enumerated values are supported: {
          • fill: The window is filled with video. If the aspect ratio of the video does not match the window, the video will be stretched to fit the window.
          • crop: original size of the thumbnail. If the poster exceeds the playback area, the excess part is cropped. Otherwise, the poster is displayed in the middle of the playback window.

          }

        • startEnable: (optional) Boolean type. Indicates whether to display the thumbnail when the playback starts. The options are true and false. The default value is false. This parameter takes effect only in non-autoplay scenarios.
        • pauseEnable: (optional) Boolean type. Indicates whether to display the thumbnail on the playback page when the video is paused. The options are true and false. The default value is false.

        }

      • webrtcConfig: (optional) WebRTCConfig type. Pulls streams of a specified media type. WebRTCConfig is defined as follows: {
        • receiveVideo: (optional) Boolean type. Pulls a video for playback. true indicates that a video is pulled for playback, and false indicates that a video is not pulled for playback. The default value is true. This parameter and receiveAudio cannot be set to false at the same time.
        • receiveAudio: (optional) Boolean type. Pulls an audio for playback. true indicates that an audio is pulled for playback, and false indicates that an audio is not pulled for playback. The default value is true. This parameter and receiveVideo cannot be set to false at the same time.

      }

      • schedulePolicy: (optional) SchedulePolicy type. Specifies the access scheduling policy. The definition of SchedulePolicy is as follows: {
        • DNS: (optional) String type. Indicates that the domain name is resolved by DNS for being accessed. The default value is DNS.
        • HTTPDNS: (optional) String type. Indicates that HTTPDNS is used for the access domain name.

        }

      • domainPolicy: (optional) DomainPolicy type. Specifies the policy of an access domain name. This setting takes effect only when schedulePolicy is set to DNS. DomainPolicy is defined as follows: {
        • 0: (optional) Number type. Indicates that the user-defined domain name is used. The default value is 0.
        • 1: (optional) Number type. Indicates that the public access domain name is used.

        }

  5. Stop the playback. For details, see 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. Destroy a client object. For details, see destoryClient.

    1
    client.destoryClient()