该文章介绍了在不同环境下使用WebSDK的组件架构。在浏览器中，最新版浏览器支持WebRTC协议，并提供了面向开发者友好的接口，包括媒体采集、传输、播放/渲染和多链接管理。在桌面端浏览器中，可以复用浏览器内置的WebRTC能力，支持多种媒体源和安全的媒体传输。在移动端浏览器中，通过WebView和Apache Cordova平台拓展媒体采集和播放能力，提高音视频的实时性和效率。而在Electron桌面应用中，除了基于浏览器的WebRTC方案，还提供了基于CtRTC自研Native引擎的WebSDK方案，可以实现更丰富的音视频使用场景和提供更多高级功能，如音频处理、AI降噪、视频超分、美颜和背景分割。整体而言，WebSDK提供了简单易用的API接口和丰富的功能，适用于不同平台和场景的音视频应用。
组件架构（我们的浏览器）
WebSDK in Browser
最新版浏览器大部分都支持WebRTC协议。浏览器版WebSDK基于WebRTC实现，提供了更多面向开发者友好的接口，主要包括媒体采集、媒体传输、媒体播放/渲染环节、多链接管理。同时基于统一的Web SDK API接口，提供了跨平台的解决方案，支持一套代码运行在桌面端、安卓和iOS端。
WebSDK in desktop Browser
桌面端浏览器中复用浏览器内置WebRTC能力。在媒体采集上，支持多种媒体源，如基本的音视频设备采集（常用于发布实时音视频信息），桌面源采集（常用于分享窗口及桌面），以及自定义的MediaStreamTrack类型的数据（常用于频道内发布本地音视频文件）， 能够覆盖大多数音视频教育、娱乐场景。在媒体传输方面，基于浏览器实现的WebRTC Video Track或者Audio Track，传输层采用SRTP加密，能够保证网络传输的安全性。结合SFU模型的CtRTC边缘接入节点，可以提供业界优秀的弱网对抗能力，能够保证60%丢包下音频通话流畅，50%丢包下视频通话流畅，在跨区域传输中提供xxx ms的超低时延。
综上，简易的API接口，上手非常容易；内置丰富的采集参数，极大方便用户根据实际场景选择合适参数。
WebSDK in Mobile Browser
移动端基于系统的WebView，通过Apache Cordova平台，拓展WebView媒体采集、媒体播放能力。安卓端使用定制的WebRTC库，支持基于OpenH264的H264视频流软编软解。媒体传输则复用CtRTC边缘接入节点。音频播放采用系统播放，视频渲染采用系统原生视频视图组件，提高视频渲染的实时性和效率，降低系统资源和能源的使用。
统一的WebRTC实现，替换系统WebView的实现，能够屏蔽各种移动端系统浏览器实现的差异，降低多机型适配的碎片化。基本的打包体积约10M。
WebSDK in Electron
在桌面端除了基于浏览器的WebRTC方案，还提供基于CtRTC自研Native引擎的WebSDK方案，能够在保持用户一套代码的情况下，保持一致的渲染结果，同时可以做很多浏览器不能做的事情：
- 提高音视频设备的兼容性；
- 支持更丰富的音视频使用场景；
- 提供更高效的音频AAA处理；
- AI降噪；
- 视频超分；
- 美颜；
- 背景分割。
