Client Essentials

The client-side portion of the demo consists of two different parts - some HTML elements to put the video feeds in, and then some JavaScript to fetch login information and talk to the Vonage Video servers.

Since this is a browser demo, we use the JavaScript SDK located at https://unpkg.com/@vonage/client-sdk-video@latest/dist/js/opentok.js, and include that in a script tag in our HTML in index.html.

To add people to a room, we only need two elements - somewhere to put the current user, for example, You, which we call "publisher." We then need somewhere to put anyone else that joins, which you will "subscribe" to. We will put them in a "subscriber" element.

We will create two div elements, and give one an ID of publisher and the other an ID of subscriber. We will reference these elements in the JavaScript when the page is visited, and for when we detect another user has entered the video call.

On the JavaScript side, we will first get some information about the video call itself. To connect to the video call, we need an Application ID, a Session ID, and a token.

• The Application ID is an identifier that the client SDK uses to reference different settings for our video app on the Vonage side.
• The Session ID is a specific video session we want to connect to, as a single Application can have multiple concurrent video sessions at once.
• The Token is a JWT authentication token that allows you to join a specific session with specific rights.

While you can generate the Session ID and Token ahead of time, in the real world you will generate these on demand. Our code represents how you would do that. We will show how the information is created in a bit, but we will grab that information from the backend server we deployed.

// src/app.js

// ...
} else if (SAMPLE_SERVER_BASE_URL) {
  // Make a GET request to get the Vonage Video Application ID, session ID, and token from the server
  fetch(SAMPLE_SERVER_BASE_URL + '/session')
  .then((response) => response.json())
  .then((json) => {
    applicationId = json.applicationId;
    sessionId = json.sessionId;
    token = json.token;
    // Initialize a Vonage Video Session object
    initializeSession();
  }).catch((error) => {
    handleError(error);
    alert('Failed to get Vonage Video sessionId and token. Make sure you have updated the config.js file.');
  });
}

Once we have all the connection information, we can go ahead and call the Vonage Video JavaScript SDK, which handles all the work to connect to the Vonage Video API on the front end. First, we grab a session object with OT.initSession(). We then start to listen on the streamCreated event with session.on(). This allows us to set a callback to run when a stream from another publisher is created. In this case, we use session.subscribe() to connect to the incoming event, and push it into the subscriber div we set up in the HTML. We also listen for the sessionDisconnected event to know when the other user disconnects, but all we do for this demo is just log that we noticed they left.

Then we create the publisher object with OT.initPublisher(). We tell it what div to attach to (publisher), and some basic formatting options. This connects your camera and microphone to the Video API.

We then call session.connect() to connect to the session, using the connection JWT token we grabbed from the server. That's all it takes for two people to join a room!

// src/app.js

function initializeSession() {
  const session = OT.initSession(applicationId, sessionId);

  // Subscribe to a newly created stream
  session.on('streamCreated', (event) => {
    const subscriberOptions = {
      insertMode: 'append',
      width: '100%',
      height: '100%'
    };
    session.subscribe(event.stream, 'subscriber', subscriberOptions, handleError);
  });

  session.on('sessionDisconnected', (event) => {
    console.log('You were disconnected from the session.', event.reason);
  });

  // initialize the publisher
  const publisherOptions = {
    insertMode: 'append',
    width: '100%',
    height: '100%',
    resolution: '1280x720'
  };
  const publisher = OT.initPublisher('publisher', publisherOptions, handleError);

  // Connect to the session
  session.connect(token, (error) => {
    if (error) {
      handleError(error);
    } else {
      // If the connection is successful, publish the publisher to the session
      session.publish(publisher, handleError);
    }
  });
}