Client Join for Multiple Participants

Layout and Markup

The browser experience consists of two parts: containers for the video feeds and JavaScript that talks to the Vonage Video API.

Create placeholder elements for the local publisher, remote subscribers, and archive controls:

<!-- index.html -->
<div id="videos">
  <div id="subscriber"></div>
  <div id="publisher"></div>
</div>

<div id="buttonHolder">
  <div id="buttons">
    <button type="button" id="start">Start Archive</button>
    <button type="button" id="stop">Stop Archive</button>
    <span id="archiveLink"></span>
  </div>
</div>

Add the Vonage Video SDK directly from the CDN (https://unpkg.com/@vonage/client-sdk-video@latest/dist/js/opentok.js) or bundle it into your build tool of choice.

Initialize the Session

The client fetches the Application ID, Session ID, and token from the backend before connecting:

// src/app.js (snippet)
if (SAMPLE_SERVER_BASE_URL) {
  fetch(`${SAMPLE_SERVER_BASE_URL}/session`)
    .then(response => response.json())
    .then(json => {
      applicationId = json.applicationId;
      sessionId = json.sessionId;
      token = json.token;
      initializeSession();
    })
    .catch(error => {
      handleError(error);
      alert('Failed to get Vonage Video sessionId and token. Check config.js.');
    });
}

initializeSession() wires up the SDK:

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

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

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

  session.connect(token, error => {
    if (error) {
      handleError(error);
    } else {
      session.publish(publisher, handleError);
    }
  });
}

OT.initSession() creates a client-side session instance tied to your Vonage Application.
session.on('streamCreated') lets you subscribe to every new participant as they publish.
OT.initPublisher() captures the local camera/mic and publishes into the room once the connection succeeds.

At this point multiple users can join the same URL and see/hear each other.