概述
本文将指引您如何接入VCaaS教室到系统中。
链接跳转方式
获取教室链接
通过api生成教室链接
跳转链接
根据生成链接跳转到目标链接,以下列举几种方式跳转示例如下:
- window.open
window.open(classroom_link);
- a标签href属性
<a href="classroom_link" target="_blank"></a>
- 动态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"
/>
消息体:
{
cmd: MEETING_LOADED,
content: boolean | Record<string, any>
}
指令列表:
指令 | 消息内容 | 描述 |
---|---|---|
MEETING_LOADED | true/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"
/>