概述

本文将指引您如何接入VCaaS教室到系统中。

链接跳转方式

获取教室链接

通过api生成教室链接

跳转链接

根据生成链接跳转到目标链接,以下列举几种方式跳转示例如下:

  1. window.open
window.open(classroom_link);
  1. a标签href属性
<a href="classroom_link" target="_blank"></a>
  1. 动态a标签
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嵌入方式

获取教室链接

通过api生成教室链接

嵌入教室

iframe嵌入教室示例如下:
注意⚠️:必须配置allow sandbox权限避免使用教室功能时出错。

<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通信消息

消息体:

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

指令列表:

指令消息内容描述
MEETING_LOADEDtrue/false会议加载完成标识
ATTENDEE_OTHER_DEVICE_JOINED{}A、B两个用户先后入会,B将A挤出
ATTENDEE_QUITTED{}参会者主动退出
ATTENDEE_KICKED{}参会者被host踢出
MEETING_ENDED{}host 结束课堂
MEETING_AUTO_ENDED{}课堂时间到期,自动结束课堂
SELF_END_ALL_MEETING{}HOST 自己结束会议退出
REQUEST_401_QUITTED{}接口请求 401 退出
MEDIA_METRICS音视频数据推送内容音视频数据推送(自定义音视频数据推送频次)
OPEN_HELP_CENTER{}打开帮助中心
音视频数据推送内容
{
  "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
    }
  ]
}

附加说明:请注意,如果用户的视频被关闭,则该用户相关的视频上传数据将显示为0。

自定义音视频数据推送频次

在 VCaaS 链接上拼接 frequency 参数, 默认值为 60000,最小值 5000单位毫秒

  <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: