feat: update Web/base-react-next

Author: Rychou

Web/base-react-next/README.md

@@ -232,7 +232,10 @@ WebRTC 技术由 Google 最先提出，目前主要在桌面版 Chrome 浏览器
 <span id="requirements"></span>
 ## 环境要求
 - 请使用最新版本的 Chrome 浏览器。
-- TRTC Web SDK 依赖以下端口进行数据传输，请将其加入防火墙白名单，参考：[WebRTC 需要配置哪些端口或域名为白名单？](https://cloud.tencent.com/document/product/647/34399#webrtc-.E9.9C.80.E8.A6.81.E9.85.8D.E7.BD.AE.E5.93.AA.E4.BA.9B.E7.AB.AF.E5.8F.A3.E6.88.96.E5.9F.9F.E5.90.8D.E4.B8.BA.E7.99.BD.E5.90.8D.E5.8D.95.EF.BC.9F) 配置完成后，您可以通过访问并体验 [官网 Demo](https://web.sdk.qcloud.com/trtc/webrtc/demo/api-sample/basic-rtc.html) 检查配置是否生效。 
+- TRTC Web SDK 依赖以下端口进行数据传输，请将其加入防火墙白名单，配置完成后，您可以通过访问并体验 [官网 Demo](https://trtc-1252463788.file.myqcloud.com/web/demo/official-demo/index.html) 检查配置是否生效。
+ - TCP 端口：8687
+ - UDP 端口：8000；8080；8800；843；443；16285
+ - 域名：qcloud.rtc.qq.com
 
 ## 常见问题
 

Web/base-react-next/package.json

@@ -35,10 +35,10 @@
     "react-dom": "17.0.2",
     "react-i18next": "^11.8.15",
     "rtc-audio-mixer": "0.0.1",
-    "rtc-beauty-plugin": "^0.0.6",
+    "rtc-beauty-plugin": "^0.0.7",
     "rtc-device-detector-react": "^1.0.4",
     "sass": "^1.32.12",
-    "trtc-js-sdk": "latest"
+    "trtc-js-sdk": "^4.11.7"
   },
   "devDependencies": {
     "eslint-config-tencent": "^1.0.0",

Web/base-react-next/src/components/RtcClient/improve-publishCDNStream-rtc-client.js

@@ -21,14 +21,14 @@ class Client extends RTC {
   // ref: https://web.sdk.qcloud.com/trtc/webrtc/doc/zh-cn/Client.html#startPublishCDNStream
 
   // example 1：“全局自动旁路”模式下，修改当前用户音视频流在腾讯云 CDN 对应的 StreamId
-  // handleStartPublishCDNStream() {
+  // async handleStartPublishCDNStream() {
   //   if (!this.streamID) {
   //     Toast.error('please input streamID');
   //     return;
   //   }
   //   const options = { streamId: this.streamID };
   //   try {
-  //     this.client.startPublishCDNStream(options);
+  //     await this.client.startPublishCDNStream(options);
   //     Toast.success('start publishCDNStream success', 2000);
   //   } catch (error) {
   //     console.error('start publishCDNStream error', error);
@@ -37,9 +37,9 @@ class Client extends RTC {
   // }
 
   // example 2：“指定流旁路”模式下，以默认 streamId: ${sdkAppId}_${roomId}_${userId}_main 发布当前用户音视频流到腾讯云 CDN
-  // handleStartPublishCDNStream() {
+  // async handleStartPublishCDNStream() {
   //   try {
-  //     this.client.startPublishCDNStream();
+  //     await this.client.startPublishCDNStream();
   //     Toast.success('start publishCDNStream success', 2000);
   //   } catch (error) {
   //     console.error('start publishCDNStream error', error);
@@ -48,13 +48,13 @@ class Client extends RTC {
   // }
 
   // example 3：“指定流旁路”模式下，以指定 streamId 发布当前用户音视频流到腾讯云 CDN
-  // handleStartPublishCDNStream() {
+  // async handleStartPublishCDNStream() {
   //   if (!this.streamID) {
   //     Toast.error('please input streamID');
   //   }
   //   const options = { streamId: this.streamID };
   //   try {
-  //     this.client.startPublishCDNStream(options);
+  //     await this.client.startPublishCDNStream(options);
   //     Toast.success('start publishCDNStream success', 2000);
   //   } catch (error) {
   //     console.error('start publishCDNStream error', error);
@@ -63,7 +63,7 @@ class Client extends RTC {
   // }
 
   // example 4: 将当前用户音视频流发布到指定的 CDN 地址
-  // handleStartPublishCDNStream() {
+  // async handleStartPublishCDNStream() {
   //   if (!this.appID || !this.bizID || !this.publishCDNUrl) {
   //     Toast.error('please input appID, bizID, publishCDNUrl');
   //   }
@@ -73,7 +73,7 @@ class Client extends RTC {
   //     url: this.publishCDNUrl,
   //   };
   //   try {
-  //     this.client.startPublishCDNStream(options);
+  //     await this.client.startPublishCDNStream(options);
   //     Toast.success('start publishCDNStream success', 2000);
   //   } catch (error) {
   //     console.error('start publishCDNStream error', error);
@@ -82,7 +82,7 @@ class Client extends RTC {
   // }
 
   // example 5: 修改当前用户音视频流在腾讯云 CDN 对应的 StreamId，并且发布当前用户音视频流到指定的 CDN 地址
-  handleStartPublishCDNStream() {
+  async handleStartPublishCDNStream() {
     if (!this.streamID || !this.appID || !this.bizID || !this.publishCDNUrl) {
       Toast.error('please input streamID, appID, bizID, publishCDNUrl');
       return;
@@ -94,7 +94,7 @@ class Client extends RTC {
       url: this.publishCDNUrl,
     };
     try {
-      this.client.startPublishCDNStream(options);
+      await this.client.startPublishCDNStream(options);
       Toast.success('start publishCDNStream success', 2000);
     } catch (error) {
       console.error('start publishCDNStream error', error);
@@ -104,9 +104,9 @@ class Client extends RTC {
 
 
   // ref: https://web.sdk.qcloud.com/trtc/webrtc/doc/zh-cn/Client.html#stopPublishCDNStream
-  handleStopPublishCDNStream() {
+  async handleStopPublishCDNStream() {
     try {
-      this.client.stopPublishCDNStream();
+      await this.client.stopPublishCDNStream();
       Toast.success('start publishCDNStream success', 2000);
     } catch (error) {
       console.error('start publishCDNStream error', error);