From f224905929440f5ced317f5583d667f7af5f5897 Mon Sep 17 00:00:00 2001 From: rychouwei Date: Fri, 26 Nov 2021 23:02:03 +0800 Subject: [PATCH] feat: update Web/base-react-next --- Web/base-react-next/README.md | 5 +++- Web/base-react-next/package.json | 4 ++-- .../improve-publishCDNStream-rtc-client.js | 24 +++++++++---------- 3 files changed, 18 insertions(+), 15 deletions(-) diff --git a/Web/base-react-next/README.md b/Web/base-react-next/README.md index 4a06be5f..d2558195 100644 --- a/Web/base-react-next/README.md +++ b/Web/base-react-next/README.md @@ -232,7 +232,10 @@ WebRTC 技术由 Google 最先提出，目前主要在桌面版 Chrome 浏览器 ## 环境要求 - 请使用最新版本的 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 ## 常见问题 diff --git a/Web/base-react-next/package.json b/Web/base-react-next/package.json index d5c2d096..cf9c7e56 100644 --- a/Web/base-react-next/package.json +++ b/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", diff --git a/Web/base-react-next/src/components/RtcClient/improve-publishCDNStream-rtc-client.js b/Web/base-react-next/src/components/RtcClient/improve-publishCDNStream-rtc-client.js index 56d0fdf9..d3207414 100644 --- a/Web/base-react-next/src/components/RtcClient/improve-publishCDNStream-rtc-client.js +++ b/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);