FAQs

The SDK can be integrated with some browsers such as Chrome but integration is not recommended. The browser compatibility is identified based on the WebRTC object exposed by the browser. When a non-HTTPS protocol is used, the object may not exist.

Before using the Firefox browser, you need to install the H.264 codec plug-in. Enter about:addons in the address box of the browser. The plug-in installation page is displayed. Check whether the H.264 plug-in has been installed. If not, install it on the page.

• Check whether the user-defined domain names have been configured, such as ingest and streaming domain names, and check whether the HTTPS certificate is valid.
• Check whether the stream push end and stream is normal.
• Check whether the streaming URL is correct, for example, appName and streamName.
• Check whether the network connection is normal and whether the network firewall configuration is restricted. For example, check whether UDP ports 8000 to 8063 are bypassed.

For details about supported browsers, see Browser Adaptation.

Check whether the stream push encoding parameter of the stream push device is H.264+ without B-frames. Currently, the Huawei Cloud LLL web SDK supports only H.264+ streams without B-frames. As a result, if the original stream is H.265 or contains B-frames, you need to configure the corresponding transcoding template on the tenant console in advance and enable the transcoding service. However, this will introduce extra transcoding delay and fees. You are advised to push H.264+ streams without B-frames. You can adjust the video encoding parameters of the streaming software (such as OBS) to remove B-frames. If OBS is used to push streams, you can disable B-frames, as shown in the following figure.

Due to the restrictions of the browser's automatic playback security policy, this error code is returned when the browser directly starts the app and playback starts. According to this error code, you need to manually trigger the UI control on the page at the application layer and call the replay API to resume playback.

If the authentication policy is not enabled, service functions still work, and dotting and log upload are not affected.

Enabling the authentication policy maintains the security of dotting data and uploaded logs.

If the authentication policy is required, submit a service ticket to contact technical support and obtain the app ID and token.

Call startPlay to start pulling streams. The field elementId in options is mandatory.

• elementId: container ID, which specifies the container for adapted video playback. Generally, the ID of the div tag is used.

Other fields are optional:

• objectFit: rendering mode, which can be set to contain, cover, and fill
• muted: whether to mute the playback

Audio autoplay blocking can occur when audio is played without any interaction on the GUI. You can obtain related information by listening to Error events. For details, see Best Practices.

client.on('Error', (error) => {
    if (error.errCode === 51000000) {
        // When audio autoplay blocking occurs, perform interactive operations and call the replay API.
    }
})

You can use loading to load animation when the playback starts, video freezes, or network quality is poor. Methods:

HWLLSPlayer.setParameter('LOADING_CONFIG', {
    netQualityLoading: true, // Display loading based on the network quality.
    netQualityLoadingThreshold: 5, // Display the loading threshold. The default value is 5.
    frameStuckLoading: true, // Display loading based on the freeze frame duration.
    frameStuckThreshold: 10, // Freeze frame duration threshold. The unit is 100 ms. The value 10 indicates 1,000 ms.
})

The thumbnail settings are in the parameters of the startPlay API. Method:

const options = {
    ...
    poster: {
        url: // Poster URL
        mode: crop, // Poster filling mode, which can be set to fill or crop.
        startEnable: true, // Whether to display the thumbnail when the playback starts. This parameter takes effect only when the playback does not start automatically.
        pauseEnable: true, // Whether to display the thumbnail when the playback is paused.
    }
    ...
}

client.startPlay(streamUrl, options)

See media-statistic.

Enable the stream statistics function:

client.streamStatistic(true, 1)

Obtain the statistics through the listening event callback:

client.on('media-statistic', (statisticInfo) => {
    const audioStatisticInfo = statisticInfo.audio
    const videoStatisticInfo = statisticInfo.video
})

When there is a black screen, check whether the stream push works, including:

• Whether the video encoding format is H.264.
• Whether the video contains B-frames.
• Whether only audio is pushed.

If the stream push works, you can use FLV to pull streams to check the video. If the video can be played, submit a service ticket.

If a black screen occurs during the playback, perform the following operations:

• Check the audio. If the audio can be played, check the stream push device.
• If both the audio and video can be played, the stream interruption may be caused by a network issue. When the networking is restored, you can call the API for starting playback again or retry stream pull upon stream interruption.

This function allows automatically retrying stream pull upon stream interruption to improve user experience.

Method for enabling the function:

client.enableStreamStateDetection(
    true, // Switch of stream check.
    3, // Check interval, in second.
    {
        enable: true, // Switch of retry.
        retryInterval: 30, // Retry interval, in second.
        retryTimes: 30, // Retry times
    }
)

The browsers of some devices may not support WebRTC stream pull. In this case, you can use the downgrade policy.

Check whether the Client is a single instance. When calling the Client method, you should use the correct Client. If a development framework such as Vue is used, you are advised not to set the Client instance to responsive data.

Playing UHD livestreams (higher than 4K and 8 Mbit/s) on some low-performance mobile phones (such as the Android 9 P20) may cause a black screen.

There are two downgrade methods: automatic downgrade and specified downgrade. For details, see Best Practices.

• Automatic downgrade: default method of the SDK. When WebRTC stream pull is not supported, the streaming URL is automatically converted to an FLV or HLS URL.
• Specified downgrade: Specify the URL used after downgrade in the parameters of the startPlay API.

  const options = {
      ...
      downgradeUrl: {
          hlsUrl: // HLS URL.
          flvUrl: // FLV URL.
      }
      ...
  }
  
  client.startPlay(streamUrl, options)

Symptom: The browser may hijack the video player on the web page and add some UIs. As a result, the display does not meet the expectation. For example, the customized UI cannot be displayed due to hijacking and creation of a new playback layer, the object-fit setting does not take effect, or an ad is played when the playback is paused.

Solution: Use the configuration solution provided by the browser vendor.

Cause: When the video is not automatically played, the browser determines the image to be displayed after the initialization is complete. The image may not be displayed or the image display is below expectations.

Solution: Configure a poster and specify the thumbnail image displayed when the playback is not automatically played. For details, see the poster parameter in startPlay.