該文章介紹了在不同環境下使用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降噪；
• 視頻超分；
• 美顏；
• 背景分割。