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.
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.
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 firstname.lastname@example.org.
We can't wait to see what you build!