@tencentcloud/sdk-mcp 1.4.6 → 1.6.0-beta.1

package/resource/{doc → knowledge}/rtcengine/web/how_to_run_web_sdk_demo.md

@@ -1,5 +1,3 @@
-# 快速跑通 Demo
-
 本文主要介绍如何快速跑通腾讯云 TRTC Web demo。
 
 ## 前提条件
@@ -8,21 +6,22 @@
 
 ## 操作步骤
 
-### 步骤1：创建新的应用
+## 步骤1：创建新的应用
 
-登录[实时音视频控制台](https://console.cloud.tencent.com/trtc/quickstart)，创建一个 TRTC 应用。
+登录[实时音视频控制台]((https://console.cloud.tencent.com/trtc/quickstart))，创建一个 TRTC 应用。
 
-### 步骤2：下载 SDK 和 Demo 源码
+## 步骤2：下载 SDK 和 Demo 源码
 
 1. 下载 Web 端 SDK 及配套的 Demo 源码。
 2. 下载完成后，单击 **“已下载，下一步”**。
 
-### 步骤3：获取 SDKAppId 和 密钥（SDKSecretKey)
+<span id="step3"></span>
+## 步骤3：获取 SDKAppId 和 密钥（SDKSecretKey)
 
-1. 进入修改配置页，获取 `SDKAppID` 和 `密钥`。
+1. 进入修改配置页，获取 `SDKAppID` 和`密钥`。
 2. 复制粘贴 SDKAppId 和 密钥（SDKSecretKey）完成后，单击 **已复制粘贴，下一步** 即创建成功。
 
-### 步骤4：运行 Demo
+## 步骤4：运行 Demo
 
 TRTC Web 目前提供以下几种基础 Demo，您可以选择您熟悉的项目框架进行运行体验：
 
@@ -30,64 +29,81 @@ TRTC Web 目前提供以下几种基础 Demo，您可以选择您熟悉的项目
 2. `quick-demo-vue2-js` 为 TRTC Web 快速运行 Demo (Vue2 版本)，集成了 TRTC Web SDK 的基础音视频通话、设备选择等功能，使用 Vue2 + JavaScript 开发，需要您安装 Node 环境，按下方说明运行体验。快速体验可访问 [quick-demo-vue2-js 在线体验地址](https://web.sdk.qcloud.com/trtc/webrtc/v5/demo/quick-demo-vue2-js/index.html)。
 3. `quick-demo-vue3-ts` 为 TRTC Web 快速运行 Demo (Vue3 版本)，集成了 TRTC Web SDK 的基础音视频通话、设备选择等功能，使用 Vue3 + TypeScript 开发，需要您安装 Node 环境，按下方说明运行体验。快速体验可访问 [quick-demo-vue3-ts 在线体验地址](https://web.sdk.qcloud.com/trtc/webrtc/v5/demo/quick-demo-vue3-ts/index.html)。
 
-> **注意：**
+> !
 > - 本地体验 Demo 可以直接在本地搭建静态服务（本地计算机需要接入互联网），通过 `http://localhost:端口` 访问，打开两个页面即可进行通话。
-> - 部署到公网体验，需要通过 HTTPS 协议，即 `https://域名/xxx` 访问，原因可参考文档[页面访问协议限制说明](./tutorial-05-info-browser.html#h2-3)。
-> - 目前桌面端 Chrome 浏览器支持 TRTC Web SDK 的相关特性比较完整，因此建议使用 Chrome 浏览器进行体验，参考文档[浏览器兼容信息](./tutorial-05-info-browser.html#h2-2)。
+> - 部署到公网体验，需要通过 HTTPS 协议，即 `https://域名/xxx` 访问，原因可参考文档[页面访问协议限制说明](tutorial-05-info-browser.md#h2-3)。
+> - 目前桌面端 Chrome 浏览器支持 TRTC Web SDK 的相关特性比较完整，因此建议使用 Chrome 浏览器进行体验，参考文档[浏览器兼容信息](tutorial-05-info-browser.md#h2-2)。
 
-#### Demo 1：quick-demo-js
+### Demo 1：quick-demo-js
 
 1. 在下载的源码中找到并使用浏览器打开 `TRTC_Web/quick-demo-js/index.html` 文件。
+
 2. 在浏览器打开的页面中填写 [步骤三](#step3) 获取的 SDKAppId 和 SDKSecretKey。
 
 3. 功能体验
+
    - 点击【Enter Room】按钮进入房间
    - 点击【Start Local Audio/Video】按钮，可采集麦克风或摄像头
    - 点击【Stop Local Audio/Video】按钮，可终止采集麦克风或摄像头
    - 点击【Start Share Screen】按钮开始屏幕分享
    - 点击【Stop Share Screen】按钮取消屏幕分享
+
 4. 加入房间后您可以通过分享邀请链接与被邀请人一起体验 TRTC Web 语音及视频互通功能。
 
-#### Demo 2：quick-demo-vue2-js
+### Demo 2：quick-demo-vue2-js
 
 1. 在下载的源码中找到并进入到 `TRTC_Web/quick-demo-vue2-js/` 目录下。
+
    ```shell
    cd quick-demo-vue2-js
    ```
+
 2. 本地运行 Demo，在终端执行以下命令，将会自动安装依赖并运行 demo
+
    ```shell
    npm start
    ```
+
    默认浏览器会自动打开 http://localhost:8080/ 地址。
+
 3. 在浏览器打开的页面中填写 [步骤三](#step3) 获取的 SDKAppId 和 SDKSecretKey。
 
 4. 功能体验
+
    - 点击【进入房间】按钮进入房间
    - 点击【采集麦克风/摄像头】按钮，可采集麦克风或摄像头
    - 点击【终止采集麦克风/摄像头】按钮，可终止采集麦克风或摄像头
    - 点击【开始共享屏幕】按钮开始屏幕分享
    - 点击【停止共享屏幕】按钮取消屏幕分享
+
 5. 加入房间后您可以通过分享邀请链接与被邀请人一起体验 TRTC Web 语音及视频互通功能。
 
-#### Demo 3：quick-demo-vue3-ts
+### Demo 3：quick-demo-vue3-ts
 
 1. 在下载的源码中找到并进入到 `TRTC_Web/quick-demo-vue3-ts/` 目录下。
+
 2. 本地运行 Demo
+
    ```shell
    npm start
    ```
+
    默认浏览器会自动打开 http://localhost:3000/ 地址。
+
 3. 在浏览器打开的页面中填写 [步骤三](#step3) 获取的 SDKAppId 和 SDKSecretKey。
 
 4. 功能体验
+
    - 输入 userId 和 roomId
    - 点击【Enter Room】按钮进入房间
    - 点击【Start Local Audio/Video】按钮，可采集麦克风或摄像头
    - 点击【Stop Local Audio/Video】按钮，可终止采集麦克风或摄像头
    - 点击【Start Share Screen】按钮开始屏幕分享
    - 点击【Stop Share Screen】按钮取消屏幕分享
+
 5. 加入房间后您可以通过分享邀请链接与被邀请人一起体验 TRTC Web 语音及视频互通功能。
 
-> **注意：**
+> !
+>
 > - 本文使用的生成 UserSig 的方案是在客户端中配置 SECRETKEY，该方法中 SECRETKEY 很容易被反编译逆向破解，一旦您的密钥泄露，攻击者就可以盗用您的腾讯云流量，因此**该方法仅适合本地跑通 Demo 和功能调试**。
 > - 正确的 UserSig 签发方式是将 UserSig 的计算代码集成到您的服务端，并提供面向 App 的接口，在需要 UserSig 时由您的 App 向业务服务器发起请求获取动态 UserSig。更多详情请参见 [服务端生成 UserSig](https://cloud.tencent.com/document/product/647/17275#Server)。

package/resource/{doc → knowledge}/rtcengine/web/plugin/21-advanced-auto-play-policy.md

@@ -1,6 +1,6 @@
 ## 简介
 
-浏览器为了防止网页自动播放音视频对用户造成干扰，对音视频的自动播放功能做了限制：**在用户与网页产生交互（例如点击、触摸页面等）之前，网页将被禁止播放带有声音的媒体。在 iOS 10+ 中，如果开启了省电模式，[无声音的媒体也会被禁止播放](https://discussions.apple.com/thread/254541299?sortBy=best)。**
+浏览器为了防止网页自动播放音视频对用户造成干扰，对音视频的自动播放功能做了限制：**在用户与网页产生交互（例如点击、触摸页面等）之前，网页将被禁止播放带有声音的媒体。在 iOS 10+ 中，如果开启了省电模式，[无声音的媒体也会被禁止播放](https://discussions.apple.com/thread/254541299)。**
 
 受上述浏览器自动播放策略影响，在使用 TRTC Web SDK 时，可能会出现播放无声的问题。最常见的场景是：您的产品设计中，支持用户刷新页面后，无需用户点击，可自动进房拉流播放。
 
@@ -32,7 +32,7 @@ SDK 提供的弹窗适配桌面端和移动端浏览器，样式如下：
 
 ### 步骤 1：关闭 SDK 默认弹窗
 
-在调用 [trtc.enterRoom](./TRTC.html#enterRoom) 接口时，将 `enableAutoPlayDialog` 参数设置为 `false`：
+在调用 [trtc.enterRoom](TRTC.md#enterRoom) 接口时，将 `enableAutoPlayDialog` 参数设置为 `false`：
 
 ```javascript
 await trtc.enterRoom({
@@ -43,7 +43,7 @@ await trtc.enterRoom({
 
 ### 步骤 2：监听自动播放失败事件（必做）
 
-监听 [AUTOPLAY_FAILED](./module-EVENT.html#.AUTOPLAY_FAILED) 事件来处理自动播放失败的情况。SDK 会自动监听用户的点击行为，在用户点击后自动恢复播放。
+监听 [AUTOPLAY_FAILED](module-EVENT.md#.AUTOPLAY_FAILED) 事件来处理自动播放失败的情况。SDK 会自动监听用户的点击行为，在用户点击后自动恢复播放。
 
 ```javascript
 trtc.on(TRTC.EVENT.AUTOPLAY_FAILED, event => {
@@ -77,6 +77,12 @@ function showCustomDialog(event) {
    - 首次播放远端流时，必须在用户点击事件的回调函数中直接调用播放接口
    - 不能使用 setTimeout 等异步方式调用播放接口，否则会导致播放失败
 
+3. **iframe 嵌入场景**：如果将 TRTC SDK 嵌入在 iframe 中运行，需要注意以下限制：
+   - 父页面的点击事件无法穿透到 iframe 内部。如果用户只点击了父页面（iframe 外部），iframe 内的 `document` 无法捕获该点击事件，SDK 自动恢复播放的监听不会被触发。
+   - 父页面建议为 iframe 添加 `allow="autoplay"` 属性，以授权 iframe 内页面使用自动播放能力。但 `allow="autoplay"` **不等于关闭浏览器自动播放策略**，它只是允许 iframe 尝试自动播放；对于有声媒体，浏览器仍可能要求用户先与 iframe 内页面产生交互。
+   - 如果使用 SDK 默认弹窗，请确保用户可以点击 iframe 内部的 SDK 弹窗来恢复播放。
+   - 如果需要自定义交互体验，可以关闭 SDK 默认弹窗（`enableAutoPlayDialog: false`），监听 `AUTOPLAY_FAILED` 事件，并在 iframe 内部展示自定义按钮，引导用户点击后调用事件中的 `resume()` 方法恢复播放。
+
 ## Webview 中关闭自动播放策略限制
 
 在 Android 和 iOS Webview 中的默认自动播放策略可能和浏览器中的不一致，您可以参考如下文档，在您的 App 中关闭自动播放限制。

package/resource/{doc → knowledge}/rtcengine/web/plugin/22-advanced-audio-mixer.md

@@ -1,6 +1,6 @@
 ## 功能描述
 
-本文将介绍如何在通话过程中增加背景音乐的功能，点击 [体验 demo](https://web.sdk.qcloud.com/trtc/webrtc/demo/api-sample/improve-audio-mixer.html?roomID=43222) 进行体验。
+本文将介绍如何在通话过程中增加背景音乐的功能，点击 [体验 demo](https://web.sdk.qcloud.com/trtc/webrtc/demo/api-sample/improve-audio-mixer.html) 进行体验。
 
 ## 前提条件
 

package/resource/{doc → knowledge}/rtcengine/web/plugin/23-advanced-support-detection.md

@@ -210,7 +210,7 @@ trtc.off(TRTC.EVENT.PERMISSION_STATE_CHANGE);
 
 #### 6. 网络检测
 
-参考：[通话前的网络质量检测](./tutorial-24-advanced-network-quality.html)
+参考：[通话前的网络质量检测](tutorial-24-advanced-network-quality.md)
 
 ## TRTC 能力检测页面
 

package/resource/{doc → knowledge}/rtcengine/web/plugin/24-advanced-network-quality.md

@@ -1,6 +1,6 @@
 在进房之前或在通话过程中，检测用户的网络质量，可以判断用户当下的网络质量情况。若用户网络质量太差，应建议用户检查网络或尝试更换网络，以保证正常通话质量。
 
-本文主要介绍如何基于 [NETWORK_QUALITY](./module-EVENT.html#.NETWORK_QUALITY) 事件实现通话过程及通话前网络质量检测。
+本文主要介绍如何基于 [NETWORK_QUALITY](module-EVENT.md#.NETWORK_QUALITY) 事件实现通话过程及通话前网络质量检测。
 
 ## 通话过程中的网络质量检测
 
@@ -21,10 +21,10 @@ trtc.on(TRTC.EVENT.NETWORK_QUALITY, event => {
 
 ### 实现流程
 
-1. 调用 [TRTC.create](./TRTC.html#.createTRTC) 创建两个 trtc 对象，分别称为 uplinkTRTC 和 downlinkTRTC。
+1. 调用 [TRTC.create](TRTC.md#.createTRTC) 创建两个 trtc 对象，分别称为 uplinkTRTC 和 downlinkTRTC。
 2. 这两个 TRTC 都进入同一个房间。
-3. 使用 uplinkTRTC 进行推流，监听 [NETWORK_QUALITY](./module-EVENT.html#.NETWORK_QUALITY) 事件来检测上行网络质量。
-4. 使用 downlinkTRTC 进行拉流，监听 [NETWORK_QUALITY](./module-EVENT.html#.NETWORK_QUALITY) 事件来检测下行网络质量。
+3. 使用 uplinkTRTC 进行推流，监听 [NETWORK_QUALITY](module-EVENT.md#.NETWORK_QUALITY) 事件来检测上行网络质量。
+4. 使用 downlinkTRTC 进行拉流，监听 [NETWORK_QUALITY](module-EVENT.md#.NETWORK_QUALITY) 事件来检测下行网络质量。
 5. 整个过程可持续 15s 左右，最后取平均网络质量，从而大致判断出上下行网络情况。
 
 > !
@@ -131,5 +131,5 @@ setTimeout(() => {
 
 > 建议：当网络质量大于3时，应引导用户检查网络并尝试更换网络环境，否则难以保证正常的音视频通话。
 > 也可通过下述策略来降低带宽消耗：
-> - 若上行网络质量大于3，则可通过 [TRTC.updateLocalVideo()](./TRTC.html#updateLocalVideo) 接口降低码率 或 [TRTC.stopLocalVideo()](./TRTC.html#stopLocalVideo) 方式关闭视频，以降低上行带宽消耗。
-> - 若下行网络质量大于3，则可通过订阅小流（参考：[开启大小流传输](./tutorial-27-advanced-small-stream.html)）或者只订阅音频的方式，以降低下行带宽消耗。
+> - 若上行网络质量大于3，则可通过 [TRTC.updateLocalVideo()](TRTC.md#updateLocalVideo) 接口降低码率 或 [TRTC.stopLocalVideo()](TRTC.md#stopLocalVideo) 方式关闭视频，以降低上行带宽消耗。
+> - 若下行网络质量大于3，则可通过订阅小流（参考：[开启大小流传输](tutorial-27-advanced-small-stream.md)）或者只订阅音频的方式，以降低下行带宽消耗。

package/resource/{doc → knowledge}/rtcengine/web/plugin/25-advanced-device-change.md

@@ -6,7 +6,7 @@
 > SDK 会检测摄像头、麦克风的插拔行为，并在恰当时机，自动恢复采集。具体逻辑如下：
 > 1. 若当前正在推流的摄像头/麦克风被拔出，SDK 会尝试使用剩余可用的媒体设备，恢复采集。
 > 2. 若摄像头/麦克风被拔出后，没有可用的媒体设备。SDK 会检测设备插入行为，若插入了新的可用的媒体设备，SDK 会尝试使用新插入的媒体设备，恢复采集并推流。
-> 3. 若恢复失败，则会抛出错误 [TRTC.ERROR_CODE.DEVICE_ERROR](./module-ERROR_CODE.html#.DEVICE_ERROR)，extraCode 为 5308，5309。
+> 3. 若恢复失败，则会抛出错误 [TRTC.ERROR_CODE.DEVICE_ERROR](module-ERROR_CODE.md#.DEVICE_ERROR)，extraCode 为 5308，5309。
 
 ## 实现流程
 

package/resource/{doc → knowledge}/rtcengine/web/plugin/26-advanced-publish-cdn-stream.md

@@ -45,7 +45,7 @@ const trtc = TRTC.create({ plugins: [CDNStreaming] });
 - `trtc.updatePlugin('CDNStreaming', options)` - 更新参数（0 或 N 次）
 - `trtc.stopPlugin('CDNStreaming', options)` - 停止插件
 
-详细的 `options` 参数可见 [CDNStreamingOptions](./global.html#CDNStreamingOptions)。
+详细的 `options` 参数可见 [CDNStreamingOptions](global.md#CDNStreamingOptions)。
 
 ## 转推单流到 CDN
 
@@ -157,7 +157,7 @@ try {
 
 > 坐标系说明：原点 (0, 0) 位于输出画布的**左上角**，单位为像素。locationX/locationY 是每路流的左上角位置；width/height 是布局区域大小。坐标和尺寸与 encoding.videoWidth/videoHeight 相关联——如果更改分辨率，需要相应地缩放布局参数以避免错位。
 >
-> 完整参数详情请参考 [CDNStreamingOptions](./global.html#CDNStreamingOptions)。
+> 完整参数详情请参考 [CDNStreamingOptions](global.md#CDNStreamingOptions)。
 
 ### 开启混流
 
@@ -321,7 +321,7 @@ try {
 > - 此功能会自动在当前房间进入一个 userId 为 `mcu_robot_${roomId}_${userId}` 的拉流机器人，房间内其他 userId 要避免相同导致互踢
 > - 此功能混流会有转码费用
 > - audioMixUserList 为空时默认混所有人，若不需要混流可传入不存在的 userId
-> - 完整参数详情请参考 [CDNStreamingOptions](./global.html#CDNStreamingOptions)
+> - 完整参数详情请参考 [CDNStreamingOptions](global.md#CDNStreamingOptions)
 
 ### 开启回推
 
@@ -420,7 +420,7 @@ try {
 
 ## API 说明
 
-对于 `startPlugin('CDNStreaming', options)` 与 `updatePlugin('CDNStreaming', options)`，参数类型可见 [CDNStreamingOptions](./global.html#CDNStreamingOptions)。
+对于 `startPlugin('CDNStreaming', options)` 与 `updatePlugin('CDNStreaming', options)`，参数类型可见 [CDNStreamingOptions](global.md#CDNStreamingOptions)。
 
 对于 `stopPlugin('CDNStreaming', options)`，参数只需要填入 `options.target.publishMode` 字段即可。
 

package/resource/{doc → knowledge}/rtcengine/web/plugin/27-advanced-small-stream.md

@@ -14,7 +14,7 @@
 
 #### 1. 推流端开启大小流
 
-在 [startLocalVideo](./TRTC.html#startLocalVideo) 时，填写 small 参数，可以开启小流编码。
+在 [startLocalVideo](TRTC.md#startLocalVideo) 时，填写 small 参数，可以开启小流编码。
 
 ```js
 await trtc.startLocalVideo({ option: { small: '120p' }});
@@ -34,7 +34,7 @@ await trtc.updateLocalVideo({ option: { small: false }});
 
 #### 2. 拉流端选择拉大流或小流
 
-在 [startRemoteVideo](./TRTC.html#startRemoteVideo) 时，填写 small 参数，可以拉小流，否则默认订阅大流。
+在 [startRemoteVideo](TRTC.md#startRemoteVideo) 时，填写 small 参数，可以拉小流，否则默认订阅大流。
 
 拉小流时，不需要提前判断远端用户是否有推小流，若远端没有推小流，则 SDK 会自动拉大流。后续若该远端用户推小流了，SDK 会自动切换到拉小流。
 
@@ -49,7 +49,7 @@ trtc.on(TRTC.EVENT.REMOTE_VIDEO_AVAILABLE, ({ userId, streamType }) => {
 })
 ```
 
-在 [updateRemoteVideo](./TRTC.html#updateRemoteVideo) 时，填写 small 参数，可以切换指定 userId 的大小流。常用于实现这样的功能：用户点击“小画面”时，切换到“大画面”播放；用户点击“大画面”时，切换到“小画面”播放。
+在 [updateRemoteVideo](TRTC.md#updateRemoteVideo) 时，填写 small 参数，可以切换指定 userId 的大小流。常用于实现这样的功能：用户点击“小画面”时，切换到“大画面”播放；用户点击“大画面”时，切换到“小画面”播放。
 
 ```js
 // 用户点击“小画面”时，切换到“大画面”播放
@@ -108,7 +108,7 @@ await trtc.stopPlugin('SmallStreamAutoSwitcher');
 
 通常来说，多人视频场景下，由于页面空间有限，拉流端不会将所有的视频都展示在页面上。因此，对于那些不需要在页面上展示的远端视频，就可以不用拉流。只有 view 可视时，才拉视频流。以达到节省流量和降低性能开销的目的。
 
-而实现这个功能，并不是一件容易的事情。在 v5.4.0 版本开始，SDK 内置了该功能，您只需要在 [startRemoteVideo](./TRTC.html#startRemoteVideo) 时，设置 `receiveWhenViewVisible` 及 `viewRoot` 参数，即可开启该功能，非常方便快捷。SDK 会自动判断您在 startRemoteVideo 时传入的 view 的可视状态，当 view 可视时拉流，当 view 不视时，停止拉流。
+而实现这个功能，并不是一件容易的事情。在 v5.4.0 版本开始，SDK 内置了该功能，您只需要在 [startRemoteVideo](TRTC.md#startRemoteVideo) 时，设置 `receiveWhenViewVisible` 及 `viewRoot` 参数，即可开启该功能，非常方便快捷。SDK 会自动判断您在 startRemoteVideo 时传入的 view 的可视状态，当 view 可视时拉流，当 view 不视时，停止拉流。
 
 ### 代码示例
 

package/resource/{doc → knowledge}/rtcengine/web/plugin/31-advanced-plugins-overview.md

@@ -13,7 +13,7 @@ TRTC Web SDK v5 提供了插件系统，支持按需加载各种音视频增强
 
 | 插件名称 | 功能说明 | 版本要求 | 套餐要求 | 静态资源 | 文档链接 |
 |---------|---------|---------|---------|---------|---------|
-| **Beauty** | 专业美颜，支持磨皮、美白、瘦脸等 6 种参数 + 10 种 2D 特效贴纸 | ≥ 5.5.0 | 专业版 | - | {@tutorial 28-advanced-beauty} |
+| **Beauty** | 专业美颜，支持磨皮、美白、瘦脸等 6 种参数 + 10 种 2D 特效贴纸 | ≥ 5.5.0 | 专业版 | - | [开启高级美颜](https://cloud.tencent.com/document/product/647/82647) |
 | **BasicBeauty** | 基础美颜，支持美颜、明亮、红润 3 种参数 | ≥ 5.7.0 | 无 | - | {@tutorial 38-advanced-basic-beauty} |
 | **VirtualBackground** | 虚拟背景，支持背景虚化、图片背景、人脸居中 | ≥ 5.2.0 | 旗舰版 | 需要 | {@tutorial 36-advanced-virtual-background} |
 | **Watermark** | 视频水印，支持添加图片水印 | ≥ 5.3.2 | 无 | - | {@tutorial 29-advanced-water-mark} |