Tutorial: Suggested Solutions for Autoplay Restrictions

Suggested Solutions for Autoplay Restrictions

Introduction

In order to prevent the automatic playback of audio and video on the web page from causing interference to users, the browser has imposed restrictions on the autoplay of audio and video: Before the user interacts with the web page (such as clicking, touching the page, etc.), the web page will be prohibited from playing media with sound.

Affected by the above browser autoplay policy, when using TRTC Web SDK, if you call Stream.play to play audio and video before the user interacts with the page, the problem of silent playback may occur.

This document describes how to solve the problem of playback failure due to the restriction of autoplay policy.

Solution one: Use the autoplay dialog provided by SDK

Since v4.11.9, SDK will show a Dialog to guide the user to interact with the page if autoplay fails. When user's intercattion occurs, SDK will resume the playback.

  • Advantages: you don't need to do anything, it's simple and efficient.

  • Disadvantages: the style of dialog provided by SDK may not necessarily meet the requirements of your product design, so Solution two can be considered at this time.

The dialog is suitable for desktop and mobile browsers in the following styles:

  • SDK will change language(English or Chinese) of dialog according to the value of navigator.language.
  • When user click "Confirm", SDK will resume the playback.
  • In order to ensure that the "Dialog" is displayed at the top level as far as possible, it's z-index value is set to 1500.

Solution two: Provide autoplay dialog by yourself

If the Solution one does not meet your product design requirements, you can implement autoplay dialog on your own to solve this problem.

  1. To disable autoplay dialog from SDK, you need update version to v4.11.10 or above and set param enableAutoPlayDialog to false on TRTC.createClient.

  2. Listen to the error PLAY_NOT_ALLOWED. When the error fired, show a dialog to guide user interact with the page. If interaction occurs, call Stream.resume to resume the playback.

    // You can catch error like this.
try {
  await stream.play('remote');
} catch(error) {
  if (error.getCode() === 0x4043) {
  // PLAY_NOT_ALLOWED. Guide user to interact with page, call stream.resume() in the callback function of the user click event
    // stream.resume()
  }
}
// On v4.8.4 or above, we recommend you use this way to catch error.
stream.on('error', error => {
  if (error.getCode() === 0x4043) {
    // PLAY_NOT_ALLOWED. Guide user to interact with page, call stream.resume() in the callback function of the user click event
    // stream.resume()
  }
})
stream.play('remote').catch(error => {});

  3. In product design, guide user to interact with the page in advance (such as click, touch, etc.). When the interaction occurs, call Stream.play to play audio and video.

    Most browsers release autoplay policy restriction after user interaction, which can effectively avoid the problem of autoplay failure. However, due to the differences in the implementation of the autoplay policy among browsers, even if the user interact with the page in advance, there is no guarantee that the autoplay failure will not occur. Therefore, the treatment of the second step must be retained.

    For example, in iOS Wechat browser and the webview of Wechat Mini Program, when the page plays a remote stream for the first time, the Stream.play must be called synchronously in the callback function of the user click event, otherwise the playback will fail. If you use setTimeout and other APIs to call the Stream.play asynchronously in the callback of the user click event, autoplay failure will also occur.

References:

License: This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International LicenseCreative Commons License