4.2.1

AgoraIO-Community · Dec 25, 2020 · 6c190ee · 6c190ee
1 parent 99300cc
commit 6c190ee
Show file tree

Hide file tree

Showing 40 changed files with 2,254 additions and 1,186 deletions.
diff --git a/Demo/adjustVideoProfile/adjustVideoProfile.js b/Demo/adjustVideoProfile/adjustVideoProfile.js
@@ -1,4 +1,5 @@
-var client; // Agora client
+// create Agora client
+var client = AgoraRTC.createClient({ mode: "rtc", codec: "vp8" });
 var localTracks = {
   videoTrack: null,
   audioTrack: null
@@ -71,9 +72,6 @@ $("#leave").click(function (e) {
 })
 
 async function join () {
-  // create Agora client
-  client = AgoraRTC.createClient({ mode: "rtc", codec: "h264" });
-
   // add event listener to play remote tracks when remote user publishs.
   client.on("user-published", handleUserPublished);
   client.on("user-unpublished", handleUserUnpublished);
@@ -84,7 +82,7 @@ async function join () {
     client.join(options.appid, options.channel, options.token || null),
     // create local tracks, using microphone and camera
     AgoraRTC.createMicrophoneAudioTrack(),
-    AgoraRTC.createCameraVideoTrack()
+    AgoraRTC.createCameraVideoTrack({ encoderConfig: curVideoProfile.value })
   ]);
 
   // play local video track

diff --git a/Demo/adjustVideoProfile/index.html b/Demo/adjustVideoProfile/index.html
@@ -11,6 +11,10 @@
 <body>
   <div class="container-fluid banner">
     <p class="banner-text">Adjust Video Profile</p>
+    <a style="color: rgb(255, 255, 255);fill: rgb(255, 255, 255);fill-rule: evenodd; position: absolute; right: 10px; top: 4px;"
+      class="Header-link " href="https://github.com/AgoraIO-Community/AgoraWebSDK-NG/tree/master/Demo">
+      <svg class="octicon octicon-mark-github v-align-middle" height="32" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg>
+    </a>
   </div>
 
   <div id="success-alert" class="alert alert-success alert-dismissible fade show" role="alert">
@@ -74,7 +78,7 @@
 
   <script src="../assets/jquery-3.4.1.min.js"></script>
   <script src="../assets/bootstrap.bundle.min.js"></script>
-  <script src="https://download.agora.io/sdk/web/AgoraRTC_N.js"></script>
+  <script src="https://download.agora.io/sdk/release/AgoraRTC_N.jsN.js"></script>
   <script src="./adjustVideoProfile.js"></script>
 </body>
 </html>
diff --git a/Demo/audioMixingAndAudioEffect/audioMixingAndAudioEffect.js b/Demo/audioMixingAndAudioEffect/audioMixingAndAudioEffect.js
@@ -1,4 +1,5 @@
-var client; // Agora client
+// create Agora client
+var client = AgoraRTC.createClient({ mode: "rtc", codec: "vp8" });
 var localTracks = {
   videoTrack: null,
   audioTrack: null,
@@ -195,9 +196,6 @@ async function playEffect(cycle, options) {
 }
 
 async function join() {
-  // create Agora client
-  client = AgoraRTC.createClient({ mode: "rtc", codec: "h264" });
-
   // add event listener to play remote tracks when remote user publishs.
   client.on("user-published", handleUserPublished);
   client.on("user-unpublished", handleUserUnpublished);

diff --git a/Demo/audioMixingAndAudioEffect/index.html b/Demo/audioMixingAndAudioEffect/index.html
@@ -11,6 +11,10 @@
 <body>
   <div class="container-fluid banner">
     <p class="banner-text">Audio Mixing & Audio Effect</p>
+    <a style="color: rgb(255, 255, 255);fill: rgb(255, 255, 255);fill-rule: evenodd; position: absolute; right: 10px; top: 4px;"
+      class="Header-link " href="https://github.com/AgoraIO-Community/AgoraWebSDK-NG/tree/master/Demo">
+      <svg class="octicon octicon-mark-github v-align-middle" height="32" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg>
+    </a>
   </div>
 
   <div id="success-alert" class="alert alert-success alert-dismissible fade show" role="alert">
@@ -86,7 +90,7 @@
 
   <script src="../assets/jquery-3.4.1.min.js"></script>
   <script src="../assets/bootstrap.bundle.min.js"></script>
-  <script src="https://download.agora.io/sdk/web/AgoraRTC_N.js"></script>
+  <script src="https://download.agora.io/sdk/release/AgoraRTC_N.js"></script>
   <script src="./audioMixingAndAudioEffect.js"></script>
 </body>
 </html>
diff --git a/Demo/basicLive/basicLive.js b/Demo/basicLive/basicLive.js
@@ -1,4 +1,5 @@
-var client; // Agora client
+// create Agora client
+var client = AgoraRTC.createClient({ mode: "live", codec: "vp8" });
 var localTracks = {
   videoTrack: null,
   audioTrack: null
@@ -66,7 +67,7 @@ $("#leave").click(function (e) {
 
 async function join() {
   // create Agora client
-  client = AgoraRTC.createClient({ mode: "live", codec: "h264", role: options.role });
+  client.setClientRole(options.role);
 
   if (options.role === "audience") {
     // add event listener to play remote tracks when remote user publishs.

diff --git a/Demo/basicLive/index.html b/Demo/basicLive/index.html
@@ -11,6 +11,10 @@
 <body>
   <div class="container-fluid banner">
     <p class="banner-text">Basic Live</p>
+    <a style="color: rgb(255, 255, 255);fill: rgb(255, 255, 255);fill-rule: evenodd; position: absolute; right: 10px; top: 4px;"
+      class="Header-link " href="https://github.com/AgoraIO-Community/AgoraWebSDK-NG/tree/master/Demo">
+      <svg class="octicon octicon-mark-github v-align-middle" height="32" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg>
+    </a>
   </div>
 
   <div id="success-alert" class="alert alert-success alert-dismissible fade show" role="alert">
@@ -61,7 +65,7 @@
 
   <script src="../assets/jquery-3.4.1.min.js"></script>
   <script src="../assets/bootstrap.bundle.min.js"></script>
-  <script src="https://download.agora.io/sdk/web/AgoraRTC_N.js"></script>
+  <script src="https://download.agora.io/sdk/release/AgoraRTC_N.js"></script>
   <script src="./basicLive.js"></script>
 </body>
 </html>
diff --git a/Demo/basicVideoCall/basicVideoCall.js b/Demo/basicVideoCall/basicVideoCall.js
@@ -1,4 +1,6 @@
-var client; // Agora client
+// create Agora client
+var client = AgoraRTC.createClient({ mode: "rtc", codec: "vp8" });
+
 var localTracks = {
   videoTrack: null,
   audioTrack: null
@@ -52,8 +54,6 @@ $("#leave").click(function (e) {
 })
 
 async function join() {
-  // create Agora client
-  client = AgoraRTC.createClient({ mode: "rtc", codec: "h264" });
 
   // add event listener to play remote tracks when remote user publishs.
   client.on("user-published", handleUserPublished);
@@ -130,4 +130,4 @@ function handleUserUnpublished(user) {
   const id = user.uid;
   delete remoteUsers[id];
   $(`#player-wrapper-${id}`).remove();
-}
+}
diff --git a/Demo/basicVideoCall/index.html b/Demo/basicVideoCall/index.html
@@ -11,6 +11,10 @@
 <body>
   <div class="container-fluid banner">
     <p class="banner-text">Basic Video Call</p>
+    <a style="color: rgb(255, 255, 255);fill: rgb(255, 255, 255);fill-rule: evenodd; position: absolute; right: 10px; top: 4px;"
+      class="Header-link " href="https://github.com/AgoraIO-Community/AgoraWebSDK-NG/tree/master/Demo">
+      <svg class="octicon octicon-mark-github v-align-middle" height="32" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg>
+    </a>
   </div>
 
   <div id="success-alert" class="alert alert-success alert-dismissible fade show" role="alert">
@@ -72,7 +76,7 @@
 
   <script src="../assets/jquery-3.4.1.min.js"></script>
   <script src="../assets/bootstrap.bundle.min.js"></script>
-  <script src="https://download.agora.io/sdk/web/AgoraRTC_N.js"></script>
+  <script src="https://download.agora.io/sdk/release/AgoraRTC_N.js"></script>
   <script src="./basicVideoCall.js"></script>
 </body>
 </html>
diff --git a/Demo/displayCallStats/displayCallStats.js b/Demo/displayCallStats/displayCallStats.js
@@ -1,4 +1,5 @@
-var client; // Agora client
+// create Agora client
+var client = AgoraRTC.createClient({ mode: "rtc", codec: "vp8" });
 var localTracks = {
   videoTrack: null,
   audioTrack: null
@@ -54,9 +55,6 @@ $("#leave").click(function (e) {
 })
 
 async function join() {
-  // create Agora client
-  client = AgoraRTC.createClient({ mode: "rtc", codec: "h264" });
-
   // add event listener to play remote tracks when remote user publishs.
   client.on("user-published", handleUserPublished);
   client.on("user-unpublished", handleUserUnpublished);
@@ -173,7 +171,7 @@ function flushStats() {
   `)
 
   // get the local track stats message
-  const localStats = { video: localTracks.videoTrack.getStats(), audio: localTracks.audioTrack.getStats() };
+  const localStats = { video: client.getLocalVideoStats(), audio: client.getLocalAudioStats() };
   const localStatsList = [
     { description: "Send audio bit rate", value: localStats.audio.sendBitrate, unit: "bps" },
     { description: "Total audio bytes sent", value: localStats.audio.sendBytes, unit: "bytes" },
@@ -197,7 +195,7 @@ function flushStats() {
 
   Object.keys(remoteUsers).forEach(uid => {
     // get the remote track stats message
-    const remoteTracksStats = { video: remoteUsers[uid].videoTrack.getStats(), audio: remoteUsers[uid].audioTrack.getStats()};
+    const remoteTracksStats = { video: client.getRemoteVideoStats()[uid], audio: client.getRemoteAudioStats()[uid] };
     const remoteTracksStatsList = [
       { description: "Delay of audio from sending to receiving", value: Number(remoteTracksStats.audio.receiveDelay).toFixed(2), unit: "ms" },
       { description: "Delay of video from sending to receiving", value: Number(remoteTracksStats.video.receiveDelay).toFixed(2), unit: "ms" },

diff --git a/Demo/displayCallStats/index.html b/Demo/displayCallStats/index.html
@@ -11,6 +11,10 @@
 <body>
   <div class="container-fluid banner">
     <p class="banner-text">Display Call Stats</p>
+    <a style="color: rgb(255, 255, 255);fill: rgb(255, 255, 255);fill-rule: evenodd; position: absolute; right: 10px; top: 4px;"
+      class="Header-link " href="https://github.com/AgoraIO-Community/AgoraWebSDK-NG/tree/master/Demo">
+      <svg class="octicon octicon-mark-github v-align-middle" height="32" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg>
+    </a>
   </div>
 
   <div id="success-alert" class="alert alert-success alert-dismissible fade show" role="alert">
@@ -71,7 +75,7 @@
 
   <script src="../assets/jquery-3.4.1.min.js"></script>
   <script src="../assets/bootstrap.bundle.min.js"></script>
-  <script src="https://download.agora.io/sdk/web/AgoraRTC_N.js"></script>
+  <script src="https://download.agora.io/sdk/release/AgoraRTC_N.js"></script>
   <script src="./displayCallStats.js"></script>
 </body>
 </html>