Merge pull request AgoraIO#78 from yoreland/support_cloud_proxy

ADC-2700: support cloud proxy settings
jindingping · Jun 8, 2020 · 417ef2a · 417ef2a
2 parents 4398815 + 86efbde
commit 417ef2a
Show file tree

Hide file tree

Showing 5 changed files with 108 additions and 2 deletions.
diff --git a/TroubleShooting/Agora-WebRTC-Troubleshooting/package.json b/TroubleShooting/Agora-WebRTC-Troubleshooting/package.json
@@ -7,7 +7,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "agora-rtc-sdk": "3.0.2",
+    "agora-rtc-sdk": "3.1.1",
     "echarts": "^4.7.0",
     "register-service-worker": "^1.0.0",
     "v-charts": "^1.19.0",

diff --git a/TroubleShooting/Agora-WebRTC-Troubleshooting/src/App.vue b/TroubleShooting/Agora-WebRTC-Troubleshooting/src/App.vue
@@ -32,6 +32,24 @@
                   {{text.following_step}}
                 </div>
               </v-card-title>
+              <v-card-text class="proxy">
+                <v-label>{{text.cloudProxy}}</v-label>
+                <v-btn-toggle v-model.lazy="isEnableCloudProxy" rounded>
+                  <v-btn :value=true @click.native="toggleProxy(true)">{{text.cloudProxy_enable}}</v-btn>
+                  <v-btn :value=false @click.native="toggleProxy(false)">{{text.cloudProxy_disable}}</v-btn>
+                </v-btn-toggle>
+              </v-card-text>
+              <v-card-text class="proxy" v-if="isEnableCloudProxy">
+                <v-label>{{text.cloudProxy_mode}}</v-label>
+                <v-btn-toggle v-model.lazy="fixProxyPort"rounded>
+                  <v-btn :value=false @click.native="toggleProxyMode(false)">{{text.cloudProxy_default}}</v-btn>
+                  <v-btn :value=true @click.native="toggleProxyMode(true)">{{text.cloudProxy_fix}}</v-btn>
+                </v-btn-toggle>
+                <v-card-text class="tip" v-if="fixProxyPort">
+                  <span class="tip_icon"></span>{{text.cloudProxy_tips}}
+                  <a href="https://docs.agora.io/cn/Audio%20Broadcast/cloud_proxy_web?platform=Web">{{text.cloudProxy_tips_link}}</a>
+                </v-card-text>
+              </v-card-text>
               <v-card-text>
                 <v-list>
                   <v-list-tile v-for="item in testSuites" :key="item.id">
