@tencentcloud/sdk-mcp 1.7.1 → 1.7.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +18 -0
- package/README.md +13 -5
- package/knowledge/bm25.js +20 -11
- package/knowledge/search/generic-rerank.js +123 -0
- package/knowledge/search/search-pass.js +8 -1
- package/package.json +1 -1
- package/resource/_schema/query-normalization.yaml +6 -0
- package/resource/index/manifest.json +1 -1
- package/resource/integration/chat/preset/android/integration.md +33 -29
- package/resource/integration/chat/preset/flutter/integration.md +93 -92
- package/resource/knowledge/callkit/core-sdk/ios/offline-push.md +1 -1
- package/resource/knowledge/chat/best-practice/common/web-sdk-log-level.md +76 -0
- package/resource/knowledge/chat/best-practice/miniprogram/desktop-wechat-miniprogram-error.md +79 -0
- package/resource/knowledge/chat/best-practice/miniprogram/login-timeout-2801-diagnosis.md +1 -1
- package/resource/knowledge/chat/preset/android-view/integration.md +37 -29
- package/resource/knowledge/push/config/android/fcm.md +2 -6
- package/resource/knowledge/push/integration/android.md +777 -425
- package/resource/knowledge/push/integration/donut.md +54 -71
- package/resource/knowledge/push/integration/flutter.md +194 -63
- package/resource/knowledge/push/integration/harmonyos.md +7 -2
- package/resource/knowledge/push/integration/ios.md +23 -93
- package/resource/knowledge/push/integration/react-native.md +2 -1
- package/resource/knowledge/push/integration/uni-app.md +28 -106
- package/resource/knowledge/push/integration/unity.md +2 -1
- package/resource/knowledge/push/integration/unreal-engine.md +2 -1
- package/resource/knowledge/roomkit/best-practice/vue/screen-share-auto-stop-on-leave.md +62 -0
- package/resource/knowledge/roomkit/core-sdk/react/network-proxy.md +84 -0
- package/resource/knowledge/roomkit/core-sdk/vue/network-proxy.md +84 -0
- package/resource/knowledge/roomkit/core-sdk/vue/recording.md +245 -0
- package/resource/knowledge/roomkit/core-sdk/vue/whiteboard-annotation.md +196 -0
- package/resource/knowledge/roomkit/faq/error-code.md +103 -0
- package/resource/knowledge/roomkit/preset/harmonyos/integration.md +461 -0
- package/resource/knowledge/roomkit/preset/react/features/network-proxy.md +80 -0
- package/resource/knowledge/roomkit/preset/uniapp-app/integration.md +581 -0
- package/resource/knowledge/roomkit/preset/vue/features/ai-caption-translation.md +69 -0
- package/resource/knowledge/roomkit/preset/vue/features/ai-denoiser.md +67 -0
- package/resource/knowledge/roomkit/preset/vue/features/network-proxy.md +80 -0
- package/resource/knowledge/roomkit/preset/vue/features/recording.md +85 -0
- package/resource/knowledge/roomkit/preset/vue/features/whiteboard-annotation.md +86 -0
- package/server.js +1 -1
- package/tools/common/search_trtc_knowledge.js +2 -0
- package/utils/preflight-route.js +18 -6
- package/utils/report-cls-client.js +1 -1
- package/utils/report-es-client.js +1 -1
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
视频会议 SDK 基于腾讯云即时通信 IM 与实时音视频 TRTC 提供服务,支持在内网 / 防火墙环境下统一配置 IM 与 TRTC 代理,适用于私有化部署、企业内网隔离等无法直连腾讯云服务的场景。
|
|
2
|
+
|
|
3
|
+
## 代理架构
|
|
4
|
+
|
|
5
|
+
|代理服务器|代理链路|
|
|
6
|
+
|---------|---------|
|
|
7
|
+
|IM 代理|代理 IM 登录、消息收发等信令通道(WebSocket),以及聊天图片、文件等资源的上传与下载。|
|
|
8
|
+
|TRTC WebSocket 代理(如 Nginx)|代理 TRTC 进房、控制等信令通道(WebSocket),负责房间管理与用户状态同步。|
|
|
9
|
+
|TRTC TURN Server|中继转发 TRTC 音视频媒体流。|
|
|
10
|
+
|
|
11
|
+
> **说明:**
|
|
12
|
+
> 代理服务器(IM 代理、Nginx、TURN)需自行部署,搭建方式参见 [TRTC Web SDK 应对防火墙受限](https://web.sdk.qcloud.com/trtc/webrtc/v5/doc/zh-cn/tutorial-34-advanced-proxy.html)。
|
|
13
|
+
>
|
|
14
|
+
|
|
15
|
+
## 接口与参数
|
|
16
|
+
|
|
17
|
+
视频会议 SDK 支持用户在调用 `login()` 之前通过 `callExperimentalAPI` 接口统一配置内网代理:
|
|
18
|
+
``` typescript
|
|
19
|
+
callExperimentalAPI({
|
|
20
|
+
api: 'setNetworkProxy',
|
|
21
|
+
params: {
|
|
22
|
+
im?: { /* IM 代理参数 */ },
|
|
23
|
+
rtc?: { /* TRTC 代理参数 */ },
|
|
24
|
+
},
|
|
25
|
+
});
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
### IM 代理参数
|
|
29
|
+
|
|
30
|
+
|参数|类型|说明|
|
|
31
|
+
|---------|---------|---------|
|
|
32
|
+
|`proxyServer`|String|IM 信令 WebSocket 代理地址。|
|
|
33
|
+
|`fileUploadProxy`|String|IM 文件上传代理地址。|
|
|
34
|
+
|`fileDownloadProxy`|String|IM 文件下载代理地址。|
|
|
35
|
+
|
|
36
|
+
### TRTC 代理参数
|
|
37
|
+
|
|
38
|
+
|参数|类型|说明|
|
|
39
|
+
|---------|---------|---------|
|
|
40
|
+
|`websocketProxy`|String|TRTC 信令 WebSocket 代理地址,如 `wss://proxy.example.com/ws/`。|
|
|
41
|
+
|`turnServer`|Array|TURN 服务器列表,每项含 `url` / `username` / `credential`。|
|
|
42
|
+
|`iceTransportPolicy`|`'relay' \| 'all'`|客户端 ICE 传输策略;内网环境建议设为 `'relay'`,强制连接 TURN server。|
|
|
43
|
+
|
|
44
|
+
## 示例代码
|
|
45
|
+
|
|
46
|
+
``` typescript
|
|
47
|
+
import { callExperimentalAPI } from 'tuikit-atomicx-vue3';
|
|
48
|
+
import { useLoginState, useRoomState } from 'tuikit-atomicx-vue3/room';
|
|
49
|
+
|
|
50
|
+
callExperimentalAPI({
|
|
51
|
+
api: 'setNetworkProxy',
|
|
52
|
+
params: {
|
|
53
|
+
im: {
|
|
54
|
+
proxyServer: 'wss://proxy.example.com:8080',
|
|
55
|
+
fileUploadProxy: 'https://proxy.example.com:8080',
|
|
56
|
+
fileDownloadProxy: 'https://proxy.example.com:8080',
|
|
57
|
+
},
|
|
58
|
+
rtc: {
|
|
59
|
+
websocketProxy: 'wss://proxy.example.com/ws/',
|
|
60
|
+
turnServer: [
|
|
61
|
+
{ url: '14.3.3.3:3478', username: 'turn', credential: 'turn' },
|
|
62
|
+
],
|
|
63
|
+
iceTransportPolicy: 'relay',
|
|
64
|
+
},
|
|
65
|
+
},
|
|
66
|
+
});
|
|
67
|
+
|
|
68
|
+
const { login } = useLoginState();
|
|
69
|
+
await login({ sdkAppId, userId, userSig });
|
|
70
|
+
|
|
71
|
+
const { createAndJoinRoom } = useRoomState();
|
|
72
|
+
await createAndJoinRoom({ roomId });
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
## 常见问题
|
|
76
|
+
|
|
77
|
+
### 用户在外网正常进会,但是内网无法进会?
|
|
78
|
+
|
|
79
|
+
检查是否在 `login()` 前调用了 `setNetworkProxy`;若已配置仍失败,排查 TURN 端口与代理服务器出站白名单。
|
|
80
|
+
|
|
81
|
+
### 用户能进会但看不到远端画面、听不到远端声音?
|
|
82
|
+
|
|
83
|
+
确认 `turnServer` 可达,内网环境将 `iceTransportPolicy` 设为 `'relay'`。
|
|
84
|
+
|
|
@@ -0,0 +1,245 @@
|
|
|
1
|
+
本篇文档旨在指导开发者在标准会议无 UI 集成方案中实现云端录制能力。您可以通过 `useRoomState()` 提供的 `startRecording()` / `stopRecording()` 控制录制的发起与停止,并通过 `currentRoom.recordingInfo` 与 `RoomEvent` 实时监听录制状态变化。
|
|
2
|
+
|
|
3
|
+
> **版本说明:**
|
|
4
|
+
>
|
|
5
|
+
> 云端录制接口(`startRecording` / `stopRecording`)自 **tuikit-atomicx-vue3 6.4.0** 和 **tuikit-atomicx-react 6.2.0** 起支持,请确认您使用的版本满足要求。
|
|
6
|
+
>
|
|
7
|
+
|
|
8
|
+
## 前提条件
|
|
9
|
+
- 用户已通过 `useLoginState` 完成登录鉴权。
|
|
10
|
+
|
|
11
|
+
- 用户已通过 `useRoomState` 进入标准会议房间。
|
|
12
|
+
|
|
13
|
+
- 已完成云端录制套餐开通及存储配置:
|
|
14
|
+
|
|
15
|
+
- 购买含云录制能力的视频会议 SDK 套餐。
|
|
16
|
+
|
|
17
|
+
- 开通录制文件存储服务:录制文件支持存储至 [云点播(VOD)](https://console.cloud.tencent.com/vod) 或 [对象存储(COS)](https://console.cloud.tencent.com/cos),请在对应控制台完成开通并记录存储信息。
|
|
18
|
+
|
|
19
|
+
- [提交工单](https://console.cloud.tencent.com/workorder/category),选择**实时音视频**产品,申请为您的 SDKAppID 配置云端录制存储信息。
|
|
20
|
+
|
|
21
|
+
## 录制效果
|
|
22
|
+
|
|
23
|
+
视频会议 SDK 默认采用**合流录制**模式,将房间内发布的音视频流混合为一份完整的录制文件。录制布局会随会中状态**自动切换**,切换过程中不重启录制任务:
|
|
24
|
+
|
|
25
|
+
|**会中状态**|**混流布局**|**画面数量上限**|
|
|
26
|
+
|---------|---------|---------|
|
|
27
|
+
|无屏幕分享 / 白板|九宫格布局|最多 **25** 路视频画面|
|
|
28
|
+
|有屏幕分享 / 白板|屏幕分享布局(共享为主画面)|最多 **1** 路屏幕分享 + **16** 路视频画面|
|
|
29
|
+
|仅音频|-|—|
|
|
30
|
+
|
|
31
|
+
## 接口说明
|
|
32
|
+
|
|
33
|
+
视频会议 SDK 无 UI 集成通过 `useRoomState()` 提供录制控制与状态订阅能力,录制任务由服务端全程托管,客户端仅负责发起与停止。
|
|
34
|
+
|
|
35
|
+
|**类型**|**名称**|**说明**|
|
|
36
|
+
|---------|---------|---------|
|
|
37
|
+
|方法|`startRecording(): Promise<void>`|发起云端录制。仅**房主或管理员**可调用,须在进房成功后调用。|
|
|
38
|
+
|方法|`stopRecording(): Promise<void>`|停止云端录制。仅**房主或管理员**可调用。|
|
|
39
|
+
|状态|`currentRoom.recordingInfo`|当前房间的录制信息,含 `status` 字段(`RecordingStatus.Recording` 表示录制中)。|
|
|
40
|
+
|事件|`RoomEvent.onRecordingStarted`|录制任务启动成功时触发,回调参数为 `{ roomInfo, operator }`。|
|
|
41
|
+
|事件|`RoomEvent.onRecordingStopped`|录制任务停止时触发,回调参数为 `{ roomInfo, operator, reason }`。`reason` 可区分主动停止与异常中断。|
|
|
42
|
+
|
|
43
|
+
## 步骤1:发起云端录制
|
|
44
|
+
|
|
45
|
+
### 权限要求
|
|
46
|
+
|
|
47
|
+
仅**房主或管理员**可调用 `startRecording()`,其他角色调用将抛出权限错误。同一房间内同时只能存在一个录制任务,重复调用也会返回错误。
|
|
48
|
+
|
|
49
|
+
### 示例代码
|
|
50
|
+
|
|
51
|
+
【Vue3】
|
|
52
|
+
``` typescript
|
|
53
|
+
import { useRoomState } from 'tuikit-atomicx-vue3/room';
|
|
54
|
+
|
|
55
|
+
const { startRecording } = useRoomState();
|
|
56
|
+
|
|
57
|
+
await startRecording();
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
【React】
|
|
61
|
+
``` typescript
|
|
62
|
+
import { useRoomState } from 'tuikit-atomicx-react/room';
|
|
63
|
+
|
|
64
|
+
const { startRecording } = useRoomState();
|
|
65
|
+
|
|
66
|
+
await startRecording();
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
### 错误处理
|
|
70
|
+
|
|
71
|
+
`startRecording()` 调用失败时会抛出错误,常见错误情况如下:
|
|
72
|
+
|
|
73
|
+
|**错误码**|**含义**|**处理建议**|
|
|
74
|
+
|---------|---------|---------|
|
|
75
|
+
|`100001`|后端系统错误。|稍后重试;若持续出现,请提交工单排查。|
|
|
76
|
+
|`100004`|房间不存在。|确认已通过 `createAndJoinRoom()` 或 `joinRoom()` 进房成功后再调用录制接口。|
|
|
77
|
+
|`100006`|没有权限,必须是房主或管理员。|检查当前用户角色,仅房主或管理员可发起录制。|
|
|
78
|
+
|`101072`|录制配置不存在或未启用。|确认已完成控制台套餐开通、工单配置及增值功能开关,参考本文「前提条件」。|
|
|
79
|
+
|
|
80
|
+
【Vue3】
|
|
81
|
+
``` typescript
|
|
82
|
+
import { useRoomState } from 'tuikit-atomicx-vue3/room';
|
|
83
|
+
|
|
84
|
+
const { startRecording } = useRoomState();
|
|
85
|
+
|
|
86
|
+
try {
|
|
87
|
+
await startRecording();
|
|
88
|
+
} catch (error: any) {
|
|
89
|
+
switch (error?.code) {
|
|
90
|
+
case 100001:
|
|
91
|
+
console.error('后端系统错误,请稍后重试。');
|
|
92
|
+
break;
|
|
93
|
+
case 100004:
|
|
94
|
+
console.error('房间不存在,请确认已进房后再发起录制。');
|
|
95
|
+
break;
|
|
96
|
+
case 100006:
|
|
97
|
+
console.error('权限不足,仅房主或管理员可发起录制。');
|
|
98
|
+
break;
|
|
99
|
+
case 101072:
|
|
100
|
+
console.error('录制配置不存在或未启用,请检查控制台开通配置。');
|
|
101
|
+
break;
|
|
102
|
+
default:
|
|
103
|
+
console.error('发起录制失败:', error);
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
【React】
|
|
109
|
+
``` typescript
|
|
110
|
+
import { useRoomState } from 'tuikit-atomicx-react/room';
|
|
111
|
+
|
|
112
|
+
const { startRecording } = useRoomState();
|
|
113
|
+
|
|
114
|
+
try {
|
|
115
|
+
await startRecording();
|
|
116
|
+
} catch (error: any) {
|
|
117
|
+
switch (error?.code) {
|
|
118
|
+
case 100001:
|
|
119
|
+
console.error('后端系统错误,请稍后重试。');
|
|
120
|
+
break;
|
|
121
|
+
case 100002:
|
|
122
|
+
console.error('参数错误,请检查传入参数。');
|
|
123
|
+
break;
|
|
124
|
+
case 100004:
|
|
125
|
+
console.error('房间不存在,请确认已进房后再发起录制。');
|
|
126
|
+
break;
|
|
127
|
+
case 100006:
|
|
128
|
+
console.error('权限不足,仅房主或管理员可发起录制。');
|
|
129
|
+
break;
|
|
130
|
+
case 101072:
|
|
131
|
+
console.error('录制配置不存在或未启用,请检查控制台开通配置。');
|
|
132
|
+
break;
|
|
133
|
+
default:
|
|
134
|
+
console.error('发起录制失败:', error);
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
```
|
|
138
|
+
|
|
139
|
+
## 步骤2:停止云端录制
|
|
140
|
+
|
|
141
|
+
### 前置条件
|
|
142
|
+
|
|
143
|
+
当前房间内有进行中的录制任务(`RecordingStatus.Recording`)。
|
|
144
|
+
|
|
145
|
+
### 权限要求
|
|
146
|
+
|
|
147
|
+
仅**房主或管理员**可调用 `stopRecording()`。
|
|
148
|
+
|
|
149
|
+
### 示例代码
|
|
150
|
+
|
|
151
|
+
【Vue3】
|
|
152
|
+
``` typescript
|
|
153
|
+
import { useRoomState } from 'tuikit-atomicx-vue3/room';
|
|
154
|
+
|
|
155
|
+
const { stopRecording } = useRoomState();
|
|
156
|
+
|
|
157
|
+
try {
|
|
158
|
+
await stopRecording();
|
|
159
|
+
} catch (error: any) {
|
|
160
|
+
console.error('停止录制失败:', error);
|
|
161
|
+
}
|
|
162
|
+
```
|
|
163
|
+
|
|
164
|
+
【React】
|
|
165
|
+
``` typescript
|
|
166
|
+
import { useRoomState } from 'tuikit-atomicx-react/room';
|
|
167
|
+
|
|
168
|
+
const { stopRecording } = useRoomState();
|
|
169
|
+
|
|
170
|
+
try {
|
|
171
|
+
await stopRecording();
|
|
172
|
+
} catch (error: any) {
|
|
173
|
+
console.error('停止录制失败:', error);
|
|
174
|
+
}
|
|
175
|
+
```
|
|
176
|
+
|
|
177
|
+
## 步骤3:监听录制状态变化
|
|
178
|
+
|
|
179
|
+
### 前置条件
|
|
180
|
+
- 已进房成功。
|
|
181
|
+
|
|
182
|
+
- 建议在进房后**立即**订阅事件,避免遗漏由其他端(例如移动端房主)发起的录制通知。
|
|
183
|
+
|
|
184
|
+
### 示例代码
|
|
185
|
+
|
|
186
|
+
【Vue3】
|
|
187
|
+
``` typescript
|
|
188
|
+
import { useRoomState, RecordingStatus, RecordingStopReason, RoomEvent } from 'tuikit-atomicx-vue3/room';
|
|
189
|
+
|
|
190
|
+
const { currentRoom, subscribeEvent } = useRoomState();
|
|
191
|
+
|
|
192
|
+
// 主动查询当前录制状态
|
|
193
|
+
const isRecording = currentRoom.value?.recordingInfo?.status === RecordingStatus.Recording;
|
|
194
|
+
|
|
195
|
+
// 监听录制开始
|
|
196
|
+
subscribeEvent(RoomEvent.onRecordingStarted, ({ operator }) => {
|
|
197
|
+
console.log('录制已开始,操作人:', operator.userId);
|
|
198
|
+
});
|
|
199
|
+
|
|
200
|
+
// 监听录制停止
|
|
201
|
+
subscribeEvent(RoomEvent.onRecordingStopped, ({ operator, reason }) => {
|
|
202
|
+
if (reason === RecordingStopReason.StoppedByUser) {
|
|
203
|
+
console.log('录制已停止,操作人:', operator.userId);
|
|
204
|
+
} else if (reason === RecordingStopReason.RecorderLeftRoom) {
|
|
205
|
+
console.warn('录制异常中断,录制机器人已退出房间,请视需要重新发起录制。');
|
|
206
|
+
}
|
|
207
|
+
});
|
|
208
|
+
```
|
|
209
|
+
|
|
210
|
+
【React】
|
|
211
|
+
``` typescript
|
|
212
|
+
import { useRoomState, RecordingStatus, RecordingStopReason, RoomEvent } from 'tuikit-atomicx-react/room';
|
|
213
|
+
|
|
214
|
+
const { currentRoom, subscribeEvent } = useRoomState();
|
|
215
|
+
|
|
216
|
+
// 主动查询当前录制状态
|
|
217
|
+
const isRecording = currentRoom?.recordingInfo?.status === RecordingStatus.Recording;
|
|
218
|
+
|
|
219
|
+
// 监听录制开始
|
|
220
|
+
subscribeEvent(RoomEvent.onRecordingStarted, ({ operator }) => {
|
|
221
|
+
console.log('录制已开始,操作人:', operator.userId);
|
|
222
|
+
});
|
|
223
|
+
|
|
224
|
+
// 监听录制停止
|
|
225
|
+
subscribeEvent(RoomEvent.onRecordingStopped, ({ operator, reason }) => {
|
|
226
|
+
if (reason === RecordingStopReason.StoppedByUser) {
|
|
227
|
+
console.log('录制已停止,操作人:', operator.userId);
|
|
228
|
+
} else if (reason === RecordingStopReason.RecorderLeftRoom) {
|
|
229
|
+
console.warn('录制异常中断,录制机器人已退出房间,请视需要重新发起录制。');
|
|
230
|
+
}
|
|
231
|
+
});
|
|
232
|
+
```
|
|
233
|
+
|
|
234
|
+
### 错误情况
|
|
235
|
+
|
|
236
|
+
`onRecordingStopped` 事件的 `reason` 字段标识录制停止原因:
|
|
237
|
+
|
|
238
|
+
|**枚举值**|**值**|**说明**|
|
|
239
|
+
|---------|---------|---------|
|
|
240
|
+
|`RecordingStopReason.StoppedByUser`|`0`|房主或管理员主动调用 `stopRecording()` 正常停止。|
|
|
241
|
+
|`RecordingStopReason.RecorderLeftRoom`|`1`|录制机器人异常退出房间,录制中断。建议提示用户并视业务需要决定是否重新发起录制。|
|
|
242
|
+
|
|
243
|
+
> **注意:**
|
|
244
|
+
> - 云端录制功能需提前完成套餐购买、存储服务开通及工单配置,请确认已完成本文**前提条件**中的全部步骤。
|
|
245
|
+
> - 录制文件存储在您配置的云点播(VOD)或对象存储(COS)中,请前往对应控制台查看和管理。
|
|
@@ -0,0 +1,196 @@
|
|
|
1
|
+
本文介绍如何使用 Atomicx API 为自己的会议界面接入白板或屏幕共享批注。
|
|
2
|
+
|
|
3
|
+
先选择您要实现的功能:
|
|
4
|
+
|
|
5
|
+
|目标|是否需要先开启屏幕共享|接入顺序|
|
|
6
|
+
|---------|---------|---------|
|
|
7
|
+
|白板:在空白画布上书写|不需要|显示区域准备好后,调用 `startWhiteboard`|
|
|
8
|
+
|屏幕共享批注:在屏幕共享画面上批注|需要|先调用 `startScreenShare`,再调用 `startWhiteboard`|
|
|
9
|
+
|
|
10
|
+
> **说明:**
|
|
11
|
+
> **接入屏幕共享批注,不需要先接入独立白板。**两种功能都使用 `startWhiteboard` 创建绘制层,但接入流程彼此独立,按您的业务目标选择其中一种即可。
|
|
12
|
+
>
|
|
13
|
+
|
|
14
|
+
## 准备工作
|
|
15
|
+
|
|
16
|
+
开始前,请确认:
|
|
17
|
+
- 用户状态:用户已经通过 `useLoginState` 完成登录鉴权,参见 接入概览,并已作为一个房间的房主或成员在房间内,参考 房间管理。
|
|
18
|
+
|
|
19
|
+
- 环境依赖:项目已正确安装并引入 `tuikit-atomicx-vue3`(Vue 3),版本为 `6.1.0` 或更高
|
|
20
|
+
|
|
21
|
+
- 使用 Windows 或 macOS 桌面端的 Chrome、Edge 最新稳定版本。
|
|
22
|
+
|
|
23
|
+
本文代码中的“显示区域”,就是页面中用来显示白板或共享画面的一个 `<div>`。为它设置 `id` 后,将该 `id` 传给 API 即可。它既决定内容显示在哪里,也决定显示尺寸,不需要额外理解白板内部实现。
|
|
24
|
+
|
|
25
|
+
## 接入白板
|
|
26
|
+
|
|
27
|
+
白板不依赖屏幕共享。准备一个显示区域,并在用户点击“打开白板”时把它的 `id` 传给 `startWhiteboard`:
|
|
28
|
+
``` typescript
|
|
29
|
+
<template>
|
|
30
|
+
<button @click="openWhiteboard">打开白板</button>
|
|
31
|
+
<div id="whiteboard-view" class="content-view" />
|
|
32
|
+
</template>
|
|
33
|
+
|
|
34
|
+
<script setup lang="ts">
|
|
35
|
+
import { useWhiteboardState } from 'tuikit-atomicx-vue3/room';
|
|
36
|
+
|
|
37
|
+
const { startWhiteboard } = useWhiteboardState();
|
|
38
|
+
|
|
39
|
+
async function openWhiteboard() {
|
|
40
|
+
await startWhiteboard({
|
|
41
|
+
view: 'whiteboard-view',
|
|
42
|
+
canvasColor: '#FFFFFF',
|
|
43
|
+
});
|
|
44
|
+
}
|
|
45
|
+
</script>
|
|
46
|
+
|
|
47
|
+
<style scoped>
|
|
48
|
+
.content-view {
|
|
49
|
+
position: relative;
|
|
50
|
+
width: 100%;
|
|
51
|
+
height: 600px;
|
|
52
|
+
background: #fff;
|
|
53
|
+
}
|
|
54
|
+
</style>
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
调用成功后,当前用户可以在该区域绘制,房间内其他成员会实时看到白板画面。
|
|
58
|
+
|
|
59
|
+
## 接入屏幕共享批注
|
|
60
|
+
|
|
61
|
+
屏幕共享批注是在共享画面上增加一层透明的绘制区域。整个流程只有两步:
|
|
62
|
+
1. 把屏幕共享画面显示到页面中的 `<div>`。
|
|
63
|
+
|
|
64
|
+
2. 把同一个 `<div>` 的 `id` 传给 `startWhiteboard`,让笔迹覆盖在共享画面上。
|
|
65
|
+
|
|
66
|
+
以下示例提供“开始共享”和“开启批注”两个按钮:
|
|
67
|
+
|
|
68
|
+
``` typescript
|
|
69
|
+
<template>
|
|
70
|
+
<button @click="shareScreen">开始共享</button>
|
|
71
|
+
<button @click="openAnnotation">开启批注</button>
|
|
72
|
+
<div id="screen-share-view" class="content-view" />
|
|
73
|
+
</template>
|
|
74
|
+
|
|
75
|
+
<script setup lang="ts">
|
|
76
|
+
import {
|
|
77
|
+
DeviceStatus,
|
|
78
|
+
useDeviceState,
|
|
79
|
+
useWhiteboardState,
|
|
80
|
+
} from 'tuikit-atomicx-vue3/room';
|
|
81
|
+
|
|
82
|
+
const { screenStatus, startScreenShare } = useDeviceState();
|
|
83
|
+
const { startWhiteboard } = useWhiteboardState();
|
|
84
|
+
|
|
85
|
+
async function shareScreen() {
|
|
86
|
+
await startScreenShare({
|
|
87
|
+
screenAudio: true,
|
|
88
|
+
view: 'screen-share-view',
|
|
89
|
+
});
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
async function openAnnotation() {
|
|
93
|
+
if (screenStatus.value !== DeviceStatus.On) {
|
|
94
|
+
throw new Error('请先开启屏幕共享');
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
await startWhiteboard({
|
|
98
|
+
view: 'screen-share-view',
|
|
99
|
+
});
|
|
100
|
+
}
|
|
101
|
+
</script>
|
|
102
|
+
|
|
103
|
+
<style scoped>
|
|
104
|
+
.content-view {
|
|
105
|
+
position: relative;
|
|
106
|
+
width: 100%;
|
|
107
|
+
height: 600px;
|
|
108
|
+
}
|
|
109
|
+
</style>
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
## 添加绘制工具
|
|
113
|
+
|
|
114
|
+
白板和屏幕共享批注使用同一套工具 API。将下面的方法连接到您的工具栏按钮即可:
|
|
115
|
+
``` typescript
|
|
116
|
+
import {
|
|
117
|
+
useWhiteboardState,
|
|
118
|
+
WhiteboardTool,
|
|
119
|
+
} from 'tuikit-atomicx-vue3/room';
|
|
120
|
+
|
|
121
|
+
const {
|
|
122
|
+
setToolConfig,
|
|
123
|
+
undo,
|
|
124
|
+
redo,
|
|
125
|
+
clear,
|
|
126
|
+
snapshot,
|
|
127
|
+
} = useWhiteboardState();
|
|
128
|
+
|
|
129
|
+
// 画笔
|
|
130
|
+
setToolConfig({
|
|
131
|
+
tool: WhiteboardTool.Pen,
|
|
132
|
+
color: '#006EFF',
|
|
133
|
+
lineWidth: 4,
|
|
134
|
+
});
|
|
135
|
+
|
|
136
|
+
// 矩形
|
|
137
|
+
setToolConfig({
|
|
138
|
+
tool: WhiteboardTool.Shape,
|
|
139
|
+
shapeType: 'rect',
|
|
140
|
+
color: '#006EFF',
|
|
141
|
+
lineWidth: 4,
|
|
142
|
+
});
|
|
143
|
+
|
|
144
|
+
await undo(); // 撤销
|
|
145
|
+
await redo(); // 重做
|
|
146
|
+
await clear(); // 清空
|
|
147
|
+
const image = await snapshot();
|
|
148
|
+
```
|
|
149
|
+
|
|
150
|
+
可用工具包括:
|
|
151
|
+
|
|
152
|
+
|工具|枚举值|用途|
|
|
153
|
+
|---------|---------|---------|
|
|
154
|
+
|选择|`WhiteboardTool.None`|停止绘制。|
|
|
155
|
+
|画笔|`WhiteboardTool.Pen`|自由书写。|
|
|
156
|
+
|激光笔|`WhiteboardTool.Laser`|短暂停留后自动消失。|
|
|
157
|
+
|形状|`WhiteboardTool.Shape`|通过 `shapeType` 绘制矩形或椭圆。|
|
|
158
|
+
|箭头|`WhiteboardTool.Arrow`|标记方向或重点。|
|
|
159
|
+
|橡皮擦|`WhiteboardTool.EraserObject`|擦除图形对象。|
|
|
160
|
+
|
|
161
|
+
绘制形状时,在同一个配置对象中设置 `shapeType`:`rect` 表示矩形,`ellipse` 表示椭圆。
|
|
162
|
+
|
|
163
|
+
## 隐藏白板和批注入口
|
|
164
|
+
|
|
165
|
+
关闭白板或批注时调用 `stopWhiteboard`:
|
|
166
|
+
``` typescript
|
|
167
|
+
const { stopWhiteboard } = useWhiteboardState();
|
|
168
|
+
|
|
169
|
+
stopWhiteboard();
|
|
170
|
+
```
|
|
171
|
+
|
|
172
|
+
## 更新白板显示区域
|
|
173
|
+
|
|
174
|
+
当需要将白板切换到另一个显示区域时,可调用 `updateWhiteboard` 并传入新的元素 id。
|
|
175
|
+
``` typescript
|
|
176
|
+
const { updateWhiteboard } = useWhiteboardState();
|
|
177
|
+
|
|
178
|
+
updateWhiteboard({ view: 'whiteboard-new-view' });
|
|
179
|
+
```
|
|
180
|
+
|
|
181
|
+
## 使用范围
|
|
182
|
+
- 暂不支持移动端浏览器和研讨会(Webinar)房间。
|
|
183
|
+
|
|
184
|
+
- 当前由发起者绘制,其他成员实时观看,暂不支持多人同时绘制。
|
|
185
|
+
|
|
186
|
+
- 白板与普通屏幕共享使用同一路共享通道,不能同时开启。
|
|
187
|
+
|
|
188
|
+
## 常见问题
|
|
189
|
+
|
|
190
|
+
### 为什么调用 `startWhiteboard` 后页面没有显示内容?
|
|
191
|
+
|
|
192
|
+
请确认调用时已经通过 `view` 传入显示区域的 `id`,并且页面中存在对应的 `<div>`。如果该元素稍后才挂载,请在白板启动后调用 `updateWhiteboard({ view })`。
|
|
193
|
+
|
|
194
|
+
### 白板和普通屏幕共享可以同时开启吗?
|
|
195
|
+
|
|
196
|
+
不可以。白板与普通屏幕共享使用同一路共享通道;屏幕共享批注则是在屏幕共享画面上叠加绘制层,是支持的组合方式。
|
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
## 客户端错误码
|
|
2
|
+
|
|
3
|
+
### 通用错误码
|
|
4
|
+
| 错误码 | 描述 |
|
|
5
|
+
| --- | --- |
|
|
6
|
+
| 0 | 操作成功 |
|
|
7
|
+
| -1 | 暂未归类的通用错误 |
|
|
8
|
+
| -2 | 请求被限频,请稍后重试 |
|
|
9
|
+
| -1000 | 未找到 SDKAppID,请在 <a href="https://console.cloud.tencent.com/vcube/project/manage">腾讯云视立方 SDK 控制台</a> 确认应用信息 |
|
|
10
|
+
| -1001 | 调用 API 时,传入的参数不合法,检查入参是否合法 |
|
|
11
|
+
| -1002 | 未登录,请调用 Login 接口 |
|
|
12
|
+
| -1003 | 获取权限失败,当前未授权音/视频权限,请查看是否开启设备权限 |
|
|
13
|
+
| -1004 | 该功能需要开通额外的套餐,请在 <a href="https://console.cloud.tencent.com/vcube/project/manage">腾讯云视立方 SDK 控制台</a> 按需开通对应套餐 |
|
|
14
|
+
|
|
15
|
+
### 本地用户渲染,视频管理,音频管理 API 回调错误定义
|
|
16
|
+
| 错误码 | 描述 |
|
|
17
|
+
| --- | --- |
|
|
18
|
+
| -1100 | 系统问题,打开摄像头失败。检查摄像头设备是否正常 |
|
|
19
|
+
| -1101 | 摄像头没有系统授权, 检查系统授权 |
|
|
20
|
+
| -1102 | 摄像头被占用,检查是否有其他进程使用摄像头 |
|
|
21
|
+
| -1103 | 当前无摄像头设备,请插入摄像头设备解决该问题 |
|
|
22
|
+
| -1104 | 系统问题,打开麦克风失败。检查麦克风设备是否正常 |
|
|
23
|
+
| -1105 | 麦克风没有系统授权,检查系统授权 |
|
|
24
|
+
| -1106 | 麦克风被占用 |
|
|
25
|
+
| -1107 | 当前无麦克风设备 |
|
|
26
|
+
| -1108 | 获取屏幕分享对象失败,检查屏幕录制权限 |
|
|
27
|
+
| -1109 | 开启屏幕分享失败,检查房间内是否有人正在屏幕分享 |
|
|
28
|
+
|
|
29
|
+
### 房间管理相关 API 回调错误定义
|
|
30
|
+
| 错误码 | 描述 |
|
|
31
|
+
| --- | --- |
|
|
32
|
+
| -2100 | 进房时房间不存在,或许已被解散 |
|
|
33
|
+
| -2101 | 需要进房后才可使用此功能 |
|
|
34
|
+
| -2102 | 房主不支持退房操作,Conference(会议)房间类型: 可以先转让房主,再退房。LivingRoom(直播)房间类型: 房主只能解散房间 |
|
|
35
|
+
| -2103 | 当前房间类型下不支持该操作 |
|
|
36
|
+
| -2104 | 当前发言模式下不支持该操作 |
|
|
37
|
+
| -2105 | 创建房间 ID 非法,自定义 ID 必须为可打印 ASCII 字符(0x20-0x7e),最长48个字节 |
|
|
38
|
+
| -2106 | 房间 ID 已被使用,请选择别的房间 ID |
|
|
39
|
+
| -2107 | 房间名称非法,名称最长30字节,字符编码必须是 UTF-8 ,如果包含中文 |
|
|
40
|
+
| -2108 | 当前用户已在别的房间内,单个 roomEngine 实例只支持用户进入一个房间,如果要进入不同的房间请先退房或者使用新的 roomEngine 实例 |
|
|
41
|
+
|
|
42
|
+
### 房间内用户信息 API 回调错误定义
|
|
43
|
+
| 错误码 | 描述 |
|
|
44
|
+
| --- | --- |
|
|
45
|
+
| -2200 | 未找到该用户 |
|
|
46
|
+
| -2201 | 房间内未找到该用户 |
|
|
47
|
+
|
|
48
|
+
### 房间内用户发言管理 API 回调错误定义&房间内麦位管理 API 回调错误定义
|
|
49
|
+
| 错误码 | 描述 |
|
|
50
|
+
| --- | --- |
|
|
51
|
+
| -2300 | 需要房主权限才能操作 |
|
|
52
|
+
| -2301 | 需要房主或者管理员权限才能操作 |
|
|
53
|
+
| -2310 | 信令请求无权限,比如取消非自己发起的邀请。 |
|
|
54
|
+
| -2311 | 信令请求 ID 无效或已经被处理过。 |
|
|
55
|
+
| -2340 | 最大麦位超出套餐包数量限制 |
|
|
56
|
+
| -2341 | 当前用户已经在麦位上 |
|
|
57
|
+
| -2342 | 当前麦位已经有人了 |
|
|
58
|
+
| -2343 | 当前麦位被锁 |
|
|
59
|
+
| -2344 | 麦位编号不存在 |
|
|
60
|
+
| -2345 | 当前用户没有在麦上 |
|
|
61
|
+
| -2346 | 上麦人数已满 |
|
|
62
|
+
| -2360 | 当前麦位音频被锁 |
|
|
63
|
+
| -2361 | 需要向房主或管理员申请后打开麦克风 |
|
|
64
|
+
| -2370 | 当前麦位视频被锁, 需要由房主解锁麦位后,才能打开摄像头 |
|
|
65
|
+
| -2371 | 需要向房主或管理员申请后打开摄像头 |
|
|
66
|
+
| -2380 | 当前房间已开启全员禁言 |
|
|
67
|
+
| -2381 | 当前房间内,您已被已禁言 |
|
|
68
|
+
|
|
69
|
+
## 服务端错误码
|
|
70
|
+
| 错误码 | 描述 |
|
|
71
|
+
| --- | --- |
|
|
72
|
+
| 83007 | 请求被限频 |
|
|
73
|
+
| 84002 | 房间不存在 |
|
|
74
|
+
| 84003 | 房间内人数已超出最大套餐包限制 |
|
|
75
|
+
| 84004 | 房间不存在该用户 |
|
|
76
|
+
| 84005 | 房间已存在 |
|
|
77
|
+
| 84006 | 房主不能退房 |
|
|
78
|
+
| 85001 | 麦位已满 |
|
|
79
|
+
| 85002 | 麦位被锁定 |
|
|
80
|
+
| 85003 | 用户已上麦 |
|
|
81
|
+
| 85004 | 麦位被使用 |
|
|
82
|
+
| 85005 | 麦位号不存在 |
|
|
83
|
+
| 85006 | 麦位音频被锁定 |
|
|
84
|
+
| 85007 | 麦位视频被锁定 |
|
|
85
|
+
| 85008 | 非直播场景不能使用麦位 |
|
|
86
|
+
| 87001 | 不允许修改成员身份或房间信息 |
|
|
87
|
+
| 87002 | 权限不足,需要房主或管理员身份 |
|
|
88
|
+
| 87003 | IM 群属性更新错误 |
|
|
89
|
+
| 87005 | IM 群属性获取异常 |
|
|
90
|
+
| 87006 | 权限不足,需要房主才可以操作 |
|
|
91
|
+
| 87007 | 权限不足,需要管理员才可以操作 |
|
|
92
|
+
| 87008 | 不允许销毁 IM 房间 |
|
|
93
|
+
| 41001 | 创建 IM 群组错误 |
|
|
94
|
+
| 41002 | 销毁 IM 群组错误 |
|
|
95
|
+
| 41003 | 添加 IM 成员错误 |
|
|
96
|
+
| 41004 | 删除 IM 成员错误 |
|
|
97
|
+
| 41005 | IM 改变角色错误 |
|
|
98
|
+
| 42001 | 预定会议错误 |
|
|
99
|
+
| 42002 | 预定会议无效 |
|
|
100
|
+
| 42003 | 预定会议必须是会议场景 |
|
|
101
|
+
| 42004 | 预定会议未开始 |
|
|
102
|
+
| 42005 | 预定会议已经开始 |
|
|
103
|
+
| 42006 | 预定会议邀请成员太多,超出数量限制 |
|