Making Video Calls in Safari
Although the latest versions of Safari support WebRTC, users still may experience some issues with video calls. By default, Safari uses only the H264 codec while other browsers use both H264 and VP8 popular codecs. To fix the issue, you can explicitly specify a video codec list conventionally called “scheme”.
The following issues may arise:
- The video is enabled for both parties but it glitches.
- Only the party that uses Chrome can see the video. If this party switches the video off:
- The video is switched off for both users.
- It is impossible to switch the video back on.
…and so on.
WHAT YOU NEED
To follow this how-to guide, you will need:
- Voximplant developer account. If you don’t have one, sign up here.
- A JS scenario. It will be created during this tutorial.
1. JS SCENARIO
If you log in as user1 and want to call user2, a JS scenario has to receive an incoming call from user1, call user2, and connect them. Note that we call the callUser method because we need to pass scheme as an argument to support video calls in Safari:
The connection is successfully established. Next, we need to enable switching the video on and off. To do this, we use the reInvite method together with the ReInviteReceived and ReInviteAccepted events:
That’s all the code we need to support video calls in Safari. The tutorial below demonstrates how you can finalize the sample application and test video calls.
To create a scenario, you need to create an application first. Go to Applications, click New application and name it videocalls.
Then switch to the Scenarios tab of the application and add the scenario with the code above. Name it video-call-handling.
2. USERS + RULE
To use the application, you need to create two users. Switch to the Users tab, create two users named user1 and user2 and set passwords for them. The active checkbox should be selected.
Further, we should create a rule for our application. As you are still in the edit mode, go to the Routing tab in the application and click New rule in the upper right corner (or Create in the center of the screen).
You can name the rule Incoming call. Use the created JS scenario in the rule and leave the default call pattern ( .* ). Select video-call-handling in the Available Scenarios drop-down list to link it with the application. Finally, click Create rule.
You will see Incoming call in the rule list. Now you can test your solution.
3. HOW TO USE THE DEMO
- Open your demo app on two different devices.
- Allow access to your microphone and camera.
- Sign in as user1 in one demo app.
- Sign in as user2 in the other demo app.
- Call user2 to start a video call.
- Try to switch the video stream on/off for each party. It should work perfectly!
THE SCHEME IS REQUIRED…
…for video calls. That’s the point! Don’t forget to use it in your development. We hope this article helped you save time by explaining what was wrong with the video.