Best Practices for Twilio Video on Mobile Browsers

Best Practices for Twilio Video on Mobile Browsers

Over the last few months, we have seen a surge in interest from developers building video communication web apps for mobile devices. We have worked closely with customers to overcome obstacles inherent in using video in the browser on a mobile device. Based on these experiences, we've compiled a list of best practices so you can avoid the pitfalls and deliver great video experiences in mobile browsers.

Mobile Browser Challenges

A  web app running in a mobile phone web browser is the quickest and easiest way to get into a video call. Just click on the web link from a text message or email and you can be in a video call on your phone in seconds - no app install required.

However, there are some challenges unique to mobile browsers that do not exist with their desktop counterparts. The top gotchas that often catch developers out are:

• Another tab or application has reserved the camera or microphone
• The mobile browser has been backgrounded
• The audio and video handling of the mobile browser is not as robust as its desktop counterpart due to known bugs
• The  web app launches on a mobile browser that does not fully support WebRTC

These issues typically manifest themselves as missing audio or video for participants. For example, two participants on a video call could see each other but the audio from one participant cannot be heard by the other. This seemingly random occurrence can cause a lot of frustration and in turn, support calls.

Best Practices

As we have learned more about the challenges that developers face with mobile browsers we have documented the best practices for overcoming them.

• Perform pre-call microphone and camera tests: In mobile browsers, getUserMedia() is successful even when your microphone and/or camera are reserved by another tab or application. It’s best to test the microphone and camera before entering the video call.
• Notify participants when camera access is lost: When a mobile browser is backgrounded the web app will no longer have access to the camera. A remote participant will see a frozen video frame and think there is a problem. It’s best to stop and unpublish the local video track and notify the remote participant.
• Make sure the microphone is working at all times: Even if the web app is successfully using the microphone, it can lose access to it if another application is brought to the foreground that requires the use of the microphone, for example, an inbound phone call or FaceTime call. In those scenarios, reacquire the microphone when the video app is foregrounded again (added as part of Twilio Video JS SDK version 2.6.0)
• Provide camera previews: In mobile browsers, the camera can be reserved by only one local video track at any given time. If you want to display a camera preview, ensure you use the same video track for the preview and for publishing into the Room.

For additional information and code samples see the documentation here. We have also updated our quick start code samples to implement the best practices so that developers can avoid some of the pitfalls from the get-go. For example, we have included a microphone and speaker check, which can be used to validate that your web app has access to the microphone and speaker before entering into the video call. Finally, we have been tracking known issues with the main mobile browsers here and in some cases, we have developed workarounds for known issues. Always use our most recent JavaScript SDK to get the latest fixes.

Help and Support

We are here to help! If you have any questions or need help with anything Twilio, don’t hesitate to reach us at support@twilio.com.

We can't wait to see what you build!