@@ -347,6 +365,8 @@ export default {
       inputVolume: 0,
       renderChart: false,
       testing: false,
+      isEnableCloudProxy: false,
+      fixProxyPort: false,
       profiles: profileArray.map(item => {
         item.status = "pending";
         return item;
@@ -474,6 +494,14 @@ export default {
       this.recvId = Number.parseInt(String(this.ts).slice(7), 10) * 10 + 2;
       this.sendClient = AgoraRtc.createClient({ mode: 'live', codec: 'h264' });
       this.recvClient = AgoraRtc.createClient({ mode: 'live', codec: 'h264' });
+      if(this.isEnableCloudProxy && this.fixProxyPort){
+        this.sendClient.startProxyServer(2);
+        this.recvClient.startProxyServer(2);
+      }
+      else if(this.isEnableCloudProxy && !this.fixProxyPort){
+        this.sendClient.startProxyServer();
+        this.recvClient.startProxyServer();
+      }
     },
 
     initSendClient() {
@@ -624,6 +652,10 @@ export default {
         this.sendClient.unpublish(this.sendStream);
         this.sendClient.leave();
         this.recvClient.leave();
+        if(this.isEnableCloudProxy){
+          this.sendClient.stopProxyServer();
+          this.recvClient.stopProxyServer();
+        }
         clearInterval(this.detectInterval);
       } catch (err) {
         throw(err);
@@ -794,6 +826,14 @@ export default {
       this.handleCameraCheck();
     },
 
+    toggleProxy(val) {
+      this.isEnableCloudProxy = val;
+    },
+
+    toggleProxyMode(val) {
+      this.fixProxyPort = val;
+    },
+
     async handleCameraCheck() {
       this.currentTestSuite = "3";
       let testSuite = this.testSuites["3"];
@@ -1027,4 +1067,53 @@ export default {
   min-height: 48px!important;
   height: auto!important;
 }
+
+  .proxy {
+    font-size: 12px;
+    margin-left: 16px;
+    margin-top: 12px;
+    text-align: end;
+    padding-right: 60px !important;
+  }
+  .proxy .v-label {
+    color: #333333;
+    width: 100px;
+    display: block;
+    float: left;
+    line-height: 36px;
+    height: 36px;
+    text-align: start;
+  }
+  .proxy .v-btn__content {
+    font-size: 12px;
+  }
+  .proxy .v-btn-toggle .v-btn{
+    width: 80px;
+  }
+  .proxy .v-btn-toggle .v-btn.v-btn--active {
+    background-color: dodgerblue;
+    color: white;
+  }
+  .tip {
+    color: #666666;
+    font-size: 12px;
+    padding-left: 36px;
+  }
+  .tip_icon{
+    background-repeat: no-repeat;
+    position: absolute;
+    background-image: url("./assets/info.png");
+    background-size: 18px;
+    display: inline-block;
+    width: 18px;
+    height: 18px;
+    margin-left: -24px;
+  }
+  .v-card__text {
+    padding: 0 16px;
+    width: 100%;
+  }
+  .v-card {
+    min-width: 280px;
+  }
 </style>
diff --git a/TroubleShooting/Agora-WebRTC-Troubleshooting/src/assets/info.png b/TroubleShooting/Agora-WebRTC-Troubleshooting/src/assets/info.png
diff --git a/TroubleShooting/Agora-WebRTC-Troubleshooting/src/utils/i18n/en.js b/TroubleShooting/Agora-WebRTC-Troubleshooting/src/utils/i18n/en.js
@@ -49,5 +49,14 @@ export default {
   'Video_Packet_Loss': 'Video Packet Loss',
   'Audio_Packet_Loss': 'Audio Packet Loss',
   'some_functions_may_be_limited': 'Some functions may be limited',
-  'videoText': 'The device does not support the current resolution'
+  'videoText': 'The device does not support the current resolution',
+  'cloudProxy': 'Cloud Proxy',
+  'cloudProxy_enable': 'enable',
+  'cloudProxy_disable': 'disable',
+  'cloudProxy_mode': 'Proxy Mode',
+  'cloudProxy_default': 'default',
+  'cloudProxy_fix': 'TCP 443',
+  'cloudProxy_tips': 'To use proxy via TCP port 443 only, please call startProxyServer(2), for details please check:',
+  'cloudProxy_tips_link': 'here'
+
 }
diff --git a/TroubleShooting/Agora-WebRTC-Troubleshooting/src/utils/i18n/zh.js b/TroubleShooting/Agora-WebRTC-Troubleshooting/src/utils/i18n/zh.js
@@ -50,4 +50,12 @@ export default {
   'Audio_Packet_Loss': '音频包丢失',
   'some_functions_may_be_limited': '有些功能受限',
   'videoText': '设备不支持当前分辨率',
+  'cloudProxy': '设置云代理',
+  'cloudProxy_enable': '启用',
+  'cloudProxy_disable': '禁用',
+  'cloudProxy_mode': '设置代理模式',
+  'cloudProxy_default': '默认',
+  'cloudProxy_fix': '固定TCP443',
+  'cloudProxy_tips': '若使用固定端口，调用云代理API时，请使用startProxyServer(2)，详见：',
+  'cloudProxy_tips_link': '文档'
 }