@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.
Files changed (102) hide show
  1. package/package.json +1 -1
  2. package/resource/doc/chatuikit/android/features/theme.md +363 -0
  3. package/resource/doc/chatuikit/{android/client_api_Android.md → faq/android_sdk/client-api.md} +0 -2
  4. package/resource/doc/chatuikit/faq/common/product.md +8 -0
  5. package/resource/doc/chatuikit/faq/flutter_sdk/faq.md +53 -0
  6. package/resource/doc/chatuikit/{iOS/client_api_iOS.md → faq/ios_sdk/client-api.md} +0 -2
  7. package/resource/doc/chatuikit/flutter/features/theme.md +379 -0
  8. package/resource/doc/chatuikit/flutter/integration.md +413 -0
  9. package/resource/doc/chatuikit/flutter/workflow.md +941 -0
  10. package/resource/doc/chatuikit/iOS/features/theme.md +416 -0
  11. package/resource/doc/chatuikit/iOS/workflow.md +0 -0
  12. package/resource/doc/chatuikit/react/components/chat-setting.md +86 -0
  13. package/resource/doc/chatuikit/react/components/contact-list.md +1093 -0
  14. package/resource/doc/chatuikit/react/components/search.md +745 -0
  15. package/resource/doc/chatuikit/vue/components/chat-setting.md +64 -0
  16. package/resource/doc/chatuikit/vue/components/contact-list.md +679 -0
  17. package/resource/doc/chatuikit/vue/components/search.md +1384 -0
  18. package/resource/doc/livekit/live/android/workflow.md +137 -6
  19. package/resource/doc/livekit/live/ios/live-audience-list.md +339 -0
  20. package/resource/doc/livekit/live/ios/live-audio-effect.md +370 -0
  21. package/resource/doc/livekit/live/ios/live-barrage.md +517 -0
  22. package/resource/doc/livekit/live/ios/live-base-beauty.md +247 -0
  23. package/resource/doc/livekit/live/ios/live-co-guest-interaction.md +518 -0
  24. package/resource/doc/livekit/live/ios/live-gift.md +783 -0
  25. package/resource/doc/livekit/live/ios/live-host-interaction.md +815 -0
  26. package/resource/doc/livekit/live/ios/live-integration.md +931 -0
  27. package/resource/doc/livekit/live/ios/live-live-list.md +485 -0
  28. package/resource/doc/livekit/live/ios/workflow.md +454 -0
  29. package/resource/doc/rtcengine/web/plugin/20-advanced-customized-capture-rendering.md +87 -0
  30. package/resource/doc/rtcengine/web/plugin/21-advanced-auto-play-policy.md +87 -0
  31. package/resource/doc/rtcengine/web/plugin/22-advanced-audio-mixer.md +175 -0
  32. package/resource/doc/rtcengine/web/plugin/23-advanced-support-detection.md +221 -0
  33. package/resource/doc/rtcengine/web/plugin/24-advanced-network-quality.md +140 -0
  34. package/resource/doc/rtcengine/web/plugin/25-advanced-device-change.md +99 -0
  35. package/resource/doc/rtcengine/web/plugin/26-advanced-publish-cdn-stream.md +451 -0
  36. package/resource/doc/rtcengine/web/plugin/27-advanced-small-stream.md +151 -0
  37. package/resource/doc/rtcengine/web/plugin/28-advanced-beauty.md +322 -0
  38. package/resource/doc/rtcengine/web/plugin/29-advanced-water-mark.md +149 -0
  39. package/resource/doc/rtcengine/web/plugin/30-advanced-cross-room-link.md +96 -0
  40. package/resource/doc/rtcengine/web/plugin/31-advanced-plugins-overview.md +330 -0
  41. package/resource/doc/rtcengine/web/plugin/34-advanced-proxy.md +248 -0
  42. package/resource/doc/rtcengine/web/plugin/35-advanced-ai-denoiser.md +81 -0
  43. package/resource/doc/rtcengine/web/plugin/36-advanced-virtual-background.md +242 -0
  44. package/resource/doc/rtcengine/web/plugin/37-advanced-voice-changer.md +99 -0
  45. package/resource/doc/rtcengine/web/plugin/39-advanced-video-decoder.md +33 -0
  46. package/resource/doc/rtcengine/web/plugin/40-advanced-video-mixer.md +379 -0
  47. package/resource/doc/rtcengine/web/plugin/41-advanced-small-stream-auto-switcher.md +91 -0
  48. package/resource/doc/rtcengine/web/plugin/42-advanced-realtime-transcriber.md +315 -0
  49. package/resource/doc/rtcengine/web/plugin/43-advanced-face-detection.md +180 -0
  50. package/tools/chat/get-native-chat-feature-detail.js +30 -0
  51. package/tools/chat/get-native-chat-feature-detail.js.map +1 -0
  52. package/tools/chat/get-native-chat-integration.js +30 -12
  53. package/tools/chat/get-native-chat-integration.js.map +1 -1
  54. package/tools/common/get-faq.js +2 -4
  55. package/tools/common/get-faq.js.map +1 -1
  56. package/tools/definitions/get_native_chat_feature_detail_def.js +32 -0
  57. package/tools/definitions/get_native_chat_feature_detail_def.js.map +1 -0
  58. package/tools/definitions/get_native_chat_uikit_integration_def.js +19 -7
  59. package/tools/definitions/get_native_chat_uikit_integration_def.js.map +1 -1
  60. package/tools/definitions/{get_native_live_extra_features_def.js → get_native_live_uikit_extra_features_def.js} +3 -3
  61. package/tools/definitions/get_native_live_uikit_extra_features_def.js.map +1 -0
  62. package/tools/definitions/{get_native_live_interaction_def.js → get_native_live_uikit_interaction_def.js} +3 -3
  63. package/tools/definitions/get_native_live_uikit_interaction_def.js.map +1 -0
  64. package/tools/definitions/get_web_chat_uikit_component_detail_def.js +49 -10
  65. package/tools/definitions/get_web_chat_uikit_component_detail_def.js.map +1 -1
  66. package/tools/index.js +6 -4
  67. package/tools/index.js.map +1 -1
  68. package/tools/live/{get_native_live_extra_features.js → get_native_live_uikit_extra_features.js} +4 -4
  69. package/tools/live/get_native_live_uikit_extra_features.js.map +1 -0
  70. package/tools/live/{get_native_live_interaction.js → get_native_live_uikit_interaction.js} +4 -4
  71. package/tools/live/get_native_live_uikit_interaction.js.map +1 -0
  72. package/tools/rtcengine/get-rtcengine-web-sdk-integration.js.map +1 -1
  73. package/tools/rtcengine/get-trtc-sdk-faq.js +32 -0
  74. package/tools/rtcengine/get-trtc-sdk-faq.js.map +1 -0
  75. package/tools/rtcengine/get-trtc-web-sdk-faq.js +1 -1
  76. package/tools/rtcengine/get-trtc-web-sdk-integration.js.map +1 -1
  77. package/tools/rtcengine/get-trtc-web-sdk-plugin.js +45 -0
  78. package/tools/rtcengine/get-trtc-web-sdk-plugin.js.map +1 -0
  79. package/utils/handle-component-name.js +0 -16
  80. package/utils/handle-component-name.js.map +1 -1
  81. package/utils/report-cls-client.js +1 -1
  82. package/utils/report-es-client.js +1 -1
  83. package/resource/doc/chatuikit/android/generate_UserSig.md +0 -306
  84. package/resource/doc/chatuikit/android/integrarte_only_tuichat_Android.md +0 -290
  85. package/resource/doc/chatuikit/android/quick_start_Android.md +0 -138
  86. package/resource/doc/chatuikit/android/show_typing_Android.md +0 -43
  87. package/resource/doc/chatuikit/flutter/generate_UserSig.md +0 -306
  88. package/resource/doc/chatuikit/flutter/integrate_tuikit_Flutter.md +0 -133
  89. package/resource/doc/chatuikit/iOS/generate_UserSig.md +0 -306
  90. package/resource/doc/chatuikit/iOS/integrate_only_tuichat_iOS.md +0 -748
  91. package/resource/doc/chatuikit/iOS/quick_start_iOS.md +0 -163
  92. package/resource/doc/chatuikit/iOS/show_typing_iOS.md +0 -52
  93. package/tools/definitions/get_native_live_extra_features_def.js.map +0 -1
  94. package/tools/definitions/get_native_live_interaction_def.js.map +0 -1
  95. package/tools/live/get_native_live_extra_features.js.map +0 -1
  96. package/tools/live/get_native_live_interaction.js.map +0 -1
  97. /package/resource/doc/chatuikit/android/{integrate_tuikit_Android.md → integration.md} +0 -0
  98. /package/resource/doc/chatuikit/{faq/native_sdk/faq.md → android/workflow.md} +0 -0
  99. /package/resource/doc/chatuikit/{flutter/client_api_Flutter.md → faq/flutter_sdk/client-api.md} +0 -0
  100. /package/resource/doc/chatuikit/iOS/{integrate_tuikit_iOS.md → integration.md} +0 -0
  101. /package/resource/doc/chatuikit/react/components/{chatheader.md → chat-header.md} +0 -0
  102. /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.