SIGN UP

Making Video Calls in Safari

INTRODUCTION

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:

// call handling
VoxEngine.addEventListener(AppEvents.CallAlerting, (e) => {
  const incCall = e.call;
  // we have to pass scheme as an argument! 
  const newCall = VoxEngine.callUser(e.destination, e.callerid, e.displayName, null, true, e.scheme);
  newCall.addEventListener(CallEvents.Connected, () => {
    VoxEngine.sendMediaBetween(incCall, newCall);
  });
});

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:

// call handling
VoxEngine.addEventListener(AppEvents.CallAlerting, (e) => {
  const incCall = e.call;
  // we have to pass scheme as an argument! 
  const newCall = VoxEngine.callUser(e.destination, e.callerid, e.displayName, null, true, e.scheme);
  newCall.addEventListener(CallEvents.Connected, () => {
    VoxEngine.sendMediaBetween(incCall, newCall);
  });
 
  // this functionality is implemented in the easyprocess() method
  // https://github.com/voximplant/easyprocess/blob/master/easyprocess.js#L55
  incCall.addEventListener(CallEvents.ReInviteReceived, (e) => {
    newCall.reInvite(e.headers, e.mimeType, e.body);
  });
  incCall.addEventListener(CallEvents.ReInviteAccepted, (e) => {
    newCall.acceptReInvite(e.headers, e.mimeType, e.body);
  });
  newCall.addEventListener(CallEvents.ReInviteReceived, (e) => {
    incCall.reInvite(e.headers, e.mimeType, e.body);
  });
  newCall.addEventListener(CallEvents.ReInviteAccepted, (e) => {
    incCall.acceptReInvite(e.headers, e.mimeType, e.body);
  });
});

You might have noticed a comment about the easyprocess method, which makes it possible to use fewer lines of code. Let’s reduce our code size:

// call handling
VoxEngine.addEventListener(AppEvents.CallAlerting, (e) => {
  const incCall = e.call;
  // we have to pass scheme as an argument! 
  const newCall = VoxEngine.callUser(e.destination, e.callerid, e.displayName, null, true, e.scheme);
  newCall.addEventListener(CallEvents.Connected, () => {
    VoxEngine.easyProcess(incCall, newCall);                         
  });
});

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.

new_application

Then go to the Applications tab. Click Create application, type the name of a new application (video-calls, for example) and then click Create.

app_name

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.

assign_users

assign_users2

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.

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.

rule_settings

You will see Incoming call in the rule list. Click Save, after which you can test your solution.

3. HOW TO USE THE DEMO

To make video calls, you need a web client. You can build it via Web SDK or use our video chat 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.

Add your comment

Please, enter valid email

Get your free developer account or talk with our sales team to learn more about Voximplant solutions
SIGN UP
Contact sales

Please complete this field.

Please complete this field.

Please complete this field.

Choose the solution

Please complete this field.

Please complete this field.