Web SDK 快速接入
使用红鲸 Web SDK 在现有 Web 系统中嵌入音视频会议,了解 SDK 脚本、入会参数、自动入会和连接回调。
接入前先准备四项内容
红鲸 Web SDK 适合将会议入会界面嵌入已有网站或 Web 业务系统。集成方引入红鲸服务提供的 JavaScript 文件,准备一个页面容器,再通过 window.meeting.join(options) 发起入会。
| 优先级 | 需要准备 | 说明 |
|---|---|---|
| 1 | 会议服务地址 | 包含实际域名和 HTTPS 端口,TLS 证书有效 |
| 2 | 会议信息 | 至少准备有效会议 ID;启用密码时同时准备会议密码 |
| 3 | 页面容器 | 用于承载会议 UI,并具有明确宽度和高度 |
| 4 | 浏览器设备权限 | 允许页面访问摄像头、麦克风和屏幕共享 |
项目禁止匿名入会时,还需要由业务服务端提供用户 Token,不应在前端硬编码。Web SDK 提供已有会议界面和入会流程;需要完全自定义 Android 会议界面时,应使用 Android 无 UI SDK。
如何引入 Web SDK
4.2.0 及以后版本使用以下脚本路径。
<script src="https://meeting.example.com:8443/connect/static/js/sdk.4.0.0.bundle.js"></script>meeting.example.com 是示例域名。实际项目需要替换为已部署的红鲸会议服务地址。
如何准备会议容器
<div id="redwhale-meeting" style="width:100%;height:100vh"></div>容器必须有可用的宽度和高度。如果容器的高度为 0,会议界面已加载但用户无法看到。
如何手动启动入会页面
<script>
const meetingContainer = document.getElementById('redwhale-meeting');
window.meeting.join({
serverUrl: 'https://meeting.example.com:8443',
el: meetingContainer,
roomId: '${ROOM_ID}',
meetingType: 'video',
isMicrophoneEnabled: true,
isCameraEnabled: true,
autoJoin: 0
});
</script>autoJoin: 0 会显示入会页面,由用户确认姓名、设备和会议凭据后入会。
Web SDK 常用入会参数
| 参数 | 类型 | 必填 | 说明 |
|---|---|---|---|
serverUrl | string | 是 | 红鲸会议服务地址 |
el | HTMLElement | 是 | 承载会议界面的 DOM 元素 |
roomId | string | 是 | 会议 ID |
password | string | 否 | 会议密码,不应写入 URL 或公开代码库 |
token | string | 否 | 用户或匿名入会 Token,由服务端业务流程提供 |
userName | string | 否 | 入会显示名称 |
meetingType | string | 否 | 会议类型,例如 video 或 audio |
isMicrophoneEnabled | boolean | 否 | 入会时是否默认开启麦克风 |
isCameraEnabled | boolean | 否 | 入会时是否默认开启摄像头 |
autoJoin | 0 或 1 | 否 | 0 显示入会页,1 在参数完整时尝试自动入会 |
快速开始页只保留首次入会所需参数,完整参数请查看“入会参数参考”。
什么时候可以自动入会
只有在业务系统已经完成用户身份校验,并且能够安全提供会议 ID、用户名和入会凭据时,才应该使用自动入会。不要把固定密码或长期 Token 写入前端 JavaScript。
window.meeting.join({
serverUrl: 'https://meeting.example.com:8443',
el: meetingContainer,
roomId: '${ROOM_ID}',
userName: '演示用户',
password: '${MEETING_PASSWORD}',
autoJoin: 1,
meetingType: 'video'
});如何处理连接成功和失败
window.meeting.join({
serverUrl: 'https://meeting.example.com:8443',
el: meetingContainer,
roomId: '${ROOM_ID}',
connectSuccess: (data) => {
console.log('会议连接已建立');
// 在这里初始化项目所需的会议事件监听。
},
connectFail: (error) => {
console.error('会议连接失败', error);
// 不要将 Token、密码或完整请求头写入日志。
}
});如何验证 Web SDK 接入结果
- 页面能够成功加载 Web SDK 脚本。
window.meeting存在,并且window.meeting.join是可调用方法。- 页面能显示会议入会界面。
- 浏览器能够正常申请摄像头和麦克风权限。
- 使用有效会议 ID 可以加入会议。
- 连接失败时,页面能给出明确提示,不会泄露凭据。
常见问题
页面已加载但会议界面不可见
先检查会议容器是否有可用高度,再检查 SDK 脚本是否加载成功、el 是否指向正确的 DOM 元素。
浏览器无法打开摄像头或麦克风
检查页面是否使用 HTTPS,浏览器是否已授权设备访问,以及设备是否被其他程序占用。
能否把 Token 直接写在网页代码中
不应在可公开读取的前端源码中硬编码长期 Token。项目应由后端根据已验证的用户身份提供有效期和使用范围受限的入会凭据。