SIGN UP

Making Video Calls in Safari

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);                         
  });
});

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

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.

Tags:ios sdkweb sdkvideo
B6A24216-9891-45D1-9D1D-E7359CEB8282 Created with sketchtool.

Comments(0)

Add your comment

Please complete this field.

Recommended

Sign up for a free Voximplant developer account or talk to our experts
SIGN UP