In order to prevent web pages from automatically playing audio and video and causing interference to users, browsers have restricted the automatic playback function 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, users may not be able to hear the sound when playing audio. The most common business scenario for this issue is that the users are able to enter the room and start remote audio automatically without user interaction(e.g. click) after refreshing the page.
This tutorial mainly introduces how to solve the issue of playback failure caused by the restriction of autoplay policy.
Solutions
1. Use the SDK's autoplay popup window
By default, when autoplay fails, the SDK will pop up to guide the user to interact with the page. After the interaction occurs, the SDK will actively call the interface to resume playback.
Advantage: The business side does not need to do anything, simple and efficient.
Disadvantage: The popup window provided by the SDK may not meet the design requirements of the business product. At this time, you can consider using Solution 2.
The popup window provided by the SDK is adapted to desktop and mobile browser, and the style is as follows:
The SDK will switch the English and Chinese popup prompts according to the value of navigator.language.
When the user clicks "OK", the SDK automatically calls the relevant interface to resume playback.
In order to ensure that the popup window is displayed on the top layer as much as possible, its z-index value is 1500.
2. Business side provides popup window processing
If Solution 1 does not meet your product design requirements, you can also solve the autoplay problem in the following ways.
2.1 Setting the enableAutoPlayDialog parameter in the trtc.enterRoom interface to false to turn off the SDK's popup window.
2.2 Listening to the AUTOPLAY_FAILED event, and guiding the user to click the page when the event triggered. The SDK will automatically resume the audio playback after the user clicks the page.
2.3 In product design, it is recommended to guide users to interact with the page before entering the room (such as clicking the enter room button), which can avoid autoplay failure.
trtc.on(TRTC.EVENT.AUTOPLAY_FAILED,event=>{
// Guide the user to click the page, you can pop up a prompt.
Most browsers release the autoplay restriction after user interaction, and this step can effectively avoid the error of autoplay failure. However, due to the differences in the implementation of autoplay policies by various browser manufacturers, even if users are guided to interact with the page in advance, autoplay failure errors may still occur. Therefore, you still need to listen to the AUTOPLAY_FAILED event, and guiding the user to click the page.
For example: In the iOS WeChat browser and its mini-program webview, when playing a remote stream for the first time on the page, you must call the playback interface in the callback function of the user click event, otherwise playback will fail. If you use setTimeout and other interfaces to asynchronously call the playback interface in the callback of the user click event, you will also encounter autoplay failure errors.
