How to keep WebRTC dataChannel open in phone browser inactive tab?

Question

I am making a web application that uses WebRTC. It works just fine on desktop browsers. However on a small smartphone web browser, there are unwanted events:

When switching tabs on the mobile web browser chrome for android and firefox for android, an open webrtc data channel that is created with .createDataChannel closes. The dataChannel.onclose event handler is fired. How to prevent the data channel from closing ? If that is not possible, is it possible to reopen the data channel without restarting the whole signaling phase ?

This also happens when browsing for a file with <input type="file">

I browsed stackoverflow a bit and noticed there are other things that are cut down/slowed down in inactive tabs like requestTimeOut and setInterval.

Is there any autorisation required to force it to stay open in the background.

Answer 1

According to mozilla documentation of webRTC ..

Handling channel status changes

Both our local and remote peers use a single method to handle events indicating a change in the status of the channel's connection.

When the local peer experiences an open or close event, the handleSendChannelStatusChange() method is called:

function handleSendChannelStatusChange(event) {
if (sendChannel) {
  var state = sendChannel.readyState;

  if (state === "open") {
    messageInputBox.disabled = false;
    messageInputBox.focus();
    sendButton.disabled = false;
    disconnectButton.disabled = false;
    connectButton.disabled = true;
  } else {
    messageInputBox.disabled = true;
    sendButton.disabled = true;
    connectButton.disabled = false;
    disconnectButton.disabled = true;
  }
}

}

If the channel's state has changed to "open", that indicates that we have finished establishing the link between the two peers. The user interface is updated correspondingly by enabling the text input box for the message to send, focusing the input box so that the user can immediately begin to type, enabling the "Send" and "Disconnect" buttons, now that they're usable, and disabling the "Connect" button, since it is not needed when the conneciton is open.

If the state has changed to "closed", the opposite set of actions occurs: the input box and "Send" button are disabled, the "Connect" button is enabled so that the user can open a new connection if they wish to do so, and the "Disconnect" button is disabled, since it's not useful when no connection exists.

so try to play with handleReceiveChannelStatusChange
This example remote peer, on the other hand, ignores the status change events, except for logging the event to the console:

function handleReceiveChannelStatusChange(event) {
      if (receiveChannel) {
               console.log("Receive channel's status has changed to " +
               receiveChannel.readyState);
   }
 }

The handleReceiveChannelStatusChange() method receives as an input parameter the event which occurred; this will be an RTCDataChannelEvent.

Answer 2

One way to force a the browser to keep a tab fully active even on the background is to use the Web Audio API. Indeed any application (e.g. music player) that plays sound needs to be kept alive, which makes sense. But, this is a non standard hack and therefore not future proof. Share your knowledge if you happen to find other ways.