CloudHub Docs
Download Documents

RTC


Deal with the browser’s autoplay strategy

Overview

In order to prevent webpages from actively playing sounds when users do not voluntarily, the browser limits the Autoplay function on webpages: the browser does not allow media playback with sound until there is no user interaction.

This limitation is due to user experience considerations, because under normal circumstances, the sudden automatic playback of audio after a user visits a web page may be against the user’s will.

Combined with the specific use of CloudHub JSSDK, as long as the stream object played by calling Stream.playAudio contains audio and is not muted, it will be restricted by the browser’s automatic playback strategy.

In order to solve the problem of playback failure due to browser restrictions, this article will introduce solutions to bypass Autoplay restrictions in three situations:

Obtain local audio and video permissions to bypass Autoplay restrictions

The audio/video device permission has been obtained and the device for which the permission has been obtained is in use. The browser is allowed to not be restricted by Autoplay, but once the authorized device is not used, it is still restricted by the browser AutoPlay.

Bypass Autoplay restrictions when playback fails

The Stream.playAudio() method of the SDK will carry an error in the error callback when it detects that it cannot be played due to Autoplay restrictions. We can use this method to execute logic that bypasses Autoplay restrictions when it detects playback failure. Because the page is not 100% restricted by Autoplay, as the number of times users use this page increases, the browser will add this page to its Autoplay whitelist.

When a playback failure is detected, the user is guided to click a certain position on the page to resume playback.

    stream.playAudio({}, function(StreamPlayError){
      if (StreamPlayError){

        document.querySelector("#ys_remote"+ stream.getId()).onclick=function(){
          stream.resumeAudio()
            .then(function (result) {
              console.log('Successful recovery.' + result);
            })
            .catch(function (reason) {
              console.log('Recovery failure.' + reason);
            });
        }
      }
    });

一般来说本地流不会有 Autoplay 限制（因为不会播放声音），所以只需要对远端流处理即可。

Bypass Autoplay restrictions directly

If you do not want to manually perform the Stream.resumeAudio operation and want to bypass the Autoplay restriction directly, there are two main solutions:

Regardless of the scheme used, under the restrictions of the automatic playback strategy, it is impossible to automatically play audio media without user operation. Although the browser maintains a local whitelist to determine which websites to remove the auto-play restriction, this part cannot be detected with Javascript.

Option 1: Bypass Autoplay restrictions through audioEleTestPlay

Before joining the channel, check whether the interface is allowed to play automatically through the audioEleTestPlay interface, if allowed to enter the channel directly, if not allowed, let the user and the interface interact (click/touch) through the UI and product design, and then call the audioEleTestPlay interface after the user operates , And then enter the channel. At this time, the interface has been interactive and the audio is allowed to play automatically. 【Recommended Plan】

The sample code of the program is as follows:

    CloudHubRTC.getDeviceManager().audioEleTestPlay(function(err){
      if(err){
        console.info('audio ele not allow play', err);
        var div = document.createElement('div');
        div.style = 'top:0;left: 0px;position: absolute;z-index: 8888;background: rgba(106, 120, 122, 0.17);width: 100%;height: 100%;';
        var button = document.createElement('button');
        button.style = 'position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);padding: 15px 20px;border-radius: 15px;border: none;background: #03a9f4;font-size: 15px;color: white;font-weight: bolder;'
        button.innerHTML = 'The browser does not allow the audio node to be played automatically, it requires manual playback, please click the button to authorize the playback';
        button.onclick = function(){
          document.body.removeChild(div);
          console.info('trigger allow auto btn click event');
          CloudHubRTC.getDeviceManager().audioEleTestPlay();
        }
        div.appendChild(button);
        document.body.appendChild(div);
      }else{

      }
    });

Option 2: Use muted: true to bypass Autoplay restrictions

Using this solution, the media will be automatically played first by mute, and then automatically cut to the playback of audio media when any interactive operation appears on the page.

The main steps are as follows:

At the beginning of the code, we register a global event on the page:

     document.body.addEventListener("touchstart")

or

     document.body.addEventListener("mousedown")

After obtaining stream objects that can be played through createStream or subscribing to a remote end, immediately call Stream.playAudio({muted: true}) to automatically play these streams in a muted manner. At the same time, these auto-playing Stream objects are saved to an internal list object playingStreamList.

In the event callback registered in the first step, the Stream object in playingStreamList is played again, this time there is no need to set muted.

     Stream.playAudio({muted: false})