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:
To create a scenario, you need to go to the Scenarios tab of the Voximplant control panel and add the scenario with the code above. Name it video-call-handling.
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.
2. USERS + APPLICATION + RULE
To use the application, you need to create two users. Go to the Users tab, create two users named user1 and user2 and set passwords for them. The is active checkbox should be selected.
Then go to the Applications tab. Click Create application, type the name of a new application (video-calls, for example) and then click Create.
After the new application is created, it switches to the edit mode. Click Assign users, then select user1 and user2 and click Done to link the users to the video-calls application.
When prompted to save your work, click Save. Ok, last but not least, we should create a rule for our application. As you are still in the edit mode, go to the Rules tab in the application and click Add rule.
You can name the rule Incoming call. Use the created JS scenario in the rule and leave the default call pattern ( .* ). Click Add to link the rule to your video-calls application.
You will see Incoming call in the rule list. Click Save, after which 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.