Merge pull request #92 from AgoraIO/dev/2.2.0

feat: Simplify event processing logic and improve code readability

Author: HugoChaan

src/CHANGELOG.md

@@ -11,6 +11,10 @@
 7. Introduce a dropdown menu for selecting to subscribe to remote users.  
 8. Add a direct link to GitHub for convenient access.
 9. Support the addition of dynamic tokens for channel entry.
-10. Introduce error messages for invalid token/app ID inputs.  
-11. Extend the display duration of messages.  
-12. Provide distinct documentation links for app ID/token configuration based on domestic and overseas contexts.  
+
+## [2.1.0] - 2024-12-30
+
+1. Add translate
+2. Add rule verification for appid
+3. Enter appid to save automatically
+4. Corrected some boot links

src/common/common.css

@@ -470,3 +470,7 @@ button#join, button#leave {
     margin-top: 0.5rem !important;
   }
 }
+
+.overflow-hidden {
+  overflow: hidden;
+}

src/common/constant.js

@@ -7,6 +7,10 @@ const ORIGIN_URL = __calcOriginUrl();
 const SETUP_PAGE_URL = `${ORIGIN_URL}/index.html`; // setup page url
 let REDIRECT_URI = ""; // sso redirect uri
 let BASE_URL = ""; // request base url
