@tencentcloud/sdk-mcp 1.7.3 → 1.7.5
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 +23 -0
- package/README.md +22 -23
- package/knowledge/path-meta.js +23 -1
- package/package.json +1 -1
- package/resource/index/manifest.json +1 -1
- package/resource/integration/callkit/preset/android/integration.md +4 -0
- package/resource/integration/callkit/preset/flutter/integration.md +8 -4
- package/resource/integration/callkit/preset/ios/integration.md +16 -15
- package/resource/integration/callkit/preset/react/integration.md +2 -2
- package/resource/integration/callkit/preset/vue/integration.md +9 -12
- package/resource/integration/chat/preset/android/integration.md +5 -147
- package/resource/integration/chat/preset/flutter/integration.md +22 -130
- package/resource/integration/chat/preset/ios/integration.md +12 -279
- package/resource/integration/chat/preset/react/integration.md +27 -1
- package/resource/integration/chat/preset/uni-app/integration.md +5 -1
- package/resource/integration/chat/preset/vue/integration.md +21 -31
- package/resource/integration/livekit/preset/live/android/live-host-integration.md +4 -0
- package/resource/integration/livekit/preset/live/ios/live-host-integration.md +4 -0
- package/resource/integration/livekit/preset/live/ios/prepare-integration.md +3 -3
- package/resource/integration/livekit/preset/live/vue/live-list-integration.md +3 -4
- package/resource/integration/livekit/preset/live/vue/live-player-desk-integration.md +0 -1
- package/resource/integration/livekit/preset/live/vue/live-player-h5-integration.md +0 -1
- package/resource/integration/livekit/preset/live/vue/live-pusher-integration.md +4 -9
- package/resource/integration/roomkit/preset/vue/integration.md +152 -652
- package/resource/knowledge/callkit/best-practice/android/video-chat-dating.md +490 -0
- package/resource/knowledge/callkit/best-practice/flutter/android-keep-call-alive-background.md +79 -0
- package/resource/knowledge/callkit/best-practice/flutter/background-incoming-call-no-notification.md +99 -0
- package/resource/knowledge/callkit/best-practice/flutter/ios-keep-call-alive-background.md +93 -0
- package/resource/knowledge/callkit/best-practice/flutter/ios-startup-crash-version-voip.md +68 -0
- package/resource/knowledge/callkit/core-sdk/android/answer-call.md +2 -2
- package/resource/knowledge/callkit/core-sdk/android/make-call.md +5 -5
- package/resource/knowledge/callkit/core-sdk/flutter/answer-call.md +7 -7
- package/resource/knowledge/callkit/core-sdk/flutter/make-call.md +10 -10
- package/resource/knowledge/callkit/core-sdk/flutter/offline-push.md +1 -1
- package/resource/knowledge/callkit/core-sdk/ios/answer-call.md +18 -16
- package/resource/knowledge/callkit/core-sdk/ios/make-call.md +16 -14
- package/resource/knowledge/callkit/core-sdk/miniprogram/call-engine.md +19 -19
- package/resource/knowledge/callkit/core-sdk/miniprogram/call-event.md +16 -16
- package/resource/knowledge/callkit/core-sdk/uni-app/answer-call.md +2 -86
- package/resource/knowledge/callkit/core-sdk/uni-app/make-call.md +2 -104
- package/resource/knowledge/callkit/core-sdk/web/call-event.md +2 -2
- package/resource/knowledge/callkit/faq/android.md +4 -4
- package/resource/knowledge/callkit/faq/common.md +4 -4
- package/resource/knowledge/callkit/faq/error-code.md +62 -36
- package/resource/knowledge/callkit/faq/uniapp-miniprogram.md +1 -1
- package/resource/knowledge/callkit/preset/android/api.md +10 -10
- package/resource/knowledge/callkit/preset/harmonyos/api.md +362 -0
- package/resource/knowledge/callkit/preset/harmonyos/integration.md +322 -0
- package/resource/knowledge/callkit/preset/ios/api.md +9 -9
- package/resource/knowledge/callkit/preset/miniprogram/api-uniapp.md +293 -0
- package/resource/knowledge/callkit/preset/miniprogram/api.md +19 -19
- package/resource/knowledge/callkit/preset/miniprogram/integration.md +292 -0
- package/resource/knowledge/callkit/preset/miniprogram/uniapp-integration.md +521 -0
- package/resource/knowledge/callkit/preset/uni-app/api.md +49 -0
- package/resource/knowledge/callkit/preset/uni-app/integration.md +353 -0
- package/resource/knowledge/chat/preset/android-view/integration.md +54 -102
- package/resource/knowledge/chat/preset/ios/features/language.md +5 -5
- package/resource/knowledge/chat/preset/ios-uikit/integration.md +194 -926
- package/resource/knowledge/chat/preset/react/features/search.md +9 -214
- package/resource/knowledge/chat/preset/react/h5/integration.md +965 -0
- package/resource/knowledge/chat/preset/vue/features/chat-header.md +0 -36
- package/resource/knowledge/chat/preset/vue/features/contact-list.md +0 -34
- package/resource/knowledge/chat/preset/vue/features/conversation-list.md +0 -39
- package/resource/knowledge/chat/preset/vue/features/conversation-preview.md +0 -74
- package/resource/knowledge/chat/preset/vue/features/message-input.md +4 -4
- package/resource/knowledge/chat/preset/vue/features/search.md +9 -790
- package/resource/knowledge/chat/preset/vue/h5/integration.md +724 -0
- package/resource/knowledge/livekit/core-sdk/features/android/audience-list.md +3 -3
- package/resource/knowledge/livekit/core-sdk/features/android/live-list.md +3 -3
- package/resource/knowledge/livekit/core-sdk/features/flutter/audience-list.md +3 -3
- package/resource/knowledge/livekit/core-sdk/features/flutter/live-list.md +3 -3
- package/resource/knowledge/livekit/core-sdk/features/ios/audience-list.md +3 -3
- package/resource/knowledge/livekit/core-sdk/features/ios/live-list.md +3 -3
- package/resource/knowledge/livekit/core-sdk/features/uni-app/audience-list.md +3 -3
- package/resource/knowledge/livekit/core-sdk/features/uni-app/live-list.md +3 -170
- package/resource/knowledge/livekit/core-sdk/live/android/co-guest-interaction.md +1 -1
- package/resource/knowledge/livekit/core-sdk/live/android/host-interaction.md +3 -3
- package/resource/knowledge/livekit/core-sdk/live/flutter/co-guest-interaction.md +1 -1
- package/resource/knowledge/livekit/core-sdk/live/flutter/host-interaction.md +3 -3
- package/resource/knowledge/livekit/core-sdk/live/flutter/integration.md +3 -3
- package/resource/knowledge/livekit/core-sdk/live/ios/co-guest-interaction.md +1 -1
- package/resource/knowledge/livekit/core-sdk/live/ios/host-interaction.md +3 -3
- package/resource/knowledge/livekit/core-sdk/live/ios/integration.md +2 -2
- package/resource/knowledge/livekit/core-sdk/live/uni-app/co-guest-interaction.md +13 -78
- package/resource/knowledge/livekit/core-sdk/live/uni-app/host-interaction.md +5 -70
- package/resource/knowledge/livekit/core-sdk/live/uni-app/integration.md +10 -10
- package/resource/knowledge/livekit/core-sdk/voice/android/co-guest-interaction.md +1 -1
- package/resource/knowledge/livekit/core-sdk/voice/android/host-interaction.md +4 -4
- package/resource/knowledge/livekit/core-sdk/voice/flutter/co-guest-interaction.md +1 -1
- package/resource/knowledge/livekit/core-sdk/voice/ios/co-guest-interaction.md +1 -1
- package/resource/knowledge/livekit/core-sdk/voice/ios/host-interaction.md +4 -4
- package/resource/knowledge/livekit/core-sdk/voice/uni-app/integration.md +7 -7
- package/resource/knowledge/livekit/preset/live/vue/features/barrage.md +1 -24
- package/resource/knowledge/livekit/preset/live/vue/features/live-audience-list.md +0 -3
- package/resource/knowledge/livekit/preset/live/vue/features/live-view.md +0 -5
- package/resource/knowledge/push/api-reference/harmonyos.md +9 -9
- package/resource/knowledge/push/api-reference/unity.md +10 -10
- package/resource/knowledge/push/api-reference/unreal-engine.md +11 -11
- package/resource/knowledge/push/config/donut.md +3 -3
- package/resource/knowledge/push/config/harmonyos.md +12 -12
- package/resource/knowledge/push/config/ios.md +2 -2
- package/resource/knowledge/push/integration/android.md +90 -1067
- package/resource/knowledge/push/integration/donut.md +11 -11
- package/resource/knowledge/push/integration/flutter.md +38 -24
- package/resource/knowledge/push/integration/harmonyos.md +1 -11
- package/resource/knowledge/push/integration/ios.md +29 -40
- package/resource/knowledge/push/integration/react-native.md +1 -1
- package/resource/knowledge/push/integration/uni-app.md +1 -1
- package/resource/knowledge/push/integration/unity.md +4 -4
- package/resource/knowledge/push/integration/unreal-engine.md +9 -9
- package/resource/knowledge/roomkit/core-sdk/android/room-state.md +6 -6
- package/resource/knowledge/roomkit/core-sdk/android/schedule-room.md +13 -13
- package/resource/knowledge/roomkit/core-sdk/flutter/room-state.md +5 -5
- package/resource/knowledge/roomkit/core-sdk/flutter/schedule-room.md +4 -4
- package/resource/knowledge/roomkit/core-sdk/ios/room-state.md +6 -6
- package/resource/knowledge/roomkit/core-sdk/ios/schedule-room.md +4 -4
- package/resource/knowledge/roomkit/core-sdk/vue/device-detection.md +0 -9
- package/resource/knowledge/roomkit/core-sdk/vue/free-beauty-panel.md +0 -9
- package/resource/knowledge/roomkit/core-sdk/vue/recording.md +3 -3
- package/resource/knowledge/roomkit/core-sdk/vue/room-chat.md +0 -3
- package/resource/knowledge/roomkit/core-sdk/vue/room-view.md +0 -16
- package/resource/knowledge/roomkit/core-sdk/vue/schedule-room.md +0 -3
- package/resource/knowledge/roomkit/core-sdk/vue/virtual-background.md +3 -6
- package/resource/knowledge/roomkit/core-sdk/vue/whiteboard-annotation.md +0 -15
- package/resource/knowledge/roomkit/preset/android/integration.md +5 -202
- package/resource/knowledge/roomkit/preset/flutter/integration.md +17 -13
- package/resource/knowledge/roomkit/preset/harmonyos/integration.md +10 -2
- package/resource/knowledge/roomkit/preset/ios/integration.md +7 -204
- package/resource/knowledge/roomkit/preset/react/integration.md +0 -202
- package/resource/knowledge/roomkit/preset/uniapp-app/integration.md +244 -500
- package/resource/knowledge/rtcengine/web/plugin/42-advanced-realtime-transcriber.md +25 -6
- package/server.js +1 -1
- package/utils/preflight-route.js +203 -185
- package/utils/report-cls-client.js +1 -1
- package/utils/report-es-client.js +1 -1
|
@@ -0,0 +1,521 @@
|
|
|
1
|
+
本文将介绍如何快速接入 TUICallKit 组件。您可以在 10 分钟内完成以下关键步骤,最终获得一个功能完备的音视频通话界面。
|
|
2
|
+
|
|
3
|
+
## 准备工作
|
|
4
|
+
|
|
5
|
+
### 环境要求
|
|
6
|
+
- 微信 App iOS 最低版本要求:8.0.40。
|
|
7
|
+
|
|
8
|
+
- 微信 App Android 最低版本要求:8.0.40。
|
|
9
|
+
|
|
10
|
+
- 小程序基础库最低版本要求:2.10.0。
|
|
11
|
+
|
|
12
|
+
> **注意:**
|
|
13
|
+
>
|
|
14
|
+
> - 由于小程序测试号不具备 <live-pusher> 和 <live-player> 的使用权限,请使用**企业小程序账号**申请相关权限进行开发。
|
|
15
|
+
> - 由于微信开发者工具不支持原生组件(即 <live-pusher> 和 <live-player> 标签),需要在**真机**上进行运行体验。
|
|
16
|
+
> - **不支持企业微信小程序**。
|
|
17
|
+
|
|
18
|
+
### 开通服务
|
|
19
|
+
|
|
20
|
+
在使用腾讯云提供的音视频服务前,您需要前往控制台,为应用开通音视频服务。具体步骤详见 [开通服务](https://cloud.tencent.com/document/product/647/104662)。开通服务后,请记录 `SDKAppID、SecretKey`,在后续的步骤中会用到。
|
|
21
|
+
|
|
22
|
+
### 开通企业类小程序
|
|
23
|
+
|
|
24
|
+
### 在小程序控制台开启实时音视频接口
|
|
25
|
+
- 小程序推拉流标签使用权限暂时只开放给有限类目,[具体支持类目参见该地址](https://developers.weixin.qq.com/miniprogram/dev/component/live-pusher.html#%E7%94%B3%E8%AF%B7%E5%BC%80%E9%80%9A)。
|
|
26
|
+
|
|
27
|
+
- 符合类目要求的小程序,需要在 [微信公众平台](https://mp.weixin.qq.com/) > **开发** > **开发管理** > **接口设置**中自助开通该组件权限。
|
|
28
|
+
|
|
29
|
+
- 登录小程序控制台更新隐私保护政策,勾选**麦克风**、**摄像头**。
|
|
30
|
+
|
|
31
|
+
### 在小程序控制台配置域名
|
|
32
|
+
|
|
33
|
+
在 [微信公众平台](https://mp.weixin.qq.com/) > **开发** > **开发管理** > **开发设置** > **服务器域名**中设置 **request 合法域名**和 **socket 合法域名**。
|
|
34
|
+
|
|
35
|
+
- 将以下域名添加到 socket 合法域名:
|
|
36
|
+
|
|
37
|
+
| 域名 | 说明 | 是否必须 |
|
|
38
|
+
| --- | --- | --- |
|
|
39
|
+
| <code>wss://${SDKAppID}w4c.my-imcloud.com</code> | v3.4.6起,SDK 支持独立域名,可更好地保障服务稳定性。<br>例如您的 SDKAppID 是 1400xxxxxx,则独立域名为: <code>wss://1400xxxxxxw4c.my-imcloud.com</code> | 必须 |
|
|
40
|
+
| <code>wss://wss.im.qcloud.com</code> | Web IM 业务域名 | 必须 |
|
|
41
|
+
| <code>wss://wss.tim.qq.com</code> | Web IM 业务域名 | 必须 |
|
|
42
|
+
| <code>wss://wssv6.im.qcloud.com</code> | Web IM 业务域名 | 必须 |
|
|
43
|
+
|
|
44
|
+
- 将以下域名添加到 request 合法域名:
|
|
45
|
+
|
|
46
|
+
|域名|说明|是否必须|
|
|
47
|
+
|---------|---------|---------|
|
|
48
|
+
|`https://web.sdk.qcloud.com`|Web IM 业务域名|必须|
|
|
49
|
+
|`https://boce-cdn.my-imcloud.com`|Web IM 业务域名|必须|
|
|
50
|
+
|`https://api.im.qcloud.com`|Web IM 业务域名|必须|
|
|
51
|
+
|`https://events.im.qcloud.com`|Web IM 业务域名|必须|
|
|
52
|
+
|`https://webim.tim.qq.com`|Web IM 业务域名|必须|
|
|
53
|
+
|`https://wss.im.qcloud.com`|Web IM 业务域名|必须|
|
|
54
|
+
|`https://wss.tim.qq.com`|Web IM 业务域名|必须|
|
|
55
|
+
|
|
56
|
+
- 将以下域名添加到 uploadFile 合法域名:
|
|
57
|
+
|
|
58
|
+
| 域名 | 说明 | 是否必须 |
|
|
59
|
+
| --- | --- | --- |
|
|
60
|
+
| <code>https://${SDKAppID}-cn.rich.my-imcloud.com</code> | 从 2024年9月10日起,新增应用默认分配 COS 独立域名。<br>例如您的 SDKAppID 是 1400xxxxxx,则 COS 独立域名为:<code>https://1400xxxxxx-cn.rich.my-imcloud.com</code> | 必须 |
|
|
61
|
+
| <code>https://cn.rich.my-imcloud.com</code> | 文件上传域名 | 必须 |
|
|
62
|
+
| <code>https://cn.imrich.qcloud.com</code> | 文件上传域名 | 必须 |
|
|
63
|
+
| <code>https://cos.ap-shanghai.myqcloud.com</code> | 文件上传域名 | 必须 |
|
|
64
|
+
| <code>https://cos.ap-shanghai.tencentcos.cn</code> | 文件上传域名 | 必须 |
|
|
65
|
+
| <code>https://cos.ap-guangzhou.myqcloud.com</code> | 文件上传域名 | 必须 |
|
|
66
|
+
|
|
67
|
+
- 将以下域名添加到 downloadFile 合法域名:
|
|
68
|
+
|
|
69
|
+
| 域名 | 说明 | 是否必须 |
|
|
70
|
+
| --- | --- | --- |
|
|
71
|
+
| <code>https://${SDKAppID}-cn.rich.my-imcloud.com</code> | 从 2024年9月10日起,新增应用默认分配 COS 独立域名。<br>例如您的 SDKAppID 是 1400xxxxxx,则 COS 独立域名为:<code>https://1400xxxxxx-cn.rich.my-imcloud.com</code> | 必须 |
|
|
72
|
+
| <code>https://cn.rich.my-imcloud.com</code> | 文件下载域名 | 必须 |
|
|
73
|
+
| <code>https://cn.imrich.qcloud.com</code> | 文件下载域名 | 必须 |
|
|
74
|
+
| <code>https://cos.ap-shanghai.myqcloud.com</code> | 文件下载域名 | 必须 |
|
|
75
|
+
| <code>https://cos.ap-shanghai.tencentcos.cn</code> | 文件下载域名 | 必须 |
|
|
76
|
+
| <code>https://cos.ap-guangzhou.myqcloud.com</code> | 文件下载域名 | 必须 |
|
|
77
|
+
|
|
78
|
+
## 快速接入
|
|
79
|
+
|
|
80
|
+
> **说明:**
|
|
81
|
+
> **Demo**:[GitHub 完整 Demo](https://github.com/Tencent-RTC/TUIKit_uni-app/tree/main/MiniProgram) 开箱即用,3 分钟跑通音视频通话全功能。
|
|
82
|
+
>
|
|
83
|
+
|
|
84
|
+
### 步骤1:创建小程序项目(可选)
|
|
85
|
+
|
|
86
|
+
> **注意:**
|
|
87
|
+
> TUICallKit 组件支持 HBuilderX 和 CLI 脚手架两种集成方式。
|
|
88
|
+
>
|
|
89
|
+
|
|
90
|
+
【HbuilderX】
|
|
91
|
+
1. 在 HBuilder 中创建小程序项目。
|
|
92
|
+
|
|
93
|
+
2. 在终端输入 `npm init -y`,创建 **package.json** 文件。
|
|
94
|
+
|
|
95
|
+
``` bash
|
|
96
|
+
npm init -y
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
【CLI 脚手架】
|
|
100
|
+
1. 全局安装 vue-cli:
|
|
101
|
+
|
|
102
|
+
``` javascript
|
|
103
|
+
npm install -g @vue/cli
|
|
104
|
+
```
|
|
105
|
+
2. 通过 CLI 创建项目:
|
|
106
|
+
|
|
107
|
+
【Vue3(推荐)】
|
|
108
|
+
|
|
109
|
+
【创建 js 项目(推荐)】
|
|
110
|
+
``` bash
|
|
111
|
+
npx degit dcloudio/uni-preset-vue#vite chat-example
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
【创建 ts 项目】
|
|
115
|
+
``` bash
|
|
116
|
+
npx degit dcloudio/uni-preset-vue#vite-ts chat-example
|
|
117
|
+
```
|
|
118
|
+
|
|
119
|
+
【Vue2】
|
|
120
|
+
|
|
121
|
+
推荐选择 **TypeScript** 模板创建项目。
|
|
122
|
+
``` bash
|
|
123
|
+
vue create -p dcloudio/uni-preset-vue chat-example
|
|
124
|
+
```
|
|
125
|
+
3. 创建完成后,切换到项目所在目录:
|
|
126
|
+
|
|
127
|
+
``` bash
|
|
128
|
+
cd chat-example
|
|
129
|
+
```
|
|
130
|
+
|
|
131
|
+
### 步骤2:下载 TUICallKit 组件
|
|
132
|
+
1. 下载组件。
|
|
133
|
+
|
|
134
|
+
【Vue3】
|
|
135
|
+
``` bash
|
|
136
|
+
npm i @trtc/calls-uikit-wx-uniapp
|
|
137
|
+
```
|
|
138
|
+
|
|
139
|
+
【Vue2】
|
|
140
|
+
``` bash
|
|
141
|
+
npm i @trtc/calls-uikit-wx-uniapp unplugin-vue2-script-setup @vue/composition-api
|
|
142
|
+
```
|
|
143
|
+
|
|
144
|
+
2. 拷贝源码。
|
|
145
|
+
|
|
146
|
+
【HbuilderX】
|
|
147
|
+
|
|
148
|
+
【MacOS 端】
|
|
149
|
+
``` bash
|
|
150
|
+
mkdir -p ./TUICallKit && cp -r node_modules/@trtc/calls-uikit-wx-uniapp/TUICallKit/* ./TUICallKit/
|
|
151
|
+
```
|
|
152
|
+
|
|
153
|
+
【Windows 端】
|
|
154
|
+
``` bash
|
|
155
|
+
xcopy node_modules\@trtc\calls-uikit-wx-uniapp\TUICallKit .\TUICallKit /i /e
|
|
156
|
+
```
|
|
157
|
+
|
|
158
|
+
【CLI 脚手架】
|
|
159
|
+
|
|
160
|
+
【MacOS 端】
|
|
161
|
+
``` bash
|
|
162
|
+
mkdir -p ./TUICallKit && cp -r node_modules/@trtc/calls-uikit-wx-uniapp/TUICallKit/* ./src/TUICallKit
|
|
163
|
+
```
|
|
164
|
+
|
|
165
|
+
【Windows 端】
|
|
166
|
+
``` bash
|
|
167
|
+
xcopy node_modules\@trtc\calls-uikit-wx-uniapp\TUICallKit .\src\TUICallKit /i /e
|
|
168
|
+
```
|
|
169
|
+
|
|
170
|
+
### 步骤3:工程配置
|
|
171
|
+
|
|
172
|
+
#### 1. 配置页面路由
|
|
173
|
+
|
|
174
|
+
在 `pages.json` 文件注册全局监听页面。在原有代码中追加如下配置。
|
|
175
|
+
``` json
|
|
176
|
+
{
|
|
177
|
+
"path": "TUICallKit/components/CallView/CallView",
|
|
178
|
+
"style": {
|
|
179
|
+
"navigationBarTitleText": "uni-app"
|
|
180
|
+
}
|
|
181
|
+
},
|
|
182
|
+
{
|
|
183
|
+
"path": "TUICallKit/plugin/groupCall/components/GroupCallView",
|
|
184
|
+
"style": {
|
|
185
|
+
"navigationBarTitleText": "uni-app"
|
|
186
|
+
}
|
|
187
|
+
}
|
|
188
|
+
```
|
|
189
|
+
|
|
190
|
+
#### 2. 修改 **vue.config.js** 文件(Vue3 项目请忽略)
|
|
191
|
+
|
|
192
|
+
修改 **vue.config.js 文件,进行** `unplugin-vue2-script-setup` 插件的使用,若没有 **vue.config.js 文件请新建**。
|
|
193
|
+
``` javascript
|
|
194
|
+
const ScriptSetup = require('unplugin-vue2-script-setup/webpack').default;
|
|
195
|
+
module.exports = {
|
|
196
|
+
parallel: false,
|
|
197
|
+
configureWebpack: {
|
|
198
|
+
plugins: [
|
|
199
|
+
ScriptSetup({}),
|
|
200
|
+
],
|
|
201
|
+
resolve: {
|
|
202
|
+
// Prevent webpack from following pnpm symlinks to their real .pnpm store
|
|
203
|
+
// paths. UniApp's compiler uses the resolved path to generate component
|
|
204
|
+
// references in the output JSON. Without this, it produces unresolvable
|
|
205
|
+
// paths like `node-modules/.pnpm/@tencentcloud+trtc-component-uniapp@.../...`.
|
|
206
|
+
symlinks: false,
|
|
207
|
+
},
|
|
208
|
+
},
|
|
209
|
+
chainWebpack(config) {
|
|
210
|
+
config.plugins.delete('fork-ts-checker');
|
|
211
|
+
},
|
|
212
|
+
};
|
|
213
|
+
```
|
|
214
|
+
|
|
215
|
+
#### 3. 修改 **main.js** 文件(Vue3 项目请忽略)
|
|
216
|
+
|
|
217
|
+
修改 **main.js** 文件,进行 `@vue/composition-api` 插件的使用。
|
|
218
|
+
``` javascript
|
|
219
|
+
import vueComposition from "@vue/composition-api"
|
|
220
|
+
Vue.use(vueComposition)
|
|
221
|
+
```
|
|
222
|
+
|
|
223
|
+
### 步骤4:登录组件
|
|
224
|
+
|
|
225
|
+
> **说明:**
|
|
226
|
+
> - 如果您的应用要求用户启动后必须立即登录,建议将登录初始化代码放置在应用入口组件(例如 App.vue)的 onLaunch 生命周期钩子中。
|
|
227
|
+
> - 如果您的应用有一个明确的登录按钮,则这段代码应作为该按钮的 onClick 或 @click 事件的处理函数。
|
|
228
|
+
|
|
229
|
+
``` javascript
|
|
230
|
+
import { useLoginState } from '../../TUICallKit/states/LoginState';
|
|
231
|
+
|
|
232
|
+
const { login } = useLoginState();
|
|
233
|
+
|
|
234
|
+
const loginHandler = async () => {
|
|
235
|
+
const userID = 'denny'; // 请替换为您的 UserID
|
|
236
|
+
const SDKAppID = 1400000001; // 请替换为开通服务控制台的 SDKAppID
|
|
237
|
+
await login({
|
|
238
|
+
userId: userID,
|
|
239
|
+
userSig: 'xxxxxxxxxxx', // 您可以在控制台中计算一个 UserSig 并填在这个位置
|
|
240
|
+
sdkAppId: SDKAppID,
|
|
241
|
+
});
|
|
242
|
+
wx.$globalCallPagePath = 'TUICallKit/components/CallView/CallView'; // 配置全局监听页面路径
|
|
243
|
+
};
|
|
244
|
+
```
|
|
245
|
+
|
|
246
|
+
**登录接口参数说明**
|
|
247
|
+
| 参数 | 类型 | 说明 |
|
|
248
|
+
| --- | --- | --- |
|
|
249
|
+
| SDKAppID | Number | 从 <a href="https://console.cloud.tencent.com/trtc">TRTC 控制台 > 应用管理</a> 获取。 |
|
|
250
|
+
| userID | String | 当前用户的唯一 ID,仅包含英文字母、数字、连字符和下划线。 |
|
|
251
|
+
| userSig | String | 用于腾讯云鉴权的票据。请注意:<br>- 开发环境:您可以采用本地 <code>GenerateTestUserSig.genTestSig</code> 函数生成 UserSig 或者通过 <a href="https://console.cloud.tencent.com/im/tool-usersig">UserSig 辅助工具</a> 生成临时的 UserSig。<br>- 生产环境:为了防止密钥泄露,请务必采用服务端生成 UserSig 的方式。详细信息请参见 服务端生成 UserSig。<br>更多信息请参见 <a href="https://cloud.tencent.com/document/product/647/17275#formal">如何计算及使用 UserSig</a>。 |
|
|
252
|
+
|
|
253
|
+
### 步骤5:发起通话
|
|
254
|
+
|
|
255
|
+
拨打方可以通过调用 [calls](https://cloud.tencent.com/document/product/647/78760#calls) 函数,并指定通话类型和被叫方的 userID,来发起语音或视频通话。`calls` 接口同时支持一对一通话和多人通话。当 userIDList 中包含一个 userID 时,为一对一通话;当 userIDList 包含多个 userID 时,则为多人通话。
|
|
256
|
+
``` javascript
|
|
257
|
+
import { useCallListState } from '../../TUICallKit/states/CallListState';
|
|
258
|
+
|
|
259
|
+
const { calls } = useCallListState();
|
|
260
|
+
|
|
261
|
+
const callHandler = async () => {
|
|
262
|
+
await calls({
|
|
263
|
+
userIDList: ['mike'], // 请输入被呼叫用户的 userID(需确保该用户已完成一次登录),当前仅支持一对一通话
|
|
264
|
+
type: 2, // 通话类型:1: 语音通话 2: 视频通话
|
|
265
|
+
});
|
|
266
|
+
};
|
|
267
|
+
```
|
|
268
|
+
|
|
269
|
+
### 步骤6:接听通话
|
|
270
|
+
|
|
271
|
+
接听端完成登录后,拨打端发起通话,接收端就可以收到通话邀请,同时伴随铃声。
|
|
272
|
+
|
|
273
|
+
【HbuilderX】
|
|
274
|
+
|
|
275
|
+
【Cli 脚手架】
|
|
276
|
+
1. 以编译开发模式的微信小程序为例(**编译至其他平台
|
|
277
|
+
|
|
278
|
+
``` bash
|
|
279
|
+
npm run build:mp-weixin
|
|
280
|
+
```
|
|
281
|
+
2. 编译成功后,启动微信开发者工具导入到 `dist/build/mp-weixin` 目录。
|
|
282
|
+
|
|
283
|
+
> **注意:**
|
|
284
|
+
> 第一次使用小程序通话,需要获取摄像头和麦克风权限。
|
|
285
|
+
>
|
|
286
|
+
|
|
287
|
+
## 更多功能
|
|
288
|
+
|
|
289
|
+
### 设置昵称和头像
|
|
290
|
+
|
|
291
|
+
首次登录的用户没有头像和昵称信息,您可以通过 setSelfInfo 接口设置头像和昵称。
|
|
292
|
+
``` typescript
|
|
293
|
+
try {
|
|
294
|
+
await TUICallKitAPI.setSelfInfo({
|
|
295
|
+
nickName: "jack",
|
|
296
|
+
avatar: "http://xxx",
|
|
297
|
+
});
|
|
298
|
+
} catch (error: any) {
|
|
299
|
+
alert(`[TUICallKit] Failed to call the setSelfInfo API. Reason: ${error}`);
|
|
300
|
+
}
|
|
301
|
+
```
|
|
302
|
+
|
|
303
|
+
> **注意:**
|
|
304
|
+
> 因为用户隐私限制,非好友之间的通话,被叫的昵称和头像更新可能会有延迟,一次通话成功后就会顺利更新。
|
|
305
|
+
>
|
|
306
|
+
|
|
307
|
+
### 铃声设置
|
|
308
|
+
|
|
309
|
+
您可通过以下方式设置默认铃声、来电静音模式。
|
|
310
|
+
- **设置默认铃声:**通过 [setCallingBell](https://cloud.tencent.com/document/product/647/78760#setCallingBell) 接口设置被叫端收到的来电铃声。
|
|
311
|
+
|
|
312
|
+
> **注意:**
|
|
313
|
+
>
|
|
314
|
+
> 传入本地铃声文件应为相对当前小程序项目的绝对路径。
|
|
315
|
+
>
|
|
316
|
+
|
|
317
|
+
``` typescript
|
|
318
|
+
try {
|
|
319
|
+
await TUICallKitAPI.setCallingBell('/static/ring.mp3'); // 相对当前小程序项目的绝对路径
|
|
320
|
+
} catch (error: any) {
|
|
321
|
+
alert(`[TUICallKit] setCallingBell API failed. Reason: ${error}`);
|
|
322
|
+
}
|
|
323
|
+
```
|
|
324
|
+
- **来电静音模式:**您可以通过 enableMuteMode 设置静音模式。
|
|
325
|
+
|
|
326
|
+
``` javascript
|
|
327
|
+
try {
|
|
328
|
+
await TUICallKitAPI.enableMuteMode(enable: boolean);
|
|
329
|
+
} catch (error: any) {
|
|
330
|
+
alert(`[TUICallKit] enableMuteMode API failed. Reason: ${error}`);
|
|
331
|
+
}
|
|
332
|
+
```
|
|
333
|
+
|
|
334
|
+
### 开启悬浮窗功能
|
|
335
|
+
|
|
336
|
+
> **说明:**
|
|
337
|
+
>
|
|
338
|
+
> 悬浮窗功能是 `TUICallKit` 提供的通话最小化能力。该功能仅能用在将 `TUICallKit` 组件挂载到您自己的业务页面场景下使用,不能用在全局唤醒通话的场景下。
|
|
339
|
+
>
|
|
340
|
+
> 开启后,通话中点击最小化按钮可将通话界面缩小为悬浮窗,自由拖拽且不影响底层页面操作;点击悬浮窗即可恢复全屏通话。推荐在业务页面中集成。
|
|
341
|
+
>
|
|
342
|
+
|
|
343
|
+
- **修改业务页面:**在您的业务页面中完成以下改动:
|
|
344
|
+
|
|
345
|
+
``` typescript
|
|
346
|
+
// ===== <template> 新增(与业务内容同级) =====
|
|
347
|
+
<view v-if="isInCall" class="call-overlay">
|
|
348
|
+
<CallView />
|
|
349
|
+
<GroupCallView />
|
|
350
|
+
</view>
|
|
351
|
+
|
|
352
|
+
// ===== <script> 新增 =====
|
|
353
|
+
import CallView from '../../TUICallKit/components/CallView/CallView.vue';
|
|
354
|
+
import GroupCallView from '../../TUICallKit/plugin/groupCall/components/GroupCallView.vue';
|
|
355
|
+
import { useCallParticipantState } from '../../TUICallKit/states/CallParticipantState';
|
|
356
|
+
import { CallStatus } from '../../TUICallKit/constants/call';
|
|
357
|
+
|
|
358
|
+
const { callParticipantInfo } = useCallParticipantState();
|
|
359
|
+
const isInCall = computed(() => {
|
|
360
|
+
const status = callParticipantInfo.value.selfInfo?.status;
|
|
361
|
+
return status === CallStatus.CALLING || status === CallStatus.CONNECTED;
|
|
362
|
+
});
|
|
363
|
+
|
|
364
|
+
// ===== <style> 新增 =====
|
|
365
|
+
.call-overlay {
|
|
366
|
+
position: fixed;
|
|
367
|
+
top: 0; left: 0;
|
|
368
|
+
width: 100vw; height: 100vh;
|
|
369
|
+
z-index: 1000;
|
|
370
|
+
pointer-events: none;
|
|
371
|
+
}
|
|
372
|
+
```
|
|
373
|
+
|
|
374
|
+
> **注意:**
|
|
375
|
+
>
|
|
376
|
+
> `pointer-events: none` 不可省略,否则最小化后浮层会拦截底层页面的触摸事件。
|
|
377
|
+
>
|
|
378
|
+
|
|
379
|
+
- **启用悬浮窗**。回到 步骤 4 的登录逻辑,将 `wx.$globalCallPagePath = '...'` 替换为以下内容:
|
|
380
|
+
|
|
381
|
+
``` typescript
|
|
382
|
+
TUICallKitAPI.enableFloatWindow(true);
|
|
383
|
+
```
|
|
384
|
+
- **移除** `pages.json` **中的通话页面注册**。开启悬浮窗后不再需要页面跳转路由,删除以下两项:
|
|
385
|
+
|
|
386
|
+
``` json
|
|
387
|
+
{
|
|
388
|
+
"pages": [
|
|
389
|
+
// 删除以下两项
|
|
390
|
+
// { "path": "TUICallKit/components/CallView/CallView", ... },
|
|
391
|
+
// { "path": "TUICallKit/plugin/groupCall/components/GroupCallView", ... }
|
|
392
|
+
]
|
|
393
|
+
}
|
|
394
|
+
```
|
|
395
|
+
|
|
396
|
+
### 组件体积速查与插件裁剪指南
|
|
397
|
+
|
|
398
|
+
`TUICallkit` 组件接入后以下的功能模块是全量集成的,您可以按需进行裁剪。
|
|
399
|
+
| <strong>功能模块</strong> | <strong>自身大小</strong> | <strong>备注</strong> |
|
|
400
|
+
| --- | --- | --- |
|
|
401
|
+
| <strong>核心通话引擎(必选)</strong> | <strong>375 KB</strong> | 若您的项目中已经集成了 <a href="https://cloud.tencent.com/document/product/269/117335">聊天能力</a>,则使用<strong>核心通话引擎带来的体积增量为 122 KB</strong>。 |
|
|
402
|
+
| <strong>1v1 单人通话功能(必选)</strong> | <strong>111 KB</strong> | - |
|
|
403
|
+
| <strong>铃声插件(可裁剪)</strong> | <strong>23 KB</strong> | <strong>移除铃声插件方式:</strong><br>删除项目中的这行注册代码(在项目中搜索如下代码即可):<br><code>this.registerPlugin(useRingPlugin())</code> |
|
|
404
|
+
| <strong>多人通话插件(可裁剪)</strong> | <strong>27 KB</strong> | <strong>移除多人通话插件方式:</strong><br>- 删除注册代码(在项目中搜索如下代码即可):<code>this.registerPlugin(useGroupCallPlugin())</code>;<br>- 在 <code>pages.json</code> 中删除多人通话页面注册(<code>path</code> 含 GroupCallView 的项)。 |
|
|
405
|
+
|
|
406
|
+
## 自定义您的 UI
|
|
407
|
+
|
|
408
|
+
### 替换图标按钮
|
|
409
|
+
|
|
410
|
+
您可以直接修改 `TUICallKit/Components/assets` 文件夹下的图标组件,以确保整个应用中的图标色调风格保持一致,请在替换时保持图标文件的名字不变。
|
|
411
|
+
|
|
412
|
+
> **注意:**
|
|
413
|
+
> **v3.2.2+ 支持。**
|
|
414
|
+
>
|
|
415
|
+
|
|
416
|
+
|序号|资源路径|
|
|
417
|
+
|---------|---------|
|
|
418
|
+
|1|/TUICallKit/Components/assets/button/mobile/minimize.svg|
|
|
419
|
+
|2|/TUICallKit/Components/assets/button/hangup.svg|
|
|
420
|
+
|3|/TUICallKit/Components/assets/button/accept.svg|
|
|
421
|
+
|4|/TUICallKit/Components/assets/button/microphone-open.svg|
|
|
422
|
+
|5|/TUICallKit/Components/assets/button/speaker-open.svg|
|
|
423
|
+
|6|/TUICallKit/Components/assets/button/camera-close.svg|
|
|
424
|
+
|7|/TUICallKit/Components/assets/button/switchCamera.svg|
|
|
425
|
+
|
|
426
|
+
### 隐藏按钮
|
|
427
|
+
|
|
428
|
+
调用 hideFeatureButton 接口隐藏按钮,目前支持 Camera、Microphone、SwitchCamera、InviteUser,具体看枚举类型 FeatureButton。
|
|
429
|
+
|
|
430
|
+
> **注意:**
|
|
431
|
+
> **v3.2.9+ 支持**。
|
|
432
|
+
>
|
|
433
|
+
|
|
434
|
+
以隐藏**摄像头按钮**为例。
|
|
435
|
+
|
|
436
|
+
``` javascript
|
|
437
|
+
// 替换成 TUICallKit 源码中的地址
|
|
438
|
+
import { TUICallKitAPI, FeatureButton } from "../../TUICallKit/index";
|
|
439
|
+
|
|
440
|
+
TUICallKitAPI.hideFeatureButton(FeatureButton.Camera);
|
|
441
|
+
```
|
|
442
|
+
|
|
443
|
+
### 自定义通话背景图
|
|
444
|
+
|
|
445
|
+
通话背景图会在语音通话或者视频通话关闭摄像头后出现,通过调用 setLocalViewBackgroundImage 修改本地用户通话界面背景图,setRemoteViewBackgroundImage 修改远端用户通话界面背景图。
|
|
446
|
+
|
|
447
|
+
> **注意:**
|
|
448
|
+
> **v3.2.9+ 支持**。
|
|
449
|
+
>
|
|
450
|
+
|
|
451
|
+
``` javascript
|
|
452
|
+
import { TUICallKitAPI } from "../../TUICallKit/index";
|
|
453
|
+
|
|
454
|
+
TUICallKitAPI.setLocalViewBackgroundImage('http://xxx.png');
|
|
455
|
+
TUICallKitAPI.setRemoteViewBackgroundImage('remoteUserId', 'http://xxx.png');
|
|
456
|
+
```
|
|
457
|
+
|
|
458
|
+
## 常见问题
|
|
459
|
+
|
|
460
|
+
如果您的接入和使用中遇到问题,请参见 [常见问题](https://cloud.tencent.com/document/product/647/78769)。
|
|
461
|
+
|
|
462
|
+
### Vue2 iOS 小程序播放铃声没有声音?
|
|
463
|
+
|
|
464
|
+
Vue2 的铃声播放只支持线上地址,可以在 `TUICallKit/plugin/ring/index.ts` 中,将本地的相对路径地址改为您的铃声线上地址。
|
|
465
|
+
|
|
466
|
+
### Vue2 & Vue3 缺少 sass 预处理器报错:Preprocessor dependency "sass" not found. Did you install it?
|
|
467
|
+
|
|
468
|
+
请按照以下步骤操作:
|
|
469
|
+
``` javascript
|
|
470
|
+
npm install sass --save-dev
|
|
471
|
+
```
|
|
472
|
+
|
|
473
|
+
### Vue2 & Vue3 装饰器报错: Transforming JavaScript decorators to the configured target environment is not supported yet
|
|
474
|
+
|
|
475
|
+
可在 tsconfig.json 中添加相关配置,示例:
|
|
476
|
+
``` json
|
|
477
|
+
{
|
|
478
|
+
"compilerOptions": {
|
|
479
|
+
"experimentalDecorators": true
|
|
480
|
+
}
|
|
481
|
+
}
|
|
482
|
+
```
|
|
483
|
+
|
|
484
|
+
### Vue2 项目报错 TS 编译器类型检查错误
|
|
485
|
+
|
|
486
|
+
- `main.js` 中引入组合式 API。
|
|
487
|
+
|
|
488
|
+
``` javascript
|
|
489
|
+
import VueCompositionAPI from "@vue/composition-api";
|
|
490
|
+
Vue.use(VueCompositionAPI);
|
|
491
|
+
```
|
|
492
|
+
- 安装 `unplugin-vue2-script-setup` 依赖。
|
|
493
|
+
|
|
494
|
+
``` bash
|
|
495
|
+
npm i unplugin-vue2-script-setup
|
|
496
|
+
```
|
|
497
|
+
- 新建或修改项目根目录的 `vue.config.js` 文件。
|
|
498
|
+
|
|
499
|
+
``` javascript
|
|
500
|
+
const ScriptSetup = require('unplugin-vue2-script-setup/webpack').default;
|
|
501
|
+
module.exports = {
|
|
502
|
+
parallel: false,
|
|
503
|
+
configureWebpack: {
|
|
504
|
+
plugins: [
|
|
505
|
+
ScriptSetup({}),
|
|
506
|
+
],
|
|
507
|
+
},
|
|
508
|
+
chainWebpack(config) {
|
|
509
|
+
config.plugins.delete('fork-ts-checker'); // disable type check and let `vue-tsc` handles it
|
|
510
|
+
},
|
|
511
|
+
};
|
|
512
|
+
```
|
|
513
|
+
|
|
514
|
+
### 如何适配通过 CLI 创建 `Vue2` 的 `JS` 项目?
|
|
515
|
+
|
|
516
|
+
按照本文的步骤集成后,需要在项目的根目录下执行:
|
|
517
|
+
``` bash
|
|
518
|
+
vue add typescript
|
|
519
|
+
```
|
|
520
|
+
|
|
521
|
+
按照如下配置项进行选择(**为了保证能同时支持原有 js 代码 与 TUICallKit 中 ts 代码,请您务必严格按照以下五个选项进行配置**),安装完成后检查 `App.vue` 文件代码并重新编译。
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
## TUICallKit (含 UI 接口)
|
|
2
|
+
|
|
3
|
+
TUICallKit API 是音视频通话组件的**含 UI 接口**,使用TUICallKit API,您可以通过简单接口快速实现一个类微信的音视频通话场景。
|
|
4
|
+
|
|
5
|
+
|API|描述|
|
|
6
|
+
|---------|---------|
|
|
7
|
+
|login|登录|
|
|
8
|
+
|logout|登出|
|
|
9
|
+
|setSelfInfo|设置用户的头像、昵称|
|
|
10
|
+
|calls|发起 1v1 通话|
|
|
11
|
+
|join|发起群组通话|
|
|
12
|
+
|setCallingBell|设置自定义来电铃音|
|
|
13
|
+
|enableMuteMode|开启/关闭静音模式|
|
|
14
|
+
|enableFloatWindow|开启/关闭悬浮窗功能|
|
|
15
|
+
|enableIncomingBanner|开启/关闭来电横幅显示|
|
|
16
|
+
|setScreenOrientation|设置通话界面显示方向|
|
|
17
|
+
|
|
18
|
+
## TUICallEvent
|
|
19
|
+
|
|
20
|
+
TUICallEvent 是 TUICallEngine 对应的事件类,您可以通过监听如下事件,来监听自己感兴趣的事件。
|
|
21
|
+
|
|
22
|
+
|API|描述|
|
|
23
|
+
|---------|---------|
|
|
24
|
+
|onError|通话过程中错误回调|
|
|
25
|
+
|onCallReceived|通话请求的回调|
|
|
26
|
+
|onCallCancelled|通话取消的回调|
|
|
27
|
+
|onCallBegin|通话接通的回调|
|
|
28
|
+
|onCallEnd|通话结束的回调|
|
|
29
|
+
|onCallMediaTypeChanged|通话媒体类型发生改变的回调|
|
|
30
|
+
|onUserReject|xxxx 用户拒绝通话的回调|
|
|
31
|
+
|onUserNoResponse|xxxx 用户不响应的回调|
|
|
32
|
+
|onUserLineBusy|xxxx 用户忙线的回调|
|
|
33
|
+
|onUserJoin|xxxx 用户加入通话的回调|
|
|
34
|
+
|onUserLeave|xxxx 用户离开通话的回调|
|
|
35
|
+
|onUserVideoAvailable|xxx 用户是否有视频流的回调|
|
|
36
|
+
|onUserAudioAvailable|xxx 用户是否有音频流的回调|
|
|
37
|
+
|onUserVoiceVolumeChanged|所有用户音量大小的反馈回调|
|
|
38
|
+
|onUserNetworkQualityChanged|所有用户网络质量的反馈回调|
|
|
39
|
+
|
|
40
|
+
## TUICallEngine (无 UI 接口)
|
|
41
|
+
|
|
42
|
+
TUICallEngine API 是音视频通话组件的**无 UI 接口**,使用 TUICallEngine API,您可以做一些额外的操作(目前仅支持以下接口)。
|
|
43
|
+
|
|
44
|
+
|API|描述|
|
|
45
|
+
|---------|---------|
|
|
46
|
+
|hangup|结束通话|
|
|
47
|
+
|accept|接听通话|
|
|
48
|
+
|setVideoRenderParams|设置用户视频画面的渲染模式|
|
|
49
|
+
|setVideoEncoderParams|设置视频编码的编码参数|
|