@tencent-rtc/mcp 1.3.4 → 1.3.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/package.json +1 -1
- package/resource/doc/chatuikit/android/features/theme.md +363 -0
- package/resource/doc/chatuikit/{android/client_api_Android.md → faq/android_sdk/client-api.md} +0 -2
- package/resource/doc/chatuikit/faq/common/product.md +8 -0
- package/resource/doc/chatuikit/faq/flutter_sdk/faq.md +53 -0
- package/resource/doc/chatuikit/{iOS/client_api_iOS.md → faq/ios_sdk/client-api.md} +0 -2
- package/resource/doc/chatuikit/flutter/features/theme.md +379 -0
- package/resource/doc/chatuikit/flutter/integration.md +413 -0
- package/resource/doc/chatuikit/flutter/workflow.md +941 -0
- package/resource/doc/chatuikit/iOS/features/theme.md +416 -0
- package/resource/doc/chatuikit/iOS/workflow.md +0 -0
- package/resource/doc/chatuikit/react/components/chat-setting.md +86 -0
- package/resource/doc/chatuikit/react/components/contact-list.md +1093 -0
- package/resource/doc/chatuikit/react/components/search.md +745 -0
- package/resource/doc/chatuikit/vue/components/chat-setting.md +64 -0
- package/resource/doc/chatuikit/vue/components/contact-list.md +679 -0
- package/resource/doc/chatuikit/vue/components/search.md +1384 -0
- package/resource/doc/livekit/live/android/workflow.md +137 -6
- package/resource/doc/livekit/live/ios/live-audience-list.md +339 -0
- package/resource/doc/livekit/live/ios/live-audio-effect.md +370 -0
- package/resource/doc/livekit/live/ios/live-barrage.md +517 -0
- package/resource/doc/livekit/live/ios/live-base-beauty.md +247 -0
- package/resource/doc/livekit/live/ios/live-co-guest-interaction.md +518 -0
- package/resource/doc/livekit/live/ios/live-gift.md +783 -0
- package/resource/doc/livekit/live/ios/live-host-interaction.md +815 -0
- package/resource/doc/livekit/live/ios/live-integration.md +931 -0
- package/resource/doc/livekit/live/ios/live-live-list.md +485 -0
- package/resource/doc/livekit/live/ios/workflow.md +454 -0
- package/resource/doc/rtcengine/web/plugin/20-advanced-customized-capture-rendering.md +87 -0
- package/resource/doc/rtcengine/web/plugin/21-advanced-auto-play-policy.md +87 -0
- package/resource/doc/rtcengine/web/plugin/22-advanced-audio-mixer.md +175 -0
- package/resource/doc/rtcengine/web/plugin/23-advanced-support-detection.md +221 -0
- package/resource/doc/rtcengine/web/plugin/24-advanced-network-quality.md +140 -0
- package/resource/doc/rtcengine/web/plugin/25-advanced-device-change.md +99 -0
- package/resource/doc/rtcengine/web/plugin/26-advanced-publish-cdn-stream.md +451 -0
- package/resource/doc/rtcengine/web/plugin/27-advanced-small-stream.md +151 -0
- package/resource/doc/rtcengine/web/plugin/28-advanced-beauty.md +322 -0
- package/resource/doc/rtcengine/web/plugin/29-advanced-water-mark.md +149 -0
- package/resource/doc/rtcengine/web/plugin/30-advanced-cross-room-link.md +96 -0
- package/resource/doc/rtcengine/web/plugin/31-advanced-plugins-overview.md +330 -0
- package/resource/doc/rtcengine/web/plugin/34-advanced-proxy.md +248 -0
- package/resource/doc/rtcengine/web/plugin/35-advanced-ai-denoiser.md +81 -0
- package/resource/doc/rtcengine/web/plugin/36-advanced-virtual-background.md +242 -0
- package/resource/doc/rtcengine/web/plugin/37-advanced-voice-changer.md +99 -0
- package/resource/doc/rtcengine/web/plugin/39-advanced-video-decoder.md +33 -0
- package/resource/doc/rtcengine/web/plugin/40-advanced-video-mixer.md +379 -0
- package/resource/doc/rtcengine/web/plugin/41-advanced-small-stream-auto-switcher.md +91 -0
- package/resource/doc/rtcengine/web/plugin/42-advanced-realtime-transcriber.md +315 -0
- package/resource/doc/rtcengine/web/plugin/43-advanced-face-detection.md +180 -0
- package/tools/chat/get-native-chat-feature-detail.js +30 -0
- package/tools/chat/get-native-chat-feature-detail.js.map +1 -0
- package/tools/chat/get-native-chat-integration.js +30 -12
- package/tools/chat/get-native-chat-integration.js.map +1 -1
- package/tools/common/get-faq.js +2 -4
- package/tools/common/get-faq.js.map +1 -1
- package/tools/definitions/get_native_chat_feature_detail_def.js +32 -0
- package/tools/definitions/get_native_chat_feature_detail_def.js.map +1 -0
- package/tools/definitions/get_native_chat_uikit_integration_def.js +19 -7
- package/tools/definitions/get_native_chat_uikit_integration_def.js.map +1 -1
- package/tools/definitions/{get_native_live_extra_features_def.js → get_native_live_uikit_extra_features_def.js} +3 -3
- package/tools/definitions/get_native_live_uikit_extra_features_def.js.map +1 -0
- package/tools/definitions/{get_native_live_interaction_def.js → get_native_live_uikit_interaction_def.js} +3 -3
- package/tools/definitions/get_native_live_uikit_interaction_def.js.map +1 -0
- package/tools/definitions/get_web_chat_uikit_component_detail_def.js +49 -10
- package/tools/definitions/get_web_chat_uikit_component_detail_def.js.map +1 -1
- package/tools/index.js +6 -4
- package/tools/index.js.map +1 -1
- package/tools/live/{get_native_live_extra_features.js → get_native_live_uikit_extra_features.js} +4 -4
- package/tools/live/get_native_live_uikit_extra_features.js.map +1 -0
- package/tools/live/{get_native_live_interaction.js → get_native_live_uikit_interaction.js} +4 -4
- package/tools/live/get_native_live_uikit_interaction.js.map +1 -0
- package/tools/rtcengine/get-rtcengine-web-sdk-integration.js.map +1 -1
- package/tools/rtcengine/get-trtc-sdk-faq.js +32 -0
- package/tools/rtcengine/get-trtc-sdk-faq.js.map +1 -0
- package/tools/rtcengine/get-trtc-web-sdk-faq.js +1 -1
- package/tools/rtcengine/get-trtc-web-sdk-integration.js.map +1 -1
- package/tools/rtcengine/get-trtc-web-sdk-plugin.js +45 -0
- package/tools/rtcengine/get-trtc-web-sdk-plugin.js.map +1 -0
- package/utils/handle-component-name.js +0 -16
- package/utils/handle-component-name.js.map +1 -1
- package/utils/report-cls-client.js +1 -1
- package/utils/report-es-client.js +1 -1
- package/resource/doc/chatuikit/android/generate_UserSig.md +0 -306
- package/resource/doc/chatuikit/android/integrarte_only_tuichat_Android.md +0 -290
- package/resource/doc/chatuikit/android/quick_start_Android.md +0 -138
- package/resource/doc/chatuikit/android/show_typing_Android.md +0 -43
- package/resource/doc/chatuikit/flutter/generate_UserSig.md +0 -306
- package/resource/doc/chatuikit/flutter/integrate_tuikit_Flutter.md +0 -133
- package/resource/doc/chatuikit/iOS/generate_UserSig.md +0 -306
- package/resource/doc/chatuikit/iOS/integrate_only_tuichat_iOS.md +0 -748
- package/resource/doc/chatuikit/iOS/quick_start_iOS.md +0 -163
- package/resource/doc/chatuikit/iOS/show_typing_iOS.md +0 -52
- package/tools/definitions/get_native_live_extra_features_def.js.map +0 -1
- package/tools/definitions/get_native_live_interaction_def.js.map +0 -1
- package/tools/live/get_native_live_extra_features.js.map +0 -1
- package/tools/live/get_native_live_interaction.js.map +0 -1
- /package/resource/doc/chatuikit/android/{integrate_tuikit_Android.md → integration.md} +0 -0
- /package/resource/doc/chatuikit/{faq/native_sdk/faq.md → android/workflow.md} +0 -0
- /package/resource/doc/chatuikit/{flutter/client_api_Flutter.md → faq/flutter_sdk/client-api.md} +0 -0
- /package/resource/doc/chatuikit/iOS/{integrate_tuikit_iOS.md → integration.md} +0 -0
- /package/resource/doc/chatuikit/react/components/{chatheader.md → chat-header.md} +0 -0
- /package/resource/doc/chatuikit/vue/components/{chatheader.md → chat-header.md} +0 -0
|
@@ -0,0 +1,330 @@
|
|
|
1
|
+
## Overview
|
|
2
|
+
|
|
3
|
+
TRTC Web SDK v5 provides a plugin system that supports on-demand loading of various audio and video enhancement capabilities. Advantages of the plugin system:
|
|
4
|
+
|
|
5
|
+
- **Modular Design**: Import only what you need, reducing the main bundle size
|
|
6
|
+
- **Independent Upgrades**: Plugin versions are managed independently for easier iteration
|
|
7
|
+
- **Unified Interface**: All plugins use the same start, update, and stop APIs
|
|
8
|
+
- **Flexible Combination**: Use multiple plugins simultaneously to meet complex business scenarios
|
|
9
|
+
|
|
10
|
+
## Plugin List
|
|
11
|
+
|
|
12
|
+
### Video Enhancement
|
|
13
|
+
|
|
14
|
+
| Plugin Name | Description | Version Requirement | Package Requirement | Static Assets | Documentation |
|
|
15
|
+
|---------|---------|---------|---------|---------|---------|
|
|
16
|
+
| **Beauty** | Professional beauty filters with 6 parameters (smoothing, whitening, face slimming, etc.) + 10 2D stickers | ≥ 5.5.0 | Professional Edition | - | {@tutorial 28-advanced-beauty} |
|
|
17
|
+
<!-- BasicBeauty is for Chinese market only, not exposed in English docs -->
|
|
18
|
+
| **VirtualBackground** | Virtual background with blur, image background, and face centering | ≥ 5.2.0 | Premium Edition | Required | {@tutorial 36-advanced-virtual-background} |
|
|
19
|
+
| **Watermark** | Video watermark with image overlay support | ≥ 5.3.2 | None | - | {@tutorial 29-advanced-water-mark} |
|
|
20
|
+
| **VideoMixer** | Video mixing to combine camera, screen, text, image, and video into one stream | ≥ 5.12.0 | None | - | {@tutorial 40-advanced-video-mixer} |
|
|
21
|
+
| **FaceDetection** | Face detection to monitor face state changes in real-time | ≥ 5.15.0 | None | Required | {@tutorial 43-advanced-face-detection} |
|
|
22
|
+
|
|
23
|
+
### Audio Enhancement
|
|
24
|
+
|
|
25
|
+
| Plugin Name | Description | Version Requirement | Package Requirement | Static Assets | Documentation |
|
|
26
|
+
|---------|---------|---------|---------|---------|---------|
|
|
27
|
+
| **AudioMixer** | Background music with support for multiple tracks, volume control, looping, and seeking | ≥ 5.1.0 | None | - | {@tutorial 22-advanced-audio-mixer} |
|
|
28
|
+
| **AIDenoiser** | AI noise reduction with support for far-field cancellation mode | - | Exclusive Edition | Required | {@tutorial 35-advanced-ai-denoiser} |
|
|
29
|
+
| **VoiceChanger** | Voice effects with 11 voice types (child, loli, uncle, etc.) | ≥ 5.10.0 | Premium Edition | - | {@tutorial 37-advanced-voice-changer} |
|
|
30
|
+
| **RealtimeTranscriber** | Real-time speech transcription and translation, converting audio to text with multi-language translation | ≥ 5.15.0 | None | - | {@tutorial 42-advanced-realtime-transcriber} |
|
|
31
|
+
| **Chorus** | KTV chorus with lead/backup singer roles, lyrics sync, and scoring | - | [Contact us](https://trtc.io/contact) | - | - |
|
|
32
|
+
|
|
33
|
+
### Streaming & Mixing
|
|
34
|
+
|
|
35
|
+
| Plugin Name | Description | Version Requirement | Package Requirement | Static Assets | Documentation |
|
|
36
|
+
|---------|---------|---------|---------|---------|---------|
|
|
37
|
+
| **CDNStreaming** | CDN relay with cloud mixing, CDN push, and relay back to TRTC room | ≥ 5.1.0 | None | - | {@tutorial 26-advanced-publish-cdn-stream} |
|
|
38
|
+
| **CrossRoom** | Cross-room connection for audio/video calls between different rooms | ≥ 5.8.0 | None | - | {@tutorial 30-advanced-cross-room-link} |
|
|
39
|
+
|
|
40
|
+
### Extensions
|
|
41
|
+
|
|
42
|
+
| Plugin Name | Description | Version Requirement | Package Requirement | Static Assets | Documentation |
|
|
43
|
+
|---------|---------|---------|---------|---------|---------|
|
|
44
|
+
| **DeviceDetector** | Device detection for camera, microphone, speaker, and network with default UI | ≥ 5.8.0 | None | - | {@tutorial 23-advanced-support-detection} |
|
|
45
|
+
| **Debug** | Debug mode with full log upload/export and audio/video dump | ≥ 5.8.0 | None | - | {@tutorial 18-basic-debug} |
|
|
46
|
+
| **TRTCVideoDecoder** | Video decoder fallback to software decoding on failure | ≥ 5.9.0 | [Contact us](https://trtc.io/contact) | Required | {@tutorial 39-advanced-video-decoder} |
|
|
47
|
+
| **SmallStreamAutoSwitcher** | Automatic dual-stream switching for smooth streaming in poor network | ≥ 5.11.0 | None | - | {@tutorial 41-advanced-small-stream-auto-switcher} |
|
|
48
|
+
<!-- | **CustomEncryption** | Custom encryption for end-to-end audio/video encryption with built-in or custom algorithms | - | Contact us | - | - | -->
|
|
49
|
+
|
|
50
|
+
> **Notes:**
|
|
51
|
+
> - **Version Requirement**: Minimum TRTC SDK version required to use the plugin
|
|
52
|
+
> - **Package Requirement**: TRTC monthly package edition required, see [Package Billing](https://cloud.tencent.com/document/product/647/85386)
|
|
53
|
+
> - **Static Assets**: Whether the plugin requires deploying the `node_modules/trtc-sdk-v5/assets` directory to CDN
|
|
54
|
+
|
|
55
|
+
## Standard Usage Flow
|
|
56
|
+
|
|
57
|
+
### 1. Import and Register Plugins
|
|
58
|
+
|
|
59
|
+
Register plugins in the `plugins` array when creating a TRTC instance:
|
|
60
|
+
|
|
61
|
+
```javascript
|
|
62
|
+
import TRTC from 'trtc-sdk-v5';
|
|
63
|
+
import { VirtualBackground } from 'trtc-sdk-v5/plugins/video-effect/virtual-background';
|
|
64
|
+
import { AIDenoiser } from 'trtc-sdk-v5/plugins/ai-denoiser';
|
|
65
|
+
|
|
66
|
+
const trtc = TRTC.create({
|
|
67
|
+
plugins: [VirtualBackground, AIDenoiser],
|
|
68
|
+
assetsPath: 'https://your-cdn/assets' // If plugins require static assets
|
|
69
|
+
});
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
### 2. Start Plugin
|
|
73
|
+
|
|
74
|
+
Use `trtc.startPlugin(pluginName, options)` to start a plugin:
|
|
75
|
+
|
|
76
|
+
```javascript
|
|
77
|
+
// Plugins with user authentication
|
|
78
|
+
await trtc.startPlugin('VirtualBackground', {
|
|
79
|
+
sdkAppId: 123456,
|
|
80
|
+
userId: 'user_123',
|
|
81
|
+
userSig: 'XXXXXXXX',
|
|
82
|
+
type: 'blur',
|
|
83
|
+
blurLevel: 3
|
|
84
|
+
});
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
### 3. Update Parameters (Optional)
|
|
88
|
+
|
|
89
|
+
Use `trtc.updatePlugin(pluginName, options)` to dynamically update plugin parameters:
|
|
90
|
+
|
|
91
|
+
```javascript
|
|
92
|
+
await trtc.updatePlugin('VirtualBackground', {
|
|
93
|
+
type: 'image',
|
|
94
|
+
imageUrl: 'https://example.com/background.jpg'
|
|
95
|
+
});
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
### 4. Stop Plugin
|
|
99
|
+
|
|
100
|
+
Use `trtc.stopPlugin(pluginName)` to stop a plugin:
|
|
101
|
+
|
|
102
|
+
```javascript
|
|
103
|
+
await trtc.stopPlugin('VirtualBackground');
|
|
104
|
+
```
|
|
105
|
+
|
|
106
|
+
## Special Usage
|
|
107
|
+
|
|
108
|
+
### AudioMixer (Background Music) - ID-Based Grouping
|
|
109
|
+
|
|
110
|
+
AudioMixer uses a unique `id` to identify each background music track, with independent lifecycle for each id:
|
|
111
|
+
|
|
112
|
+
```javascript
|
|
113
|
+
// Start first background music
|
|
114
|
+
await trtc.startPlugin('AudioMixer', {
|
|
115
|
+
id: 'bgm1',
|
|
116
|
+
url: './music1.mp3',
|
|
117
|
+
loop: true,
|
|
118
|
+
volume: 0.5
|
|
119
|
+
});
|
|
120
|
+
|
|
121
|
+
// Start second background music simultaneously (different id)
|
|
122
|
+
await trtc.startPlugin('AudioMixer', {
|
|
123
|
+
id: 'bgm2',
|
|
124
|
+
url: './music2.mp3',
|
|
125
|
+
volume: 0.3
|
|
126
|
+
});
|
|
127
|
+
|
|
128
|
+
// Update first background music
|
|
129
|
+
await trtc.updatePlugin('AudioMixer', {
|
|
130
|
+
id: 'bgm1',
|
|
131
|
+
volume: 0.8,
|
|
132
|
+
operation: 'pause' // pause | resume
|
|
133
|
+
});
|
|
134
|
+
|
|
135
|
+
// Stop first background music
|
|
136
|
+
await trtc.stopPlugin('AudioMixer', {
|
|
137
|
+
id: 'bgm1'
|
|
138
|
+
});
|
|
139
|
+
```
|
|
140
|
+
|
|
141
|
+
**Features:**
|
|
142
|
+
- ID-based grouping with independent lifecycle for each id
|
|
143
|
+
- Support multiple background music tracks simultaneously (different ids)
|
|
144
|
+
- Same id cannot be started twice consecutively, must stop first
|
|
145
|
+
- Support pause, resume, seek operations
|
|
146
|
+
|
|
147
|
+
### VideoMixer - Multi-Source Management
|
|
148
|
+
|
|
149
|
+
VideoMixer supports dynamically managing multiple input sources with unique `id` for each source:
|
|
150
|
+
|
|
151
|
+
```javascript
|
|
152
|
+
// Start mixing and get output track
|
|
153
|
+
const { track } = await trtc.startPlugin('VideoMixer', {
|
|
154
|
+
canvasInfo: { width: 1920, height: 1080 },
|
|
155
|
+
camera: [{ id: 'camera1', layout: { x: 0, y: 0, width: 640, height: 480, zIndex: 1 } }]
|
|
156
|
+
});
|
|
157
|
+
|
|
158
|
+
// Dynamically add screen share
|
|
159
|
+
await trtc.updatePlugin('VideoMixer', {
|
|
160
|
+
screen: [{ id: 'screen1', layout: { x: 640, y: 0, width: 1280, height: 1080, zIndex: 0 } }]
|
|
161
|
+
});
|
|
162
|
+
|
|
163
|
+
// Remove camera (pass empty array)
|
|
164
|
+
await trtc.updatePlugin('VideoMixer', {
|
|
165
|
+
camera: []
|
|
166
|
+
});
|
|
167
|
+
|
|
168
|
+
// Publish mixed track
|
|
169
|
+
await trtc.startLocalVideo({
|
|
170
|
+
option: {
|
|
171
|
+
videoTrack: track,
|
|
172
|
+
profile: { width: 1920, height: 1080, bitrate: 2000 }
|
|
173
|
+
}
|
|
174
|
+
});
|
|
175
|
+
```
|
|
176
|
+
|
|
177
|
+
**Features:**
|
|
178
|
+
- Support multiple start/update calls
|
|
179
|
+
- Returns `track` for custom publishing
|
|
180
|
+
- Manage multiple input sources via arrays (camera, screen, text, image, video)
|
|
181
|
+
- Note: PC browsers only
|
|
182
|
+
|
|
183
|
+
### TRTCVideoDecoder - Auto-Start
|
|
184
|
+
|
|
185
|
+
TRTCVideoDecoder automatically starts fallback logic on decode failure after registration, no manual `startPlugin` needed:
|
|
186
|
+
|
|
187
|
+
```javascript
|
|
188
|
+
import TRTCVideoDecoder from 'trtc-sdk-v5/plugins/video-decoder';
|
|
189
|
+
|
|
190
|
+
const trtc = TRTC.create({
|
|
191
|
+
plugins: [TRTCVideoDecoder],
|
|
192
|
+
assetsPath: 'https://your-cdn/assets'
|
|
193
|
+
});
|
|
194
|
+
|
|
195
|
+
// No need to manually startPlugin, plugin auto-starts on decode failure
|
|
196
|
+
```
|
|
197
|
+
|
|
198
|
+
### SmallStreamAutoSwitcher - No Update Support
|
|
199
|
+
|
|
200
|
+
SmallStreamAutoSwitcher runs automatically after start, does not support `updatePlugin`:
|
|
201
|
+
|
|
202
|
+
```javascript
|
|
203
|
+
// Use default strategy
|
|
204
|
+
trtc.startPlugin('SmallStreamAutoSwitcher');
|
|
205
|
+
|
|
206
|
+
// Custom strategy (only configurable at start)
|
|
207
|
+
trtc.startPlugin('SmallStreamAutoSwitcher', {
|
|
208
|
+
maxAutoSwitchToSmallCount: 1, // Switch only once
|
|
209
|
+
poorDuration: 5000, // Switch after 5s of poor network
|
|
210
|
+
goodDuration: 30000 // Switch back after 30s of good network
|
|
211
|
+
});
|
|
212
|
+
```
|
|
213
|
+
|
|
214
|
+
**Features:**
|
|
215
|
+
- Does not support `updatePlugin`
|
|
216
|
+
- Automatically switches streams based on network conditions
|
|
217
|
+
- Note: Requires dual-stream feature
|
|
218
|
+
|
|
219
|
+
### FaceDetection - Callback-Driven
|
|
220
|
+
|
|
221
|
+
FaceDetection uses callbacks to get detection results with smart debouncing:
|
|
222
|
+
|
|
223
|
+
```javascript
|
|
224
|
+
await trtc.startPlugin('FaceDetection', {
|
|
225
|
+
onFaceDetectionStateChanged: (hasFace) => {
|
|
226
|
+
if (hasFace) {
|
|
227
|
+
console.log('Face detected');
|
|
228
|
+
} else {
|
|
229
|
+
console.log('Face lost'); // Delayed trigger to avoid false positives
|
|
230
|
+
}
|
|
231
|
+
},
|
|
232
|
+
detectionInterval: 300, // Detection interval (ms)
|
|
233
|
+
minConfidence: 0.8, // Minimum confidence
|
|
234
|
+
missingTimeout: 1000 // Face loss confirmation time (ms)
|
|
235
|
+
});
|
|
236
|
+
```
|
|
237
|
+
|
|
238
|
+
**Features:**
|
|
239
|
+
- Smart debouncing: immediate trigger on appearance, delayed on disappearance
|
|
240
|
+
- Auto-syncs with video stream state (Mute/Unmute)
|
|
241
|
+
- Note: Camera must be started first
|
|
242
|
+
|
|
243
|
+
### DeviceDetector - Returns Detection Results
|
|
244
|
+
|
|
245
|
+
DeviceDetector provides a default UI and returns device and network detection results:
|
|
246
|
+
|
|
247
|
+
```javascript
|
|
248
|
+
import { DeviceDetector } from 'trtc-sdk-v5/plugins/device-detector';
|
|
249
|
+
|
|
250
|
+
const trtc = TRTC.create({ plugins: [DeviceDetector] });
|
|
251
|
+
|
|
252
|
+
// Device only
|
|
253
|
+
const result = await trtc.startPlugin('DeviceDetector');
|
|
254
|
+
|
|
255
|
+
// Device + Network
|
|
256
|
+
const resultWithNetwork = await trtc.startPlugin('DeviceDetector', {
|
|
257
|
+
networkDetect: { sdkAppId, userId, userSig }
|
|
258
|
+
});
|
|
259
|
+
|
|
260
|
+
// Result example
|
|
261
|
+
// result.camera: { isSuccess: boolean, device: {...} }
|
|
262
|
+
// result.microphone: { isSuccess: boolean, device: {...} }
|
|
263
|
+
// result.speaker: { isSuccess: boolean, device: {...} }
|
|
264
|
+
// result.network: { isSuccess: boolean, result: { quality, rtt } }
|
|
265
|
+
```
|
|
266
|
+
|
|
267
|
+
**Features:**
|
|
268
|
+
- Provides default detection UI with i18n support
|
|
269
|
+
- Returns detection results for subsequent logic
|
|
270
|
+
- Supports device-only or device + network detection
|
|
271
|
+
|
|
272
|
+
### Debug - Auto-Start
|
|
273
|
+
|
|
274
|
+
Debug plugin for log upload/export and audio/video dump, built-in since v5.8.4:
|
|
275
|
+
|
|
276
|
+
```javascript
|
|
277
|
+
// v5.8.4+: No import needed, add ?trtcDebug=1 to URL to open panel
|
|
278
|
+
|
|
279
|
+
// v5.8.3 and below: Import required
|
|
280
|
+
import { Debug } from 'trtc-sdk-v5/plugins/debug';
|
|
281
|
+
const trtc = TRTC.create({ plugins: [Debug] });
|
|
282
|
+
// Auto-opens in dev environment, add ?trtcDebug=1 in production
|
|
283
|
+
|
|
284
|
+
// Stop debug mode
|
|
285
|
+
trtc.stopPlugin('Debug');
|
|
286
|
+
```
|
|
287
|
+
|
|
288
|
+
**Features:**
|
|
289
|
+
- Built-in since v5.8.4, no external import needed
|
|
290
|
+
- Auto-opens panel in dev environment
|
|
291
|
+
- Supports log upload/export, audio/video dump
|
|
292
|
+
|
|
293
|
+
## Static Assets Deployment
|
|
294
|
+
|
|
295
|
+
Some plugins require deploying static asset files (WebAssembly, model files, etc.):
|
|
296
|
+
|
|
297
|
+
### 1. Publish Asset Files
|
|
298
|
+
|
|
299
|
+
Publish the `node_modules/trtc-sdk-v5/assets` directory to CDN or static server:
|
|
300
|
+
|
|
301
|
+
```bash
|
|
302
|
+
# Example: Copy to public directory
|
|
303
|
+
cp -r node_modules/trtc-sdk-v5/assets ./public/assets
|
|
304
|
+
|
|
305
|
+
# Or upload to CDN
|
|
306
|
+
# https://your-cdn.com/assets/
|
|
307
|
+
```
|
|
308
|
+
|
|
309
|
+
### 2. Configure assetsPath
|
|
310
|
+
|
|
311
|
+
Pass the asset path when creating TRTC instance:
|
|
312
|
+
|
|
313
|
+
```javascript
|
|
314
|
+
const trtc = TRTC.create({
|
|
315
|
+
plugins: [VirtualBackground, AIDenoiser],
|
|
316
|
+
assetsPath: 'https://your-cdn.com/assets'
|
|
317
|
+
});
|
|
318
|
+
```
|
|
319
|
+
|
|
320
|
+
### 3. Notes
|
|
321
|
+
|
|
322
|
+
- Enable CORS policy if asset domain differs from app domain
|
|
323
|
+
- Assets must be deployed on HTTPS (HTTP blocked by browser security policy)
|
|
324
|
+
- SDK versions below v5.10.0 may require deploying additional files (refer to plugin docs)
|
|
325
|
+
|
|
326
|
+
## Related Links
|
|
327
|
+
|
|
328
|
+
- [TRTC Web SDK API Documentation](https://web.sdk.qcloud.com/trtc/webrtc/v5/doc/en/index.html)
|
|
329
|
+
- [Package Billing](https://cloud.tencent.com/document/product/647/85386)
|
|
330
|
+
- [Online Demo](https://web.sdk.qcloud.com/trtc/webrtc/demo/api-sample/index.html)
|
|
@@ -0,0 +1,248 @@
|
|
|
1
|
+
|
|
2
|
+
## Function Description
|
|
3
|
+
|
|
4
|
+
This article mainly introduces the best practices for dealing with firewall restrictions. For example, in a network environment with a firewall such as an enterprise intranet, TRTC Web SDK cannot be used normally due to firewall restrictions. In this case, there are two solutions:
|
|
5
|
+
|
|
6
|
+
- Solution 1: Listen for SDK errors and guide users to change networks or configure firewall whitelists.
|
|
7
|
+
- Solution 2: Use the Nginx + coturn proxy solution.
|
|
8
|
+
|
|
9
|
+
>The TRTC Web SDK uses UDP to communicate with the TRTC server by default, and has a built-in Turn Server that supports relaying media data through UDP or TCP.
|
|
10
|
+
> In the public network, users do not need to set up any proxies, as the SDK will attempt to establish media connections in the order of direct connection, Turn Server UDP, and Turn Server TCP.
|
|
11
|
+
> If it is known that the user will be using the SDK within an internal network firewall, it may not be possible to establish a media connection, and a proxy will need to be set up.
|
|
12
|
+
|
|
13
|
+
## Prerequisites
|
|
14
|
+
|
|
15
|
+
- Solution 2 requires the deployment of two servers, Nginx + Turn Server. You can contact your company's operations and maintenance colleagues to assist in building. The Nginx proxy server is used to proxy and forward the Websocket signaling data packets of TRTC Web SDK; the Turn Server is used to forward audio and video data packets.
|
|
16
|
+
|
|
17
|
+
## Implementation Process
|
|
18
|
+
|
|
19
|
+
### Solution 1
|
|
20
|
+
|
|
21
|
+
> This solution is suitable for: You cannot confirm whether the user's network will be restricted by the firewall. At this time, you can listen for SDK errors, guide users to change networks or check firewalls.
|
|
22
|
+
|
|
23
|
+
When you call APIs such as startLocalVideo, startLocalAudio, startRemoteVideo, etc., the SDK will establish a media connection channel internally for transmitting audio and video data. When encountering firewall restrictions, the SDK may fail to establish a connection, and the SDK will throw a firewall-restricted error and continue to retry.
|
|
24
|
+
|
|
25
|
+
You can refer to the following code example to listen for this error and guide users to change networks or check network firewalls and whitelist the domains and ports used by TRTC Web SDK. Reference: [TRTC Web SDK Domain and Port Whitelist](https://trtc.io/document/59667?platform=web&product=rtcengine&menulabel=coresdk).
|
|
26
|
+
|
|
27
|
+
```js
|
|
28
|
+
trtc.on(TRTC.EVENT.ERROR, error => {
|
|
29
|
+
// User network firewall restrictions may cause audio and video calls to fail.
|
|
30
|
+
// At this time, guide users to change networks or check network firewall settings.
|
|
31
|
+
if (error.code === TRTC.ERROR_CODE.OPERATION_FAILED && error.extraCode === 5501) {
|
|
32
|
+
|
|
33
|
+
}
|
|
34
|
+
});
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
### Solution 2
|
|
38
|
+
|
|
39
|
+
> This solution is suitable for: You confirm that the user's network is restricted by the firewall, and you need to set up a proxy server to solve the problem.
|
|
40
|
+
|
|
41
|
+
| Solution | Applicable scenarios | Network requirements |
|
|
42
|
+
| -------- | ---------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
43
|
+
| A | Users can access a specific external proxy server on the network | The proxy server is deployed on the external network, and the internal network firewall needs to open a whitelist to allow internal network users to access the external proxy server. |
|
|
44
|
+
| B | Users can only access an internal proxy server on the network | The proxy server is deployed on the internal network, and the internal network firewall needs to open a whitelist to allow the internal proxy server to access the external network. |
|
|
45
|
+
|
|
46
|
+
<div style="display: flex;justify-content: center;">
|
|
47
|
+
<img src="./assets/proxy-1.png"/>
|
|
48
|
+
</div>
|
|
49
|
+
|
|
50
|
+
<div style="display: flex;justify-content: center;">
|
|
51
|
+
Example of Solution 2-A
|
|
52
|
+
</div>
|
|
53
|
+
|
|
54
|
+
<div style="display: flex;justify-content: center;">
|
|
55
|
+
<img src="./assets/proxy-2.png" />
|
|
56
|
+
</div>
|
|
57
|
+
|
|
58
|
+
<div style="display: flex;justify-content: center;">Example of Solution 2-B</div>
|
|
59
|
+
|
|
60
|
+
### Setting up a proxy server
|
|
61
|
+
|
|
62
|
+
After you have set up Nginx and Turn server, you can refer to the following example to set up a proxy server.
|
|
63
|
+
|
|
64
|
+
```javascript
|
|
65
|
+
const trtc = TRTC.create();
|
|
66
|
+
|
|
67
|
+
await trtc.enterRoom({
|
|
68
|
+
...,
|
|
69
|
+
proxy: {
|
|
70
|
+
// Set up a Websocket proxy to relay signaling data packets between the SDK and the TRTC backend.
|
|
71
|
+
websocketProxy: 'wss://proxy.example.com/ws/',
|
|
72
|
+
// Set up a turn server to relay media data packets between the SDK and the TRTC backend. 14.3.3.3:3478 is the IP address and port of the turn server.
|
|
73
|
+
turnServer: { url: '14.3.3.3:3478', username: 'turn', credential: 'turn', credentialType: 'password' },
|
|
74
|
+
// By default, the SDK will connect to trtc server directly, if connection failed, then SDK will try to connect the TURN server to relay the media data. You can set 'relay' to force the connection through the TURN server.
|
|
75
|
+
iceTransportPolicy: 'all',
|
|
76
|
+
// By default, the SDK reports logs to the yun.tim.qq.com domain name. If this domain name cannot be accessed in your internal network, you need to whitelist the domain name or configure the following log proxy.
|
|
77
|
+
// Set up a log reporting proxy. Logs are key data for troubleshooting, so be sure to set up this proxy.
|
|
78
|
+
loggerProxy: 'https://proxy.example.com/logger/',
|
|
79
|
+
}
|
|
80
|
+
})
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
### Solution 2-A
|
|
84
|
+
|
|
85
|
+
#### Setting up Nginx server
|
|
86
|
+
|
|
87
|
+
1. Deploy Nginx server
|
|
88
|
+
|
|
89
|
+
Refer to the Nginx server deployment tutorial found on the Internet for deployment. If the enterprise has already deployed the Nginx service, it can be configured directly.
|
|
90
|
+
|
|
91
|
+
2. Configure Nginx server
|
|
92
|
+
|
|
93
|
+
```sh
|
|
94
|
+
vi /etc/nginx/nginx.conf
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
```
|
|
98
|
+
http {
|
|
99
|
+
server {
|
|
100
|
+
# The access domain name of the Nginx server
|
|
101
|
+
server_name proxy.example.com;
|
|
102
|
+
# The access port of the Nginx server
|
|
103
|
+
listen 443;
|
|
104
|
+
|
|
105
|
+
ssl on;
|
|
106
|
+
|
|
107
|
+
location /ws/ { # Corresponding to the websocketProxy parameter in setProxyServer
|
|
108
|
+
proxy_pass https://signaling.rtc.qq.com/; # TRTC server
|
|
109
|
+
proxy_http_version 1.1;
|
|
110
|
+
proxy_set_header Upgrade $http_upgrade;
|
|
111
|
+
proxy_set_header Connection "upgrade";
|
|
112
|
+
}
|
|
113
|
+
location /logger/ { # Corresponding to the loggerProxy parameter in setProxyServer
|
|
114
|
+
proxy_pass https://yun.tim.qq.com/;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
# SSL certificate corresponding to the domain name, used for HTTPS, users need to apply for it themselves
|
|
118
|
+
ssl_certificate ./crt/1_proxy.trtcapi.com_bundle.crt;
|
|
119
|
+
ssl_certificate_key ./crt/2_proxy.trtcapi.com.key;
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
```
|
|
123
|
+
|
|
124
|
+
|
|
125
|
+
|
|
126
|
+
3. Reload Nginx
|
|
127
|
+
|
|
128
|
+
```sh
|
|
129
|
+
sudo nginx -s reload
|
|
130
|
+
```
|
|
131
|
+
|
|
132
|
+
4. Confirm that the company's firewall allows access to the Nginx server IP and port.
|
|
133
|
+
|
|
134
|
+
#### Setting up Turn server
|
|
135
|
+
|
|
136
|
+
You can search for turn server setup tutorials on the Internet for setup, or you can use the following script to set up a turn server in `Centos`.
|
|
137
|
+
|
|
138
|
+
1. Create a script file `turn.sh` in the Linux server, and the script content is as follows:
|
|
139
|
+
|
|
140
|
+
|
|
141
|
+
```sh
|
|
142
|
+
#!/usr/bin/env bash
|
|
143
|
+
|
|
144
|
+
# current file name is turn.sh
|
|
145
|
+
|
|
146
|
+
# ref:
|
|
147
|
+
# https://gabrieltanner.org/blog/turn-server STEP 3 testing turn server
|
|
148
|
+
# https://medium.com/av-transcode/what-is-webrtc-and-how-to-setup-stun-turn-server-for-webrtc-communication-63314728b9d0
|
|
149
|
+
|
|
150
|
+
# as super-user
|
|
151
|
+
# usage: current_program <external-ip>
|
|
152
|
+
|
|
153
|
+
set -x
|
|
154
|
+
set -e
|
|
155
|
+
|
|
156
|
+
ip a
|
|
157
|
+
pwd
|
|
158
|
+
whoami
|
|
159
|
+
|
|
160
|
+
display_usage() {
|
|
161
|
+
echo "This script must be run with super-user privileges."
|
|
162
|
+
echo -e "\nUsage: $0 <external-ip> \ne.g. $0 154.8.246.205"
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
# if less than two arguments supplied, display usage
|
|
166
|
+
if [ $# -lt 1 ]
|
|
167
|
+
then
|
|
168
|
+
display_usage
|
|
169
|
+
exit 1
|
|
170
|
+
fi
|
|
171
|
+
|
|
172
|
+
if [[ $1 =~ ^[0-9]+\.[0-9]+\.[0-9]+\.[0-9]+$ ]]; then
|
|
173
|
+
echo "get external ip $1"
|
|
174
|
+
else
|
|
175
|
+
echo "wrong external ip $1 , must not have whitespace, tab and other char"
|
|
176
|
+
exit 2
|
|
177
|
+
fi
|
|
178
|
+
|
|
179
|
+
yum install -y coturn
|
|
180
|
+
|
|
181
|
+
# $1 is <external-ip>
|
|
182
|
+
cat <<EOF > /etc/coturn/turnserver.conf
|
|
183
|
+
external-ip=$1
|
|
184
|
+
listening-port=3478
|
|
185
|
+
lt-cred-mech
|
|
186
|
+
max-port=65535
|
|
187
|
+
min-port=20000
|
|
188
|
+
no-dtls
|
|
189
|
+
no-tls
|
|
190
|
+
realm=tencent
|
|
191
|
+
user=turn:turn
|
|
192
|
+
verbose
|
|
193
|
+
EOF
|
|
194
|
+
```
|
|
195
|
+
|
|
196
|
+
2. Add executable permission
|
|
197
|
+
|
|
198
|
+
```sh
|
|
199
|
+
chmod +x turn.sh
|
|
200
|
+
```
|
|
201
|
+
|
|
202
|
+
3. Execute the script as root, `sudo ./turn.sh <server public IP>`, for example:
|
|
203
|
+
|
|
204
|
+
```sh
|
|
205
|
+
sudo ./turn.sh 14.3.3.3
|
|
206
|
+
```
|
|
207
|
+
|
|
208
|
+
4. Start the turn server
|
|
209
|
+
|
|
210
|
+
```sh
|
|
211
|
+
systemctl start coturn
|
|
212
|
+
|
|
213
|
+
# Check if turn is started successfully
|
|
214
|
+
ps aux | grep coturn
|
|
215
|
+
|
|
216
|
+
# If you want to restart the service, execute
|
|
217
|
+
service coturn restart
|
|
218
|
+
```
|
|
219
|
+
|
|
220
|
+
5. Configure the firewall for the turn server, open inbound port 3478 (TCP & UDP), and outbound ports (UDP) between min and max ports in the configuration above.
|
|
221
|
+
|
|
222
|
+
6. Configure the company's internal network firewall to allow access to the turn server's IP and open outbound port 3478 (TCP & UDP).
|
|
223
|
+
|
|
224
|
+
7. Test the turn server
|
|
225
|
+
|
|
226
|
+
Use this [test page](https://webrtc.github.io/samples/src/content/peerconnection/trickle-ice/) to test whether the turn server is accessible. If the result shows "done" as shown in the screenshot below, the turn server is working properly.
|
|
227
|
+
|
|
228
|
+
<img src="./assets/turn-test.png" alt="turn-test" style="zoom: 33%;" />
|
|
229
|
+
|
|
230
|
+
|
|
231
|
+
### Solution 2-B
|
|
232
|
+
|
|
233
|
+
Solution B builds the Nginx proxy in the same way as Scenario A. There are two main differences:
|
|
234
|
+
|
|
235
|
+
1. When building a turn server, the external-ip field in the configuration file must be filled in with the address of the server on your corporate intranet.
|
|
236
|
+
|
|
237
|
+
```sh
|
|
238
|
+
# The start script in option A is the server's external address, e.g. 14.3.3.3
|
|
239
|
+
sudo . /turn.sh 14.3.3.3
|
|
240
|
+
# In option B, the start script fills in the server's intranet address, e.g. 10.0.0.4 for the intranet
|
|
241
|
+
sudo . /turn.sh 10.0.0.4
|
|
242
|
+
```
|
|
243
|
+
|
|
244
|
+
2. Firewall configuration:
|
|
245
|
+
|
|
246
|
+
- For the Nginx server, the domain name whitelist needs to be configured in the company's intranet firewall to allow the Nginx server to access TRTC's related domain names. Refer to: [TRTC Web SDK domain and port whitelist](https://trtc.io/document/59667?platform=web&product=rtcengine&menulabel=coresdk)
|
|
247
|
+
- For the Turn Server, allow the Turn Server to access the external network.
|
|
248
|
+
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
## Function Introduction
|
|
2
|
+
|
|
3
|
+
The AI Denoiser plugin reduces noise during calls and minimizes the impact of environmental noise on communication. It effectively suppresses keyboard sounds, collisions, and other noises, making it particularly suitable for scenarios sensitive to transient noise, such as conference settings.
|
|
4
|
+
|
|
5
|
+
This article introduces how to apply the AI Denoiser to the local audio stream in TRTC applications. [Click here to experience it online](https://trtc.io/demo/homepage/#/detail?scene=trtc&active=ai) with the denoiser demo.
|
|
6
|
+
|
|
7
|
+
## Prerequisites
|
|
8
|
+
|
|
9
|
+
- For usage fee details, see TRTC [Edition Features and Pricing](https://trtc.io/document/56025#f10b65d1-6e8d-41e3-8686-84909b00a1a2).
|
|
10
|
+
- Supported browsers
|
|
11
|
+
- Chrome 66+, Edge 79+, Safari 14.1+, Firefox 76+.
|
|
12
|
+
- For Android systems, the Chrome version must be above 92.
|
|
13
|
+
|
|
14
|
+
To make the best use of the AI Denoiser, it is recommended to use the latest version of the Chrome browser.
|
|
15
|
+
|
|
16
|
+
**Note:**
|
|
17
|
+
|
|
18
|
+
If there is background music in the microphone input, the denoiser plugin may treat it as noise and eliminate it.
|
|
19
|
+
|
|
20
|
+
## Implementation Process
|
|
21
|
+
|
|
22
|
+
#### Deploy Static Resources
|
|
23
|
+
|
|
24
|
+
This plugin relies on static resource files. To ensure the browser can load and run these files properly, complete the following steps:
|
|
25
|
+
1. Publish the `node_modules/trtc-sdk-v5/assets` directory to a CDN or static resource server.
|
|
26
|
+
2. Pass your CDN address to the `assetsPath` parameter when creating the TRTC instance, for example: `TRTC.create({ assetsPath: 'https://xxx/assets' })`. The SDK will load the relevant resource files as needed.
|
|
27
|
+
> - If your version is below `v5.10.0`, you need to publish `node_modules/trtc-sdk-v5/plugins/ai-denoiser/denoiser-wasm.js` to the CDN and place it in the same public directory, such as `xxx/assets`.
|
|
28
|
+
> - If the Host URL of the files in the directory differs from the Host URL of the web application, you need to enable the CORS policy for the file domain.
|
|
29
|
+
> - Do not place the directory files under an HTTP service, as loading HTTP resources under an HTTPS domain will be blocked by browser security policies.
|
|
30
|
+
|
|
31
|
+
#### Enable denoiser
|
|
32
|
+
|
|
33
|
+
```javascript
|
|
34
|
+
const trtc = TRTC.create({ assetsPath: 'https://xxx/assets' });
|
|
35
|
+
|
|
36
|
+
await trtc.startLocalAudio();
|
|
37
|
+
await trtc.startPlugin('AIDenoiser', {
|
|
38
|
+
sdkAppId: 123456,
|
|
39
|
+
userId: 'user_123',
|
|
40
|
+
userSig: 'XXXXXXXX'
|
|
41
|
+
});
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
#### Update denoiser
|
|
45
|
+
|
|
46
|
+
```javascript
|
|
47
|
+
await trtc.updatePlugin('AIDenoiser', {
|
|
48
|
+
mode: 1 // Enable far-field reduction mode
|
|
49
|
+
});
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
#### Disable denoiser
|
|
53
|
+
```javascript
|
|
54
|
+
await trtc.stopPlugin('AIDenoiser');
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
## API Description
|
|
58
|
+
|
|
59
|
+
### trtc.startPlugin('AIDenoiser', options)
|
|
60
|
+
|
|
61
|
+
Used to enable denoiser.
|
|
62
|
+
|
|
63
|
+
#### options:
|
|
64
|
+
|
|
65
|
+
Name | Type | Required | Description |
|
|
66
|
+
------------|----------|-------|-------------------------------------------------------------------------------------------------|
|
|
67
|
+
sdkAppId | `number` | true | The sdkAppId of the current application |
|
|
68
|
+
userId | `string` | true | The userId of the current user |
|
|
69
|
+
userSig | `string` | true | The userSig of the current user |
|
|
70
|
+
assetsPath | `string` | false | The location where the `denoiser-wasm.js` file is stored. If your version is below `v5.5.2`, you need to pass the assets resource directory through this parameter. |
|
|
71
|
+
mode | `number` | false | Current noise reduction mode | Since v5.13.0+, two modes are supported:<br> - `0`: The default value, suitable for most common scenarios.<br> - `1`: Far-field reduction, which addresses issues such as interruptions and misrecognition in ASR scenarios by eliminating far-field human voices and improving recognition accuracy.|
|
|
72
|
+
|
|
73
|
+
### trtc.updatePlugin('AIDenoiser')
|
|
74
|
+
|
|
75
|
+
| Name | Type | Required | Attributes | Description |
|
|
76
|
+
|----- |----------|-------|----------------------------------------------------------------|-------------|
|
|
77
|
+
| mode | `number` | false | Current noise reduction mode | Since v5.13.0+, two modes are supported:<br> - `0`: The default value, suitable for most common scenarios.<br> - `1`: Far-field reduction, which addresses issues such as interruptions and misrecognition in ASR scenarios by eliminating far-field human voices and improving recognition accuracy.|
|
|
78
|
+
|
|
79
|
+
### trtc.stopPlugin('AIDenoiser')
|
|
80
|
+
|
|
81
|
+
Used to disable denoiser.
|