Overview

This document will guide you on how to integrate VCaaS classrooms into your system.

Generate Classroom Link through API

Based on the generated link, redirecting to the target link can be achieved through various methods. Here are a few examples of the redirection process:

  1. window.open
window.open(classroom_link);
  1. The 'href' Attribute of the 'a' Tag
<a href="classroom_link" target="_blank"></a>
  1. Dynamic 'a' Tag
const openNewWindow = (strUrl: string) => {
  let a = document.createElement("a");
  document.body.appendChild(a);
  a.style = "display: none";
  a.target = "_blank";
  a.href = strUrl;
  a.click();
  document.body.removeChild(a);
}

openNewWindow(classroom_link);

Iframe Embedding Method

Generate Classroom Link through API

Embedding the Classroom

An example of iframe embedding in a classroom is as follows:
Note ⚠️: It is necessary to configure 'allow' and 'sandbox' permissions to avoid errors when using the classroom functionality.

<iframe
  src="classroom_link"
  allow="microphone;camera;midi;encrypted-media;display-capture;autoplay;fullscreen;geolocation;picture-in-picture;clipboard-read;clipboard-write"
  sandbox="allow-scripts allow-top-navigation allow-same-origin allow-popups allow-popups-to-escape-sandbox allow-forms allow-modals allow-top-navigation-to-custom-protocols allow-downloads"
  referrerPolicy="no-referrer-when-downgrade"
/>

postMessage Communication Message

Message Body:

{
  cmd: MEETING_LOADED,
  content: boolean | Record<string, any>
}

Command List:

CommandMessage ContentDescription
MEETING_LOADEDtrue/falseMeeting Load Completion Indicator
ATTENDEE_OTHER_DEVICE_JOINED{}Participant joined meeting using second device, displacing the first device
ATTENDEE_QUITTED{}Participant voluntarily exits
ATTENDEE_KICKED{}Participant kicked by the host
MEETING_ENDED{}Host has ended the meeting
MEETING_AUTO_ENDED{}The meeting time has expired and the session will automatically end
SELF_END_ALL_MEETING{}The host has ended the meeting and exited
REQUEST_401_QUITTED{}Interface request returns 401, initiating logout
MEDIA_METRICSAudio and Video Data Push ContentAudio and Video Data Push (Custom Audio and Video Data Push Frequency)
OPEN_HELP_CENTER{}Open Help Center
Audio and Video Data Push Content
{
  "meetingUid": "12345",
  "meetingExternalId": "meeting-500000",
  "timestamp": "xxxxx",
  "attendeeName": "user",
  "audioPacketsSentFractionLossPercent": 0,
  "audioPacketsReceivedFractionLossPercent": 0,
  "audioSpeakerDelayMs": 0,
  "audioUpstreamRoundTripTimeMs": 0,
  "audioUpstreamJitterMs": 0,
  "audioDownstreamJitterMs": 0,
  "currentRoundTripTimeMs": 0,
  "availableOutgoingBandwidth": 0,
  "availableIncomingBandwidth": 0,
  "videoUpstreamBitrate": 0,
  "videoUpstreamPacketLossPercent": 0,
  "videoUpstreamFramesEncodedPerSecond": 0,
  "videoUpstreamFrameHeight": 0,
  "videoUpstreamFrameWidth": 0,
  "videoUpstreamJitterMs": 0,
  "videoUpstreamRoundTripTimeMs": 0,
  "videoDownstreamMetrics": [
    {
      "attendeeName": "user1",
      "videoDownstreamBitrate": 0,
      "videoDownstreamPacketLossPercent": 0,
      "videoDownstreamPacketsReceived": 0,
      "videoDownstreamFramesDecodedPerSecond": 0,
      "videoDownstreamFrameHeight": 0,
      "videoDownstreamFrameWidth": 0,
      "videoDownstreamJitterMs": 0,
      "videoDownstreamDelayMs": 0
    },
    {
      "attendeeName": "user2",
      "videoDownstreamBitrate": 0,
      "videoDownstreamPacketLossPercent": 0,
      "videoDownstreamPacketsReceived": 0,
      "videoDownstreamFramesDecodedPerSecond": 0,
      "videoDownstreamFrameHeight": 0,
      "videoDownstreamFrameWidth": 0,
      "videoDownstreamJitterMs": 0,
      "videoDownstreamDelayMs": 0
    }
  ]
}

Additional Note: Please note that if the user's video is turned off, then the related video upload data for that user will show as 0.

Custom Audio and Video Data Push Frequency

Concatenate the frequency parameter on the VCaaS link, with a default value of 60000, a minimum value of 5000, in milliseconds.

  <iframe
    src="classroom_link?frequency=7000"
    allow="microphone;camera;midi;encrypted-media;display-capture;autoplay;fullscreen;geolocation;picture-in-picture;clipboard-read;clipboard-write"
    sandbox="allow-scripts allow-top-navigation allow-same-origin allow-popups allow-popups-to-escape-sandbox allow-forms allow-modals allow-top-navigation-to-custom-protocols allow-downloads"
    referrerPolicy="no-referrer-when-downgrade"
  />
Last Updated: