114 |
115 |
116 |
119 |
120 |
121 |
122 |
123 | 10 | 11 | Web SDK 4.x 是基于 Web SDK 3.x 开发的全量重构版本，在继承了 Web SDK 3.x 功能的基础上，优化了 SDK 的内部架构，提高了 API 的易用性。 12 | 13 | Web SDK 4.x 具有以下优势： 14 | 15 | - 面向开发者提供更先进的 API 架构和范式。 16 | - 所有异步场景的 API 使用 Promise 替代 Callback，提升集成代码的质量和健壮性。 17 | - 优化频道事件通知机制，统一频道内事件的命名和回调参数的格式，降低断线重连的处理难度。 18 | - 提供清晰和完善的错误码，方便错误排查。 19 | - 支持 TypeScript。 20 | 21 | ## 示例项目（使用 jQuery 和 Bootstrap） 22 | 23 | | 功能 | 示例项目位置 | 24 | | -------------- | ------------------------------------------------------------ | 25 | | 基础示例 | [/src/example/basic](/src/example/basic) | 26 | | 进阶示例 | [/src/example/advanced](/src/example/advanced) | 27 | | 插件示例 | [/src/example/plugin](/src/example/plugin) | 28 | | 其他示例 | [/src/example/others](/src/example/others) | 29 | | vue 框架示例 | [/src/example/framework/vue](/src/example/framework/vue) | 30 | | react 框架示例 | [/src/example/framework/react](/src/example/framework/react) | 31 | 32 | ### 如何运行示例项目 33 | 34 | #### 前提条件 35 | 36 | - 你必须使用 SDK 支持的浏览器运行示例项目。 关于支持的浏览器列表参考 [浏览器兼容性和已知问题](https://doc.shengwang.cn/doc/rtc/javascript/overview/browser-compatibility)。 37 | 38 | #### 运行步骤 39 | 40 | 1. 在项目根路径运行下面的命令安装依赖项。 41 | 42 | ```shell 43 | npm install 44 | ``` 45 | 46 | 2. 运行下面的命令启动示例项目。 47 | 48 | ```shell 49 | npm run dev 50 | ``` 51 | 52 | 3. 在浏览器打开 [http://localhost:3001/index.html](http://localhost:3001/index.html) 53 | 54 | 4. 在示例项目设置页面上，输入 App ID 和 App Certificate，然后点击设置按钮。 55 | - 关于 App ID 和 App Certificate 的获取方法参考 [开始使用 Agora 平台](https://docs.agora.io/cn/Agora%20Platform/get_appid_token)。 56 | 57 | ## 参考 58 | 59 | - [Web SDK 4.x 产品概述](https://doc.shengwang.cn/doc/rtc/javascript/overview/product-overview) 60 | - [Web SDK 4.x API 参考](https://doc.shengwang.cn/api-ref/rtc/javascript/overview) 61 | - [基于本仓库部署的在线 demo](https://webdemo.agora.io/) 62 | 63 | ## 反馈 64 | 65 | 如果你有任何问题或建议，可以通过 issue 的形式反馈。 66 | 67 | ## 相关资源 68 | 69 | - 你可以先参阅 [常见问题](https://doc.shengwang.cn/faq/list?category=integration-issues&platform=javascript&product=rtc) 70 | - 如果你想了解更多官方示例，可以参考 [官方 SDK 示例](https://github.com/AgoraIO) 71 | - 如果你想了解声网 SDK 在复杂场景下的应用，可以参考 [官方场景案例](https://github.com/AgoraIO-usecase) 72 | - 如果你想了解声网的一些社区开发者维护的项目，可以查看 [社区](https://github.com/AgoraIO-Community) 73 | - 若遇到问题需要开发者帮助，你可以到 [开发者社区](https://rtcdeveloper.com/) 提问 74 | - 如果需要售后技术支持, 你可以在 [Agora Dashboard](https://console.shengwang.cn/overview) 提交工单 75 | 76 | ## 许可证 77 | 78 | 示例项目遵守 MIT 许可证。 79 | -------------------------------------------------------------------------------- /src/example/extension/aiDenoiser/agora-extension-ai-denoiser/README.md: -------------------------------------------------------------------------------- 1 | ### Install AI denoiser extension with Agora web SDK. 2 | 3 | ```javascript 4 | import { AIDenoiserExtension } from "agora-extension-ai-denoiser"; 5 | // Create AIDenoiserExtension instance, assetsPath is the path of wasm files. 6 | const extension = new AIDenoiserExtension({ assetsPath: "./external" }); 7 | 8 | // Register AI denoiser extension into AgoraRTC. 9 | AgoraRTC.registerExtensions([extension]); 10 | 11 | // listen the loaderror callback to handle loading module failed. 12 | extension.onloaderror = (e) => { 13 | // if loading denoiser is failed, disable the function of denoiser. For example, set your button disbled. 14 | openDenoiserButton.enabled = false; 15 | console.log(e); 16 | }; 17 | ``` 18 | 19 | ### Create a processor by denioser extension. 20 | 21 | ```javascript 22 | const processor = extension.createProcessor(); 23 | 24 | // If you want to enable the processor by default. 25 | await processor.enable(); 26 | 27 | // If you want to disable the processor by default. 28 | // await processor.disable(); 29 | 30 | // Optional, listen the processor`s overlaod callback to catch overload message 31 | processor.onoverload = async (elapsedTimeInMs) => { 32 | console.log("overload!!!", elapsedTimeInMs); 33 | // fallback or disable 34 | // await processor.setMode("STATIONARY_NS"); 35 | await processor.disable(); 36 | }; 37 | ``` 38 | 39 | ### Connect the processor to microphone audio track to process the audio pipeline. 40 | 41 | ```javascript 42 | const audioTrack = await AgoraRTC.createMicrophoneAudioTrack(); 43 | 44 | audioTrack.pipe(processor).pipe(audioTrack.processorDestination); 45 | 46 | await processor.enable(); 47 | ``` 48 | 49 | ### Control the denoiser function enabled or disabled. 50 | 51 | ```javascript 52 | () => { 53 | if (processor.enabled) { 54 | await processor.disable(); 55 | } else { 56 | await processor.enable(); 57 | } 58 | } 59 | ``` 60 | 61 | ### Change the denoiser mode and level. 62 | 63 | ```javascript 64 | await processor.setMode("NSNG"); // recommended 65 | await processor.setMode("STATIONARY_NS"); 66 | 67 | await processor.setLevel("LEVEL26"); // recommended 68 | await processor.setLevel("LEVEL40"); 69 | ``` 70 | 71 | ### Dump audio (download files which are 30s audio file before the method called and two audio files 30s after the method called) 72 | 73 | ```javascript 74 | processor.ondump = (blob, name) => { 75 | const objectURL = URL.createObjectURL(blob); 76 | const tag = document.createElement("a"); 77 | tag.download = name; 78 | tag.href = objectURL; 79 | tag.click(); 80 | setTimeout(() => { 81 | URL.revokeObjectURL(objectURL); 82 | }, 0); 83 | }; 84 | 85 | processor.ondumpend = () => { 86 | console.log("dump ended!!"); 87 | }; 88 | 89 | processor.dump(); 90 | ``` 91 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
16 |
17 |
18 |
19 |
20 |
21 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
--------------------------------------------------------------------------------
/src/example/extension/virtualBackground/agora-extension-virtual-background/index_cn.d.ts:
--------------------------------------------------------------------------------
1 |
2 | import { EventEmitter } from 'events';
3 | import { Extension } from 'agora-rte-extension';
4 | import type { IBaseProcessor } from 'agora-rte-extension';
5 | import type { IExtension } from 'agora-rte-extension';
6 | import { IProcessorContext } from 'agora-rte-extension';
7 | import { VideoProcessor } from 'agora-rte-extension';
8 |
9 | export declare type IVirtualBackgroundExtension = IExtension
22 |
23 |
55 |
56 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
--------------------------------------------------------------------------------
/src/example/extension/virtualBackground/agora-extension-virtual-background/index_en.d.ts:
--------------------------------------------------------------------------------
1 |
2 | import { EventEmitter } from 'events';
3 | import { Extension } from 'agora-rte-extension';
4 | import type { IBaseProcessor } from 'agora-rte-extension';
5 | import type { IExtension } from 'agora-rte-extension';
6 | import { IProcessorContext } from 'agora-rte-extension';
7 | import { VideoProcessor } from 'agora-rte-extension';
8 |
9 | export declare type IVirtualBackgroundExtension = IExtension
23 |
24 |
25 |
34 |
35 |
36 |
43 |
44 |
45 |
26 | local stream
27 |
28 |
29 |
33 |
30 |
31 |
32 |
37 | remote stream
38 |
39 |
40 |
41 |
42 |
46 |
74 |
75 |
76 |
77 | 10 | 11 | The Web SDK 4.x refactors the Web SDK 3.x. Based on the features of 3.x, 4.x fully optimizes the internal architecture of the SDK and provides more flexible and easy-to-use APIs. 12 | 13 | Compared to the Web SDK 3.x, the Web SDK 4.x has the following advantages: 14 | 15 | - Uses promises for asynchronous operations, which improves the robustness and readability of your code. 16 | - Supports TypeScript. 17 | - Replaces the Stream object with Track objects for separate and flexible control over audio and video. 18 | - Improves the channel event notification mechanism, making it easier for you to deal with reconnection. 19 | - Provides more accurate and comprehensive error codes for troubleshooting. 20 | 21 | ## Projects using jQuery and Bootstrap 22 | 23 | | Feature | Sample project location | 24 | | ----------------------- | ------------------------------------------------------------ | 25 | | Basic Examples | [/src/example/basic](/src/example/basic) | 26 | | Advanced Examples | [/src/example/advanced](/src/example/advanced) | 27 | | Plugin Examples | [/src/example/plugin](/src/example/plugin) | 28 | | Other Examples | [/src/example/others](/src/example/others) | 29 | | Vue Framework Example | [/src/example/framework/vue](/src/example/framework/vue) | 30 | | React Framework Example | [/src/example/framework/react](/src/example/framework/react) | 31 | 32 | ### How to run the sample projects 33 | 34 | #### Prerequisites 35 | 36 | You need a supported browser to run the sample projects. See [Product Overview](https://docs.agora.io/en/Interactive%20Broadcast/product_live?platform=Web#compatibility) for a list of supported browsers. 37 | 38 | #### Steps to run 39 | 40 | 1. In the project root path run the following command to install dependencies. 41 | 42 | ```shell 43 | npm install 44 | ``` 45 | 46 | 2. Use the following command to run the sample project. 47 | 48 | ```shell 49 | npm run dev 50 | ``` 51 | 52 | 3. Open link [http://localhost:3001/index.html](http://localhost:3001/index.html) in browser. 53 | 54 | 4. In the demo setting page, enter your App ID and App Certificate, then click SetUp button. 55 | - See [Get Started with Agora](https://docs.agora.io/en/Agora%20Platform/get_appid_token) to learn how to get an App ID and App Certificate. 56 | 57 | ## Reference 58 | 59 | - [Web SDK 4.x Product Overview](https://docs.agora.io/en/Interactive%20Broadcast/product_live?platform=Web) 60 | - [Web SDK 4.x API Reference](https://docs.agora.io/en/Interactive%20Broadcast/API%20Reference/web_ng/index.html) 61 | - [Online demo deployed from this repo](https://webdemo.agora.io/) 62 | 63 | ## Feedback 64 | 65 | If you have any problems or suggestions regarding the sample projects, feel free to file an issue. 66 | 67 | ## Related resources 68 | 69 | - Check our [FAQ](https://docs.agora.io/en/faq) to see if your issue has been recorded. 70 | - Dive into [Agora SDK Samples](https://github.com/AgoraIO) to see more tutorials 71 | - Take a look at [Agora Use Case](https://github.com/AgoraIO-usecase) for more complicated real use case 72 | - Repositories managed by developer communities can be found at [Agora Community](https://github.com/AgoraIO-Community) 73 | - If you encounter problems during integration, feel free to ask questions in [Stack Overflow](https://stackoverflow.com/questions/tagged/agora.io) 74 | 75 | ## License 76 | 77 | The sample projects are under the MIT license. 78 | -------------------------------------------------------------------------------- /src/example/extension/videoCompositor/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
15 |
16 |
17 |
18 |
19 |
20 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
--------------------------------------------------------------------------------
/src/example/advanced/geoFencing/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
21 |
22 |
23 |
30 |
31 |
32 |
37 |
38 |
39 | local stream
24 |
25 |
29 |
26 |
27 |
28 | remote stream
33 |
34 |
35 |
36 |
40 |
75 |
76 |
77 |
78 |
15 |
16 |
17 |
18 |
19 |
20 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
--------------------------------------------------------------------------------
/src/example/others/dualStream/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
21 |
22 |
23 |
30 |
31 |
32 |
37 |
38 |
39 | local stream
24 |
25 |
29 |
26 |
27 |
28 | remote stream
33 |
34 |
35 |
36 |
40 |
78 |
79 |
80 |
81 |
15 |
16 |
17 |
18 |
19 |
20 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
--------------------------------------------------------------------------------
/src/example/advanced/selfCapturing/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
21 |
22 |
23 |
30 |
31 |
32 |
37 |
38 |
39 | local stream
24 |
25 |
29 |
26 |
27 |
28 | remote stream
33 |
34 |
35 |
36 |
40 |
78 |
79 |
80 |
81 |
15 |
16 |
17 |
18 |
19 |
20 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
--------------------------------------------------------------------------------
/src/example/advanced/displayCallStats/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
21 |
22 |
23 |
30 |
31 |
32 |
37 |
38 |
39 | local stream
24 |
25 |
29 |
26 |
27 |
28 | remote stream
33 |
34 |
35 |
36 |
40 |
80 |
81 |
82 |
83 |
15 |
16 |
17 |
18 |
19 |
20 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
--------------------------------------------------------------------------------
/src/example/advanced/shareTheScreen/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
21 |
22 |
23 |
31 |
32 |
33 |
38 |
39 |
40 | local stream
24 |
25 |
30 |
26 |
27 |
28 |
29 | remote stream
34 |
35 |
36 |
37 |
41 |
77 |
81 |
82 |
83 |
78 |
79 |
80 |
15 |
16 |
17 |
18 |
19 |
20 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
--------------------------------------------------------------------------------
/src/example/advanced/screenshot/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
21 |
22 |
23 |
30 |
31 |
32 |
37 |
38 |
39 | local stream
24 |
25 |
29 |
26 |
27 |
28 | remote stream
33 |
34 |
35 |
36 |
40 |
81 |
82 |
83 |
84 |
15 |
16 |
17 |
18 |
19 |
20 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
--------------------------------------------------------------------------------
/src/i18n/language.js:
--------------------------------------------------------------------------------
1 | let LANGUAGE_CACHE_KEY = "__language_data__";
2 | let LANGUAGE_CACHE_DATA = JSON.parse(sessionStorage.getItem(LANGUAGE_CACHE_KEY)) || {};
3 |
4 | function __insertIe8nText(data) {
5 | var insertEle = $(".i18n");
6 | insertEle.each(function () {
7 | let dataName = $(this).attr("name");
8 | let i18nTxt = data[dataName];
9 | $(this).html(i18nTxt);
10 | });
11 | }
12 |
13 | function __getLanguageData(language, success, fail) {
14 | let url = "";
15 | if (LANGUAGE_CACHE_DATA[language] && LANGUAGE_CACHE_DATA[language].sampleCode) {
16 | success(LANGUAGE_CACHE_DATA[language]);
17 | return;
18 | }
19 |
20 | switch (language) {
21 | case "zh":
22 | url = `${ORIGIN_URL}/i18n/zh-CN/index.json`;
23 | break;
24 | case "zh-CN":
25 | url = `${ORIGIN_URL}/i18n/zh-CN/index.json`;
26 | break;
27 | case "en":
28 | url = `${ORIGIN_URL}/i18n/en/index.json`;
29 | break;
30 | default:
31 | url = `${ORIGIN_URL}/i18n/en/index.json`;
32 | }
33 |
34 | $.ajax({
35 | url: url,
36 | async: true,
37 | cache: false,
38 | dataType: "json",
39 | success: success,
40 | error: fail,
41 | });
42 | }
43 |
44 | function __execI18n() {
45 | const language = getLanguage();
46 |
47 | const success = function (data, status) {
48 | LANGUAGE_CACHE_DATA[language] = data;
49 | sessionStorage.setItem(LANGUAGE_CACHE_KEY, JSON.stringify(LANGUAGE_CACHE_DATA));
50 | __insertIe8nText(data);
51 | };
52 |
53 | const fail = function (jqXHR, textStatus, errorThrown) {
54 | let msg = "get language data failed!";
55 | let href = window.location.href;
56 | if (/^file/.test(href)) {
57 | msg += "can not get language data from local file, please use http server!";
58 | }
59 | console.error(msg, jqXHR, textStatus);
60 | };
61 |
62 | __getLanguageData(language, success, fail);
63 | }
64 |
65 | function __insertLanguageSwitch() {
66 | const languageSwitchHtml = `
21 |
22 |
23 |
30 |
31 |
32 |
37 |
38 |
39 | local stream
24 |
25 |
29 |
26 |
27 |
28 | remote stream
33 |
34 |
35 |
36 |
40 |
80 |
81 |
82 |
83 |
67 |
`;
75 |
76 | $("#language-switch-wrapper").html(languageSwitchHtml);
77 |
78 | const language = getLanguage();
79 |
80 | if (language == "en") {
81 | $("#language-english").addClass("active");
82 | $("#language-text").text("English");
83 | } else {
84 | $("#language-zh").addClass("active");
85 | $("#language-text").text("简体中文");
86 | }
87 |
88 | function switchLanguage(v) {
89 | if (language == v) {
90 | return;
91 | }
92 | let options = getOptionsFromLocal();
93 | if (v == "zh-CN" || v == "zh") {
94 | $("#language-zh").addClass("active");
95 | $("#language-english").removeClass("active");
96 | $("#language-text").text("简体中文");
97 | options.language = "zh-CN";
98 | setOptionsToLocal(options);
99 | } else {
100 | $("#language-english").addClass("active");
101 | $("#language-zh").removeClass("active");
102 | $("#language-text").text("English");
103 | options.language = "en";
104 | setOptionsToLocal(options);
105 | }
106 | window.location.reload();
107 | }
108 |
109 | $("#language-english").click(function (e) {
110 | switchLanguage("en");
111 | });
112 |
113 | $("#language-zh").click(function (e) {
114 | switchLanguage("zh-CN");
115 | });
116 | }
117 |
118 | window.addEventListener("pageshow", function (e) {
119 | __insertLanguageSwitch();
120 | __execI18n();
121 | });
122 |
--------------------------------------------------------------------------------
/src/example/extension/videoCompositor/agora-extension-video-compositor/index_en.d.ts:
--------------------------------------------------------------------------------
1 | import { Extension } from 'agora-rte-extension';
2 | import { IBaseProcessor } from 'agora-rte-extension';
3 | import { IExtension } from 'agora-rte-extension';
4 | import { IProcessorContext } from 'agora-rte-extension';
5 | import { VideoProcessor } from 'agora-rte-extension';
6 |
7 | export declare type IVideoCompositingExtension = IExtension
68 |
69 |
70 |
74 |
15 |
16 |
17 |
18 |
19 |
20 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
--------------------------------------------------------------------------------
/src/example/advanced/testMediaDevices/jquery.jsonview.min.js:
--------------------------------------------------------------------------------
1 | !function(e){var t,n,r,l,o;return o=["object","array","number","string","boolean","null"],r=function(){function t(e){null==e&&(e={}),this.options=e}return t.prototype.htmlEncode=function(e){return null!==e?e.toString().replace(/&/g,"&").replace(/"/g,""").replace(//g,">"):""},t.prototype.jsString=function(e){return e=JSON.stringify(e).slice(1,-1),this.htmlEncode(e)},t.prototype.decorateWithSpan=function(e,t){return''+this.htmlEncode(e)+""},t.prototype.valueToHTML=function(t,n){var r;if(null==n&&(n=0),r=Object.prototype.toString.call(t).match(/\s(.+)]/)[1].toLowerCase(),this.options.strict&&!e.inArray(r,o))throw new Error(""+r+" is not a valid JSON value type");return this[""+r+"ToHTML"].call(this,t,n)},t.prototype.nullToHTML=function(e){return this.decorateWithSpan("null","null")},t.prototype.undefinedToHTML=function(){return this.decorateWithSpan("undefined","undefined")},t.prototype.numberToHTML=function(e){return this.decorateWithSpan(e,"num")},t.prototype.stringToHTML=function(e){var t,n;return/^(http|https|file):\/\/[^\s]+$/i.test(e)?'"'+this.jsString(e)+'"':(t="",e=this.jsString(e),this.options.nl2br&&(n=/([^>\\r\\n]?)(\\r\\n|\\n\\r|\\r|\\n)/g,n.test(e)&&(t=" multiline",e=(e+"").replace(n,"$1
21 |
22 |
23 |
30 |
31 |
32 |
37 |
38 |
39 | local stream
24 |
25 |
29 |
26 |
27 |
28 | remote stream
33 |
34 |
35 |
36 |
40 |
87 |
88 |
89 |
90 | "))),'"'+e+'"')},t.prototype.booleanToHTML=function(e){return this.decorateWithSpan(e,"bool")},t.prototype.arrayToHTML=function(e,t){var n,r,l,o,i,s,a,p;for(null==t&&(t=0),r=!1,i="",o=e.length,l=a=0,p=e.length;p>a;l=++a)s=e[l],r=!0,i+="
- '+i+"
- '+i+"
'+this.valueToHTML(e)+"
"},t}(),"undefined"!=typeof module&&null!==module&&(module.exports=r),n=function(){function e(){}return e.bindEvent=function(e,t){var n;return e.firstChild.addEventListener("click",function(e){return function(n){return e.toggle(n.target.parentNode.firstChild,t)}}(this)),n=document.createElement("div"),n.className="collapser",n.innerHTML=t.collapsed?"+":"-",n.addEventListener("click",function(e){return function(n){return e.toggle(n.target,t)}}(this)),e.insertBefore(n,e.firstChild),t.collapsed?this.collapse(n):void 0},e.expand=function(e){var t,n;return n=this.collapseTarget(e),""!==n.style.display?(t=n.parentNode.getElementsByClassName("ellipsis")[0],n.parentNode.removeChild(t),n.style.display="",e.innerHTML="-"):void 0},e.collapse=function(e){var t,n;return n=this.collapseTarget(e),"none"!==n.style.display?(n.style.display="none",t=document.createElement("span"),t.className="ellipsis",t.innerHTML=" … ",n.parentNode.insertBefore(t,n),e.innerHTML="+"):void 0},e.toggle=function(e,t){var n,r,l,o,i,s;if(null==t&&(t={}),l=this.collapseTarget(e),n="none"===l.style.display?"expand":"collapse",t.recursive_collapser){for(r=e.parentNode.getElementsByClassName("collapser"),s=[],o=0,i=r.length;i>o;o++)e=r[o],s.push(this[n](e));return s}return this[n](e)},e.collapseTarget=function(e){var t,n;return n=e.parentNode.getElementsByClassName("collapsible"),n.length?t=n[0]:void 0},e}(),t=e,l={collapse:function(e){return"-"===e.innerHTML?n.collapse(e):void 0},expand:function(e){return"+"===e.innerHTML?n.expand(e):void 0},toggle:function(e){return n.toggle(e)}},t.fn.JSONView=function(){var e,o,i,s,a,p,c;return e=arguments,null!=l[e[0]]?(a=e[0],this.each(function(){var n,r;return n=t(this),null!=e[1]?(r=e[1],n.find(".jsonview .collapsible.level"+r).siblings(".collapser").each(function(){return l[a](this)})):n.find(".jsonview > ul > li .collapsible").siblings(".collapser").each(function(){return l[a](this)})})):(s=e[0],p=e[1]||{},o={collapsed:!1,nl2br:!1,recursive_collapser:!1,escape:!0,strict:!1},p=t.extend(o,p),i=new r(p),"[object String]"===Object.prototype.toString.call(s)&&(s=JSON.parse(s)),c=i.jsonToHTML(s),this.each(function(){var e,r,l,o,i,s;for(e=t(this),e.html(c),l=e[0].getElementsByClassName("collapsible"),s=[],o=0,i=l.length;i>o;o++)r=l[o],"LI"===r.parentNode.nodeName?s.push(n.bindEvent(r.parentNode,p)):s.push(void 0);return s}))}}(jQuery);
--------------------------------------------------------------------------------
/src/example/extension/virtualBackground/agora-extension-virtual-background/index.d.ts:
--------------------------------------------------------------------------------
1 | ///
15 |
16 |
17 |
18 |
19 |
20 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 |
107 |
--------------------------------------------------------------------------------
/src/example/others/pushStreamToCDN/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
21 |
22 |
23 |
30 |
31 |
32 |
37 |
38 |
39 | local stream
24 |
25 |
29 |
26 |
27 |
28 | remote stream
33 |
34 |
35 |
36 |
40 |
90 |
91 |
92 |
93 |
15 |
16 |
17 |
18 |
19 |
20 |
107 |
108 |
109 |
110 |
111 |
112 |
113 |
114 |
115 |
116 |
117 |
118 |
119 |
--------------------------------------------------------------------------------
/src/example/advanced/joinMultipleChannel/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
21 |
22 |
23 |
30 |
31 |
32 |
37 |
38 |
39 | local stream
24 |
25 |
29 |
26 |
27 |
28 | remote stream
33 |
34 |
35 |
36 |
40 |
103 |
104 |
105 |
106 |
15 |
16 |
17 |
18 |
19 |
20 |
104 |
105 |
106 |
107 |
108 |
109 |
110 |
111 |
112 |
113 |
114 |
115 |
116 |
--------------------------------------------------------------------------------
/src/example/advanced/customVideoSource/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
21 |
22 |
23 |
30 |
31 |
32 |
37 |
38 |
39 | local stream
24 |
25 |
29 |
26 |
27 |
28 | remote stream
33 |
34 |
35 |
36 |
40 |
100 |
101 |
102 |
103 |
15 |
16 |
17 |
18 |
19 |
20 |
102 |
103 |
104 |
105 |
106 |
107 |
108 |
109 |
110 |
111 |
112 |
113 |
114 |
--------------------------------------------------------------------------------
/src/example/advanced/selfRendering/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
21 |
22 |
23 |
33 |
34 |
35 |
40 |
41 |
42 | local stream
24 |
25 |
32 |
26 |
27 |
28 |
31 | remote stream
36 |
37 |
38 |
39 |
43 |
85 |
86 |
87 |
88 |
99 |
100 |
101 |
89 |
97 |
98 |
15 |
16 |
17 |
18 |
19 |
20 |
112 |
113 |
114 |
115 |
116 |
117 |
118 |
119 |
120 |
121 |
122 |
123 |
124 |
--------------------------------------------------------------------------------
/src/example/advanced/screenshot/index.js:
--------------------------------------------------------------------------------
1 | // create Agora client
2 | var client = AgoraRTC.createClient({
3 | mode: "rtc",
4 | codec: "vp8",
5 | });
6 | var localTracks = {
7 | videoTrack: null,
8 | audioTrack: null,
9 | };
10 | var remoteUsers = {};
11 | // Agora client options
12 | var options = getOptionsFromLocal();
13 |
14 | $("#join-form").submit(async function (e) {
15 | e.preventDefault();
16 | $("#join").attr("disabled", true);
17 | try {
18 | options.channel = $("#channel").val();
19 | options.uid = Number($("#uid").val());
20 | options.token = await agoraGetAppData(options);
21 | await join();
22 | setOptionsToLocal(options);
23 | message.success("join channel success!");
24 | } catch (error) {
25 | console.error(error);
26 | message.error(error.message);
27 | } finally {
28 | $("#leave").attr("disabled", false);
29 | }
30 | });
31 |
32 | $("#leave").click(function (e) {
33 | leave();
34 | });
35 |
36 | $("#takeScreenshot").click(async function (e) {
37 | try {
38 | //get imageData object picture from local video track.
39 | const imageData = localTracks.videoTrack.getCurrentFrameData();
40 | downloadImageData(imageData);
41 | } catch (error) {
42 | console.error(error);
43 | message.error(error.message);
44 | }
45 | });
46 |
47 | async function join() {
48 | client.on("user-published", handleUserPublished);
49 | client.on("user-unpublished", handleUserUnpublished);
50 | // start Proxy if needed
51 | const mode = Number(options.proxyMode);
52 | if (mode != 0 && !isNaN(mode)) {
53 | client.startProxyServer(mode);
54 | }
55 | // join the channel
56 | options.uid = await client.join(
57 | options.appid,
58 | options.channel,
59 | options.token || null,
60 | options.uid || null,
61 | );
62 | // create local audio and video tracks
63 | if (!localTracks.audioTrack) {
64 | localTracks.audioTrack = await AgoraRTC.createMicrophoneAudioTrack({
65 | encoderConfig: "music_standard",
66 | });
67 | }
68 | if (!localTracks.videoTrack) {
69 | localTracks.videoTrack = await AgoraRTC.createCameraVideoTrack();
70 | }
71 | // play local video track
72 | localTracks.videoTrack.play("local-player");
73 | $("#local-player-name").text(`uid: ${options.uid}`);
74 | // publish local tracks to channel
75 | await client.publish(Object.values(localTracks));
76 | console.log("publish success");
77 | }
78 |
79 | async function leave() {
80 | for (trackName in localTracks) {
81 | var track = localTracks[trackName];
82 | if (track) {
83 | track.stop();
84 | track.close();
85 | localTracks[trackName] = undefined;
86 | }
87 | }
88 |
89 | // remove remote users and player views
90 | remoteUsers = {};
91 | $("#remote-playerlist").html("");
92 |
93 | // leave the channel
94 | await client.leave();
95 | $("#local-player-name").text("");
96 | $("#join").attr("disabled", false);
97 | $("#leave").attr("disabled", true);
98 | console.log("client leaves channel success");
99 | }
100 |
101 | async function subscribe(user, mediaType) {
102 | const uid = user.uid;
103 | // subscribe to a remote user
104 | await client.subscribe(user, mediaType);
105 | console.log("subscribe success");
106 | if (mediaType === "video") {
107 | const player = $(`
108 |
21 |
22 |
23 |
62 |
63 |
64 |
69 |
70 |
71 | local stream
24 |
25 |
61 |
26 |
27 |
28 |
60 | remote stream
65 |
66 |
67 |
68 |
72 |
108 |
109 |
110 |
111 |
109 |
113 | `);
114 | $("#remote-playerlist").append(player);
115 | user.videoTrack.play(`player-${uid}`);
116 | }
117 | if (mediaType === "audio") {
118 | user.audioTrack.play();
119 | }
120 | }
121 |
122 | function handleUserPublished(user, mediaType) {
123 | const id = user.uid;
124 | remoteUsers[id] = user;
125 | subscribe(user, mediaType);
126 | }
127 |
128 | function handleUserUnpublished(user, mediaType) {
129 | if (mediaType === "video") {
130 | const id = user.uid;
131 | delete remoteUsers[id];
132 | $(`#player-wrapper-${id}`).remove();
133 | }
134 | }
135 |
136 | //download imageData picture.
137 | async function downloadImageData(data) {
138 | //create canvas，set the canvas's width and height as data(imageData object)'s width and height.
139 | const canvas = document.createElement("canvas");
140 | canvas.width = data.width;
141 | canvas.height = data.height;
142 | const ctx = canvas.getContext("2d");
143 | if (!ctx) return;
144 | //put imageData object value into canvas
145 | ctx.putImageData(data, 0, 0);
146 | //convert the canvas picture to base64 format.
147 | const dataURL = canvas.toDataURL();
148 | //create a hyperlink, and set the value as previous 'dataURL' value, so that we can download as capture.png file.
149 | const link = document.createElement("a");
150 | link.download = "capture.png";
151 | link.href = dataURL;
152 | document.body.appendChild(link);
153 | link.click();
154 | link.remove();
155 | canvas.remove();
156 | }
157 |
--------------------------------------------------------------------------------
/src/example/quickStart/videoAndVoiceCalling/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
110 |
112 | uid: ${uid}
111 |
15 |
16 |
17 |
18 |
19 |
20 |
114 |
115 |
116 |
117 |
118 |
119 |
120 |
121 |
122 |
123 |
124 |
125 |
126 |
--------------------------------------------------------------------------------
/src/example/extension/videoCompositor/agora-extension-video-compositor/index.d.ts:
--------------------------------------------------------------------------------
1 | import { Extension } from 'agora-rte-extension';
2 | import { IBaseProcessor } from 'agora-rte-extension';
3 | import { IExtension } from 'agora-rte-extension';
4 | import { IProcessorContext } from 'agora-rte-extension';
5 | import { VideoProcessor } from 'agora-rte-extension';
6 |
7 | export declare type IVideoCompositingExtension = IExtension
21 |
22 |
23 |
30 |
31 |
32 |
37 |
38 |
39 |
40 | local stream
24 |
25 |
29 |
26 |
27 |
28 | remote stream
33 |
34 |
35 |
36 |
41 |
110 |
111 |
112 |
113 |
139 |
145 | `);
146 | $("#remote-playerlist").append(player);
147 | user.videoTrack.play(`player-${uid}`);
148 | }
149 | if (mediaType === "audio") {
150 | user.audioTrack.play();
151 | }
152 | }
153 |
154 | function handleUserPublished(user, mediaType) {
155 | const id = user.uid;
156 | remoteUsers[id] = user;
157 | subscribe(user, mediaType);
158 | }
159 |
160 | function handleUserUnpublished(user, mediaType) {
161 | if (mediaType === "video") {
162 | const id = user.uid;
163 | delete remoteUsers[id];
164 | $(`#player-wrapper-${id}`).remove();
165 | }
166 | }
167 |
--------------------------------------------------------------------------------
/src/common/left-menu.js:
--------------------------------------------------------------------------------
1 | const DEFAULT_ZH_DOC_URL = "https://doc.shengwang.cn/doc/rtc/javascript/get-started/enable-service";
2 | const DEFAULT_EN_DOC_URL =
3 | "https://docs.agora.io/en/video-calling/get-started/authentication-workflow?platform=web";
4 |
5 | function __isSmallScreen() {
6 | const SM_WIDTH = 576; // small screen width (phone)
7 | const windowWidth = $(window).width();
8 | return windowWidth <= SM_WIDTH;
9 | }
10 |
11 | function __transListToMenuDom(list) {
12 | return list
13 | .map((item) => {
14 | return ``;
31 | })
32 | .join("");
33 | }
34 |
35 | function __initMenu() {
36 | let language = getLanguage();
37 | let href = "";
38 | let logoImgSrc = "";
39 | if (language == "en") {
40 | href = DEFAULT_EN_DOC_URL;
41 | logoImgSrc = `${ORIGIN_URL}/assets/agora-logo-en.png`;
42 | } else {
43 | href = DEFAULT_ZH_DOC_URL;
44 | logoImgSrc = `${ORIGIN_URL}/assets/agora-logo-zh.png`;
45 | }
46 | let logoHtml = `
140 |
144 | uid: ${uid}
141 | HQ Stream
142 |
143 |
105 |
109 | `);
110 | $("#remote-playerlist").append(player);
111 | user.videoTrack.play(`player-${uid}`);
112 | }
113 | if (mediaType === "audio") {
114 | user.audioTrack.play();
115 | }
116 | }
117 |
118 | function handleUserPublished(user, mediaType) {
119 | const id = user.uid;
120 | remoteUsers[id] = user;
121 | subscribe(user, mediaType);
122 | }
123 |
124 | function handleUserUnpublished(user, mediaType) {
125 | if (mediaType === "video") {
126 | const id = user.uid;
127 | delete remoteUsers[id];
128 | $(`#player-wrapper-${id}`).remove();
129 | }
130 | }
131 |
132 | $("#openAiDenosier").click(async (e) => {
133 | let extension = new AIDenoiser.AIDenoiserExtension({
134 | assetsPath: "./agora-extension-ai-denoiser/external",
135 | });
136 | AgoraRTC.registerExtensions([extension]);
137 | extension.onloaderror = (e) => {
138 | console.error(e);
139 | processor = null;
140 | };
141 |
142 | processor = extension.createProcessor();
143 |
144 | processor.onoverload = async () => {
145 | await processor.disable();
146 | $("#enableAiDenosier").val("Enable AIDenoiser");
147 | $("#ai-status-tip").text("AIDenoiser is disabled");
148 | processorEnable = true;
149 | };
150 |
151 | localTracks.audioTrack.pipe(processor).pipe(localTracks.audioTrack.processorDestination);
152 |
153 | message.success("open AIDenoiser success!");
154 | $("#openAiDenosier").attr("disabled", true);
155 | $("#enableAiDenosier").attr("disabled", false);
156 | $("#dump").attr("disabled", false);
157 | });
158 |
159 | $("#enableAiDenosier").click(async (e) => {
160 | try {
161 | $("#enableAiDenosier").attr("disabled", true);
162 | if (processorEnable) {
163 | await processor.enable();
164 | $("#enableAiDenosier").text("Disable AIDenoiser");
165 | $("#ai-status-tip").text("AIDenoiser is enabled");
166 | processorEnable = false;
167 | } else {
168 | await processor.disable();
169 | $("#enableAiDenosier").text("Enable AIDenoiser");
170 | $("#ai-status-tip").text("AIDenoiser is disabled");
171 | processorEnable = true;
172 | }
173 | } catch (e) {
174 | console.error("enable AIDenoiser failure", e);
175 | } finally {
176 | $("#enableAiDenosier").attr("disabled", false);
177 | }
178 | });
179 |
180 | $("#dump").click(async (e) => {
181 | if (!processor) {
182 | return;
183 | }
184 | processor.ondump = (blob, name) => {
185 | const objectURL = URL.createObjectURL(blob);
186 | const tag = document.createElement("a");
187 | tag.download = name + ".wav";
188 | tag.href = objectURL;
189 | tag.click();
190 | };
191 | processor.ondumpend = () => {
192 | console.log("dump ended!!");
193 | };
194 | processor.dump();
195 | });
196 |
--------------------------------------------------------------------------------
106 |
108 | uid: ${uid}
107 |