Skip to content

Commit f927089

Browse files
HugoChaanHugoChaan
authored
Merge pull request #92 from AgoraIO/dev/2.2.0
feat: Simplify event processing logic and improve code readability
2 parents 9faf126 + d216170 commit f927089

File tree

39 files changed

+802
-244
lines changed

39 files changed

+802
-244
lines changed

‎src/CHANGELOG.md

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

‎src/common/common.css

+4
Original file line numberDiff line numberDiff line change
@@ -470,3 +470,7 @@ button#join, button#leave {
470470
margin-top: 0.5rem !important;
471471
}
472472
}
473+
474+
.overflow-hidden {
475+
overflow: hidden;
476+
}

‎src/common/constant.js

+31-13
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,10 @@ const ORIGIN_URL = __calcOriginUrl();
77
const SETUP_PAGE_URL = `${ORIGIN_URL}/index.html`; // setup page url
88
let REDIRECT_URI = ""; // sso redirect uri
99
let BASE_URL = ""; // request base url
10+
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";
11+
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";
12+
let appIdLink = "https://doc.shengwang.cn/doc/rtc/javascript/get-started/enable-service#%E8%8E%B7%E5%8F%96-app-id";
13+
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";
1014

1115
switch (ENV) {
1216
case "dev":
@@ -20,7 +24,7 @@ switch (ENV) {
2024
break;
2125
case "prod":
2226
BASE_URL = "https://service.agora.io/toolbox";
23-
REDIRECT_URI = "https://webdemo.agora.io/sso/index.html";
27+
REDIRECT_URI = `${origin}/sso/index.html`;
2428
break;
2529
}
2630

@@ -39,6 +43,17 @@ let MENU_LIST = [
3943
},
4044
{
4145
name: "quickMenu",
46+
data: [{
47+
name: "videoAndVoiceCalling",
48+
url: `${ORIGIN_URL}/example/quickStart/videoAndVoiceCalling/index.html`,
49+
zhDocUrl: "https://doc.shengwang.cn/doc/rtc/javascript/get-started/quick-start",
50+
enDocUrl: "https://docs.agora.io/en/video-calling/get-started/get-started-sdk?platform=web",
51+
githubUrl:
52+
"https://github.com/AgoraIO/API-Examples-Web/tree/main/src/example/quickStart/videoAndVoiceCalling",
53+
}]
54+
},
55+
{
56+
name: "basicMenu",
4257
data: [
4358
{
4459
name: "basicVoiceCall",
@@ -279,19 +294,22 @@ let MENU_LIST = [
279294
];
280295

281296
if (AREA == "external") {
297+
channel_link = "https://docs.agora.io/en/voice-calling/reference/glossary?platform=android#channel";
298+
appCertificateLink = "https://docs.agora.io/en/voice-calling/reference/glossary?platform=android#app-certificate";
299+
appIdLink = "https://docs.agora.io/en/voice-calling/reference/glossary?platform=android#app-id";
300+
proxyLink = "https://docs.agora.io/en/voice-calling/reference/glossary?platform=android#-2";
301+
282302
// hide pushStreamToCDN item in othersMenu
283-
const othersMenu = MENU_LIST[4];
284-
if (othersMenu.name == "othersMenu") {
285-
othersMenu.data = MENU_LIST[4].data.filter((item) => item.name !== "pushStreamToCDN");
286-
// add stt case
287-
othersMenu.data.push({
288-
name: "stt",
289-
url: `https://stt-demo.agora.io/`,
290-
zhDocUrl: "",
291-
enDocUrl: "",
292-
githubUrl: "",
293-
});
294-
}
303+
const othersMenuIndex = MENU_LIST.findIndex((item) => item.name == "othersMenu");
304+
MENU_LIST[othersMenuIndex].data = MENU_LIST[othersMenuIndex].data.filter((item) => item.name !== "pushStreamToCDN");
305+
// add stt case
306+
MENU_LIST[othersMenuIndex].data.push({
307+
name: "stt",
308+
url: `https://stt-demo.agora.io/`,
309+
zhDocUrl: "",
310+
enDocUrl: "",
311+
githubUrl: "",
312+
});
295313
}
296314

297315
function __calcOriginUrl() {

‎src/common/left-menu.js

+16-9
Original file line numberDiff line numberDiff line change
@@ -18,14 +18,14 @@ function __transListToMenuDom(list) {
1818
</div>
1919
<div class="sidebar-list">
2020
${item.data
21-
.map((item, index) => {
22-
return `
21+
.map((item, index) => {
22+
return `
2323
<div class="sidebar-item" data-index="${index}">
2424
<a href="${item.url}" class="i18n" name="${item.name}"> </a>
2525
</div>
2626
`;
27-
})
28-
.join("")}
27+
})
28+
.join("")}
2929
</div>
3030
</div>`;
3131
})
@@ -55,7 +55,9 @@ function __initMenu() {
5555
</span>
5656
</div>
5757
</div>
58-
${__transListToMenuDom(MENU_LIST)}
58+
<div class="sidebar-bottom">
59+
${__transListToMenuDom(MENU_LIST)}
60+
</div
5961
</div >
6062
`;
6163

@@ -95,6 +97,12 @@ function __hightlightMenu() {
9597
if (!targetNode.length) {
9698
targetNode = $(`.sidebar-item:has(a[href = "${href}index.html"])`);
9799
}
100+
if (!targetNode.length) {
101+
targetNode = $(`.sidebar-item:has(a[data-href = "${href}index.html#"])`);
102+
}
103+
if (!targetNode.length) {
104+
targetNode = $(`.sidebar-item:has(a[data-href = "${href}"])`);
105+
}
98106
targetNode.addClass("active");
99107
const sidebarMenu = targetNode.closest(".sidebar-menu");
100108
if (sidebarMenu && sidebarMenu.length) {
@@ -144,12 +152,11 @@ function __initListener() {
144152

145153
$(".sidebar-item").click(function (e) {
146154
const href = $(this).find("a")[0].href;
147-
if (href == SETUP_LIST[0].url) {
148-
localStorage.removeItem("__setupJumpHref");
149-
}
155+
// if (href == SETUP_LIST[0].url) {
156+
// localStorage.removeItem("__setupJumpHref");
157+
// }
150158
});
151159
}
152-
153160
// ----------------- init -----------------
154161
window.addEventListener("load", function (e) {
155162
__initMenu();

‎src/common/utils.js

+39-2
Original file line numberDiff line numberDiff line change
@@ -294,7 +294,7 @@ function getJumpBackUrl() {
294294
if (href) {
295295
sessionStorage.removeItem(JUMP_BACK_URL_KEY);
296296
} else {
297-
href = `${ORIGIN_URL}/example/basic/basicVoiceCall/index.html`;
297+
href = `${ORIGIN_URL}/example/quickStart/videoAndVoiceCalling/index.html`;
298298
}
299299

300300
return href;
@@ -345,6 +345,9 @@ async function agoraContentInspect(localVideoTrack) {
345345
}, 1000 * 10);
346346
}
347347

348+
// The token used in the demo is solely for testing purposes;
349+
// users are required to deploy their own token server to obtain the service.
350+
348351
async function agoraGetAppData(config) {
349352
const { uid, channel } = config;
350353
const { appid, certificate } = getOptionsFromLocal();
@@ -413,17 +416,51 @@ async function agoraGetProjects() {
413416
}),
414417
});
415418
resp = (await resp.json()) || {};
419+
if (resp.code == 138) {
420+
throw new Error("access_token is invalid, please login again");
421+
}
422+
416423
if (resp.code != 0) {
417-
message.error("Generate token error, please check your appid and appcertificate parameters");
424+
message.error(resp.msg);
418425
throw Error(resp.msg);
419426
}
420427
return resp.data;
421428
}
422429

430+
function generateRandomString(length) {
431+
432+
const options = getOptionsFromLocal();
433+
if (options.channel && options.channel.length === length) {
434+
return options.channel;
435+
}
436+
437+
// const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
438+
const characters = '0123456789';
439+
let result = '';
440+
const charactersLength = characters.length;
441+
for (let i = 0; i < length; i++) {
442+
result += characters.charAt(Math.floor(Math.random() * charactersLength));
443+
}
444+
setOptionsToLocal({channel: result});
445+
446+
}
447+
448+
449+
450+
423451
// ---------------------- agora ----------------------------
424452

425453
// exec functions
426454
__queryUrlParams();
427455
__checkLocalOptions();
428456
__addAppInfoUI();
429457
__checkExperienceTime();
458+
generateRandomString(6);
459+
460+
461+
$(() => {
462+
const options = getOptionsFromLocal();
463+
$('#channel').val(options.channel);
464+
$('#channel-2').val(`${options.channel}2`);
465+
$('#channel-link').attr("href",channel_link);
466+
})

‎src/example/advanced/adjustVideoProfile/index.html

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

‎src/example/advanced/audioEffects/index.html

+3-6
Original file line numberDiff line numberDiff line change
@@ -48,12 +48,9 @@
4848
/>
4949
<div class="tips">
5050
If you don`t know what is your channel, checkout
51-
<a
52-
href="https://docs.agora.io/en/Agora%20Platform/terms?platform=All%20Platforms#channel"
53-
>this</a
54-
>
55-
</div>
56-
</div>
51+
<a id="channel-link">this</a>
52+
</div>
53+
</div>
5754
<div class="mt-2">
5855
<label class="form-label">User ID(optional)</label>
5956
<input

‎src/example/advanced/customVideoSource/index.html

+14-4
Original file line numberDiff line numberDiff line change
@@ -53,10 +53,7 @@
5353
/>
5454
<div class="tips">
5555
If you don`t know what is your channel, checkout
56-
<a
57-
href="https://docs.agora.io/en/Agora%20Platform/terms?platform=All%20Platforms#channel"
58-
>this</a
59-
>
56+
<a id="channel-link">this</a>
6057
</div>
6158
</div>
6259
<div class="mt-2">
@@ -86,6 +83,19 @@
8683
</div>
8784
</form>
8885
</div>
86+
<!-- confirm -->
87+
<div class="modal fade" tabindex="-1" id="retry-play-alert">
88+
<div class="modal-dialog modal-dialog-centered">
89+
<div class="modal-content">
90+
<div class="modal-body overflow-hidden">
91+
<label class="i18n" name="autoPlayFailed"></label>
92+
</div>
93+
<div class="modal-footer">
94+
<button id="retry-play" class="btn btn-primary btn-sm" data-bs-dismiss="modal">Play</button>
95+
</div>
96+
</div>
97+
</div>
98+
</div>
8999
<!-- app info -->
90100
<div id="app-info"></div>
91101
</section>

‎src/example/advanced/customVideoSource/index.js

+31-4
Original file line numberDiff line numberDiff line change
@@ -46,8 +46,13 @@ function isMobileSafari() {
4646
return /iP(ad|hone|od).+Version\/[\d.]+.*Safari/i.test(ua);
4747
}
4848

49+
window.addEventListener("error", function (event) {
50+
console.error("Error occurred: ", event.message);
51+
message.error(`Error occurred: ${event.message}`);
52+
});
53+
54+
4955
$(() => {
50-
console.log('update video attr 12343');
5156
if (isMobileSafari()) {
5257
$('#sample-video').attr('playsinline', 'true');
5358
$('#sample-video').attr('webkit-playsinline', 'true');
@@ -60,6 +65,7 @@ $(() => {
6065
*/
6166
$("#join").click(async function (e) {
6267
e.preventDefault();
68+
$('#retry-play-alert').modal('show');
6369
$("#join").attr("disabled", true);
6470
try {
6571
currentStream = $("#stream-source").val();
@@ -69,7 +75,11 @@ $("#join").click(async function (e) {
6975
// 移动端的safari浏览器需要用户的click事件手动触发视频播放
7076
if (currentStream !== "camera" && isMobileSafari()) {
7177
try {
72-
videoFromDiv.play();
78+
videoFromDiv.play().catch(error => {
79+
console.error(error);
80+
$('#retry-play-alert').removeClass("hidden");
81+
$('#retry-play-alert').modal('show');
82+
});
7383
} catch (error) {
7484
console.error(error);
7585
message.error(error.message);
@@ -137,7 +147,6 @@ const getCaptureStream = () => {
137147
let stream;
138148
const isFirefox = navigator.userAgent.indexOf("Firefox") > -1;
139149
const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
140-
debugger;
141150
console.log('isFirefox', isFirefox);
142151
if (isFirefox) {
143152
stream = videoFromDiv.mozCaptureStream();
@@ -163,6 +172,20 @@ const getCaptureStream = () => {
163172
return null;
164173
}
165174

175+
176+
$('#retry-play').click(()=>{
177+
videoFromDiv.play().catch(error => {
178+
if (error.name === 'NotAllowedError') {
179+
console.error('NotAllowedError: ', error);
180+
message.error(error.message);
181+
} else {
182+
console.error(error);
183+
message.error(error.message);
184+
}
185+
});
186+
})
187+
188+
166189
async function createAndPublishVideoTrack(){
167190

168191
if (currentStream == "camera") {
@@ -172,7 +195,11 @@ async function createAndPublishVideoTrack(){
172195
// https://developers.google.com/web/updates/2016/10/capture-stream - captureStream()
173196
// can only be called after the video element is able to play video;
174197
try {
175-
videoFromDiv.play();
198+
videoFromDiv.play().catch(error => {
199+
console.error(error);
200+
$('#retry-play-alert').removeClass("hidden");
201+
$('#retry-play-alert').modal('show');
202+
});
176203
} catch (error) {
177204
console.error(error);
178205
message.error(error.message);

‎src/example/advanced/displayCallStats/index.html

+1-4
Original file line numberDiff line numberDiff line change
@@ -51,10 +51,7 @@
5151
/>
5252
<div class="tips">
5353
If you don`t know what is your channel, checkout
54-
<a
55-
href="https://docs.agora.io/en/Agora%20Platform/terms?platform=All%20Platforms#channel"
56-
>this</a
57-
>
54+
<a id="channel-link">this</a>
5855
</div>
5956
</div>
6057
<div class="mt-2">

‎src/example/advanced/displayCallStats/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,7 @@ async function join() {
7070
console.log("publish success");
7171
initStats();
7272
}
73+
7374
async function leave() {
7475
for (trackName in localTracks) {
7576
var track = localTracks[trackName];

0 commit comments

Comments
 (0)