+let channel_link = "https://doc.shengwang.cn/doc/rtc/javascript/basic-features/join-leave-channel#%E5%8A%A0%E5%85%A5%E9%A2%91%E9%81%93";
+let appCertificateLink = "https://doc.shengwang.cn/doc/rtc/javascript/get-started/enable-service#%E8%8E%B7%E5%8F%96-app-%E8%AF%81%E4%B9%A6";
+let appIdLink = "https://doc.shengwang.cn/doc/rtc/javascript/get-started/enable-service#%E8%8E%B7%E5%8F%96-app-id";
+let proxyLink = "https://doc.shengwang.cn/doc/rtc/javascript/basic-features/firewall#%E4%BA%91%E4%BB%A3%E7%90%86%E6%96%B9%E6%A1%88";
 
 switch (ENV) {
   case "dev":
@@ -20,7 +24,7 @@ switch (ENV) {
     break;
   case "prod":
     BASE_URL = "https://service.agora.io/toolbox";
-    REDIRECT_URI = "https://webdemo.agora.io/sso/index.html";
+    REDIRECT_URI = `${origin}/sso/index.html`;
     break;
 }
 
@@ -39,6 +43,17 @@ let MENU_LIST = [
   },
   {
     name: "quickMenu",
+    data: [{
+      name: "videoAndVoiceCalling",
+      url: `${ORIGIN_URL}/example/quickStart/videoAndVoiceCalling/index.html`,
+      zhDocUrl: "https://doc.shengwang.cn/doc/rtc/javascript/get-started/quick-start",
+      enDocUrl: "https://docs.agora.io/en/video-calling/get-started/get-started-sdk?platform=web",
+      githubUrl:
+        "https://github.com/AgoraIO/API-Examples-Web/tree/main/src/example/quickStart/videoAndVoiceCalling",
+    }]
+  },
+  {
+    name: "basicMenu",
     data: [
       {
         name: "basicVoiceCall",
@@ -279,19 +294,22 @@ let MENU_LIST = [
 ];
 
 if (AREA == "external") {
+  channel_link = "https://docs.agora.io/en/voice-calling/reference/glossary?platform=android#channel";
+  appCertificateLink = "https://docs.agora.io/en/voice-calling/reference/glossary?platform=android#app-certificate";
+  appIdLink = "https://docs.agora.io/en/voice-calling/reference/glossary?platform=android#app-id";
+  proxyLink = "https://docs.agora.io/en/voice-calling/reference/glossary?platform=android#-2";
+
   // hide pushStreamToCDN item in othersMenu
-  const othersMenu = MENU_LIST[4];
-  if (othersMenu.name == "othersMenu") {
-    othersMenu.data = MENU_LIST[4].data.filter((item) => item.name !== "pushStreamToCDN");
-    // add stt case
-    othersMenu.data.push({
-      name: "stt",
-      url: `https://stt-demo.agora.io/`,
-      zhDocUrl: "",
-      enDocUrl: "",
-      githubUrl: "",
-    });
-  }
+  const othersMenuIndex = MENU_LIST.findIndex((item) => item.name == "othersMenu");
+  MENU_LIST[othersMenuIndex].data = MENU_LIST[othersMenuIndex].data.filter((item) => item.name !== "pushStreamToCDN");
+  // add stt case
+  MENU_LIST[othersMenuIndex].data.push({
+    name: "stt",
+    url: `https://stt-demo.agora.io/`,
+    zhDocUrl: "",
+    enDocUrl: "",
+    githubUrl: "",
+  });
 }
 
 function __calcOriginUrl() {

src/common/left-menu.js

@@ -18,14 +18,14 @@ function __transListToMenuDom(list) {
  </div>
  <div class="sidebar-list">
    ${item.data
-     .map((item, index) => {
-       return `
+          .map((item, index) => {
+            return `
      <div class="sidebar-item" data-index="${index}">
        <a href="${item.url}" class="i18n" name="${item.name}"> </a>
      </div>
      `;
-     })
-     .join("")}
+          })
+          .join("")}
  </div>
 </div>`;
     })
@@ -55,7 +55,9 @@ function __initMenu() {
       </span>
     </div>
   </div> 
-  ${__transListToMenuDom(MENU_LIST)}
+  <div class="sidebar-bottom">
+    ${__transListToMenuDom(MENU_LIST)}
+    </div
   </div >
     `;
 
@@ -95,6 +97,12 @@ function __hightlightMenu() {
   if (!targetNode.length) {
     targetNode = $(`.sidebar-item:has(a[href = "${href}index.html"])`);
   }
+  if (!targetNode.length) {
+    targetNode = $(`.sidebar-item:has(a[data-href = "${href}index.html#"])`);
+  }
+  if (!targetNode.length) {
+    targetNode = $(`.sidebar-item:has(a[data-href = "${href}"])`);
+  }
   targetNode.addClass("active");
   const sidebarMenu = targetNode.closest(".sidebar-menu");
   if (sidebarMenu && sidebarMenu.length) {
@@ -144,12 +152,11 @@ function __initListener() {
 
   $(".sidebar-item").click(function (e) {
     const href = $(this).find("a")[0].href;
-    if (href == SETUP_LIST[0].url) {
-      localStorage.removeItem("__setupJumpHref");
-    }
+    // if (href == SETUP_LIST[0].url) {
+    //   localStorage.removeItem("__setupJumpHref");
+    // }
   });
 }
-
 // ----------------- init -----------------
 window.addEventListener("load", function (e) {
   __initMenu();

src/common/utils.js

@@ -294,7 +294,7 @@ function getJumpBackUrl() {
   if (href) {
     sessionStorage.removeItem(JUMP_BACK_URL_KEY);
   } else {
-    href = `${ORIGIN_URL}/example/basic/basicVoiceCall/index.html`;
+    href = `${ORIGIN_URL}/example/quickStart/videoAndVoiceCalling/index.html`;
   }
 
   return href;
@@ -345,6 +345,9 @@ async function agoraContentInspect(localVideoTrack) {
   }, 1000 * 10);
 }
 
+// The token used in the demo is solely for testing purposes; 
+// users are required to deploy their own token server to obtain the service.
+
 async function agoraGetAppData(config) {
   const { uid, channel } = config;
   const { appid, certificate } = getOptionsFromLocal();
@@ -413,17 +416,51 @@ async function agoraGetProjects() {
     }),
   });
   resp = (await resp.json()) || {};
+  if (resp.code == 138) {
+    throw new Error("access_token is invalid, please login again");
+  }
+
   if (resp.code != 0) {
-    message.error("Generate token error, please check your appid and appcertificate parameters");
+    message.error(resp.msg);
     throw Error(resp.msg);
   }
   return resp.data;
 }
 
+function generateRandomString(length) {
+
+  const options = getOptionsFromLocal();
+  if (options.channel && options.channel.length === length) {
+    return options.channel;
+  }
+  
+  // const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+  const characters = '0123456789';
+  let result = '';
+  const charactersLength = characters.length;
+  for (let i = 0; i < length; i++) {
+    result += characters.charAt(Math.floor(Math.random() * charactersLength));
+  }
+  setOptionsToLocal({channel: result});
+  
+}
+
+
+
+
 // ---------------------- agora ----------------------------
 
 // exec functions
 __queryUrlParams();
 __checkLocalOptions();
 __addAppInfoUI();
 __checkExperienceTime();
+generateRandomString(6);
+
+
+$(() => {
+  const options = getOptionsFromLocal();
+  $('#channel').val(options.channel);
+  $('#channel-2').val(`${options.channel}2`);
+  $('#channel-link').attr("href",channel_link);
+})

src/example/advanced/adjustVideoProfile/index.html

@@ -48,10 +48,11 @@
             <div class="mt-2">
               <label class="form-label">Channel</label>
               <input class="form-control" id="channel" type="text" placeholder="enter channel name" required>
-              <div class="tips">If you don`t know what is your channel, checkout <a
-                  href="https://docs.agora.io/en/Agora%20Platform/terms?platform=All%20Platforms#channel">this</a></div>
-            </div>
-            <div class="mt-2">
+              <div class="tips">If you don`t know what is your channel, checkout
+          <a id="channel-link">this</a>
+              </div>
+              </div>
+              <div class="mt-2">
               <label class="form-label">User ID(optional)
             </div>
             <input class="form-control" id="uid" type="text" onkeyup="this.value=this.value.replace(/[^0-9]/g,'')"

src/example/advanced/audioEffects/index.html

@@ -48,12 +48,9 @@
               />
               <div class="tips">
                 If you don`t know what is your channel, checkout
-                <a
-                  href="https://docs.agora.io/en/Agora%20Platform/terms?platform=All%20Platforms#channel"
-                  >this</a
-                >
-              </div>
-            </div>
+                <a id="channel-link">this</a>
+                </div>
+                </div>
             <div class="mt-2">
               <label class="form-label">User ID(optional)</label>
               <input

src/example/advanced/customVideoSource/index.html

@@ -53,10 +53,7 @@
                 />
                 <div class="tips">
                   If you don`t know what is your channel, checkout
-                  <a
-                    href="https://docs.agora.io/en/Agora%20Platform/terms?platform=All%20Platforms#channel"
-                    >this</a
-                  >
+                  <a id="channel-link">this</a>
                 </div>
               </div>
               <div class="mt-2">
@@ -86,6 +83,19 @@
             </div>
           </form>
         </div>
+        <!-- confirm -->
+         <div class="modal fade" tabindex="-1" id="retry-play-alert">
+          <div class="modal-dialog modal-dialog-centered">
+            <div class="modal-content">
+              <div class="modal-body overflow-hidden">
+                <label class="i18n" name="autoPlayFailed"></label>
+              </div>
+              <div class="modal-footer">
+                <button id="retry-play" class="btn btn-primary btn-sm"  data-bs-dismiss="modal">Play</button>
+              </div>
+            </div>
+          </div>
+        </div>
         <!-- app info -->
         <div id="app-info"></div>
       </section>

src/example/advanced/customVideoSource/index.js

@@ -46,8 +46,13 @@ function isMobileSafari() {
   return /iP(ad|hone|od).+Version\/[\d.]+.*Safari/i.test(ua);
 }
 
+window.addEventListener("error", function (event) {
+  console.error("Error occurred: ", event.message);
+  message.error(`Error occurred: ${event.message}`);
+});
+
+
 $(() => {
-  console.log('update video attr 12343');
   if (isMobileSafari()) {
     $('#sample-video').attr('playsinline', 'true');
     $('#sample-video').attr('webkit-playsinline', 'true');
@@ -60,6 +65,7 @@ $(() => {
  */
 $("#join").click(async function (e) {
   e.preventDefault();
+  $('#retry-play-alert').modal('show');
   $("#join").attr("disabled", true);
   try {
     currentStream = $("#stream-source").val();
@@ -69,7 +75,11 @@ $("#join").click(async function (e) {
     // 移动端的safari浏览器需要用户的click事件手动触发视频播放
     if (currentStream !== "camera" && isMobileSafari()) {
       try {
-        videoFromDiv.play();
+        videoFromDiv.play().catch(error => {
+          console.error(error);
+          $('#retry-play-alert').removeClass("hidden");
+          $('#retry-play-alert').modal('show');
+        });
       } catch (error) {
         console.error(error);
         message.error(error.message);
@@ -137,7 +147,6 @@ const getCaptureStream = () => {
   let stream;
   const isFirefox = navigator.userAgent.indexOf("Firefox") > -1;
   const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
-  debugger;
   console.log('isFirefox', isFirefox);
   if (isFirefox) {
       stream = videoFromDiv.mozCaptureStream();
@@ -163,6 +172,20 @@ const getCaptureStream = () => {
   return null;
 }
 
+
+$('#retry-play').click(()=>{
+  videoFromDiv.play().catch(error => {
+    if (error.name === 'NotAllowedError') {
+      console.error('NotAllowedError: ', error);
+      message.error(error.message);
+    } else {
+      console.error(error);
+      message.error(error.message);
+    }
+  });
+})
+
+
 async function createAndPublishVideoTrack(){
 
   if (currentStream == "camera") {
@@ -172,7 +195,11 @@ async function createAndPublishVideoTrack(){
     // https://developers.google.com/web/updates/2016/10/capture-stream - captureStream()
     // can only be called after the video element is able to play video;
     try {
-      videoFromDiv.play();
+      videoFromDiv.play().catch(error => {
+        console.error(error);
+        $('#retry-play-alert').removeClass("hidden");
+        $('#retry-play-alert').modal('show');
+      });
     } catch (error) {
       console.error(error);
       message.error(error.message);

src/example/advanced/displayCallStats/index.html

@@ -51,10 +51,7 @@
                 />
                 <div class="tips">
                   If you don`t know what is your channel, checkout
-                  <a
-                    href="https://docs.agora.io/en/Agora%20Platform/terms?platform=All%20Platforms#channel"
-                    >this</a
-                  >
+                  <a id="channel-link">this</a>
                 </div>
               </div>
               <div class="mt-2">

src/example/advanced/displayCallStats/index.js

@@ -70,6 +70,7 @@ async function join() {
   console.log("publish success");
   initStats();
 }
+
 async function leave() {
   for (trackName in localTracks) {
     var track = localTracks[trackName];