Adding Code to call.js

The call.js file is used to control the call and add methods to the PexRTC callbacks. This will allow your code to act based on the state of the Pexip call. To add these call back mappings, add the following code top your file.

// Run when the page loads
window.addEventListener('load', function (e) {
  // Link the callSetup method to the onSetup callback
  pexRTC.onSetup = callSetup;
  // Link the callConnected method to the onConnect callback
  pexRTC.onConnect = callConnected;
  // Link the callDisconnected method to the onError callback
  pexRTC.onError = callDisconnected;
  // Link the callDisconnected method to the onDisconnect callback
  pexRTC.onDisconnect = callDisconnected;
});

We also have various elements that will need to be used throughout the call.js file, these are added to the top of the file as global variables.

// The far end video element
var farEndVideo = document.getElementById('farEndVideo');
// The self view video element
var selfViewVideo = document.getElementById('selfViewVideo');
// The pin entry text box
var pin = document.getElementById('pin');

All of the callbacks from the start of this section are mapped to methods within the call.js file.

onSetup Callback

This call back happens when the call is in the initial stages of being setup. It is where we will need to send a pin number if one is required. The second variable on the method is the pin status and we use that to see if there are various levels of pins required;

• none - no pin required

• optional - if the user does not enter a pin they will be a guest

• required - the pin number is required

// This method is called when the call is setting up
function callSetup(stream, pinStatus) {
  // If no pin is required, connect to the call with no pin
  if (pinStatus === 'none') {
    // Hie the pin popup
    hidePinPopup();

    // Connect to the call without a pin
    pexRTC.connect();
  } else {
    // The pin is optional
    if (pinStatus === 'optional') {
      // Set the title of the pin entry to reflect its requirement
      callPinTitle.innerText = 'Enter your PIN or press Connect';
    } else {
      // Set the title of the pin entry to reflect its requirement
      callPinTitle.innerText = 'A PIN is required to enter this meeting';
    }

    // Show the pin popup
    showPinPopup();
  }

  // Check that the selfview stream is defined
  if (stream) {
    // Set the selfview video window's source to the stream
    selfViewVideo.srcObject = stream;
  }

  // Call the ui navigateToCall method to change the visible div's
  navigateToCall();
}

onConnect Callback

The onConnect callback is called when the call is actually connected. This also gives us the stream URL of the far end so that we can show them in a video element on the DOM.

It is recommended to clear the pin at this point to ensure that it is not reused on subsequent calls.

// When the call is connected
function callConnected(stream) {
  // Check that the stream is defined and is a Media Stream
  if (typeof MediaStream !== 'undefined' && stream instanceof MediaStream) {
    // Set the far end video window's source to the stream
    farEndVideo.srcObject = stream;
  } else {
    // Set the far end video window's source to the stream
    farEndVideo.src = stream;
  }

  // Enable presentation in mix
  // Presentation in mix allows us to show presentation in the same video window
  pexRTC.setPresentationInMix();

  // Clear the pin, if we don't do this it will be cached for the next call
  pexRTC.pin = null;
  // Hide the pin entry screen
  hidePinPopup();
}

onDisconnect Callback

When the call is disconnected the onDisconnect callback is called. This is used to flag that the call has ended so we can do any post call actions like navigating to a survey or navigating back to the preflight to perform another call.

// When the call is disconnected
function callDisconnected(reason = '') {
  // Call the ui navigateToPreflight method to change the visible div's
  navigateToPreflight();
}