聲網(wǎng)Web SDK 4.17.0上線：新增本地合圖功能讓場(chǎng)景效果更豐富

3月15日，聲網(wǎng)RTC Web SDK新版本4.17.0上線官網(wǎng)。新版本上線了動(dòng)態(tài)切換本地視頻流、Beta版本的本地合圖功能。同時(shí)，該版本將SDK包體積優(yōu)化到了850KB，并優(yōu)化了斷線重連的機(jī)制與體驗(yàn)。

01

新增功能

本地合圖功能（beta）

在4.17.0版本中，我們可以結(jié)合視頻合圖擴(kuò)展插件，將多路視頻、圖片、屏幕共享的內(nèi)容在本地合并為一路視頻流。這個(gè)功能用于創(chuàng)建更復(fù)雜的場(chǎng)景，例如在一場(chǎng)直播、會(huì)議、課堂中，主講人可以同時(shí)講解PPT、圖片，或在主講過(guò)程中同時(shí)播放兩個(gè)對(duì)比視頻，以豐富整個(gè)互動(dòng)場(chǎng)景的體驗(yàn)。甚至，可以通過(guò)該功能，實(shí)現(xiàn)將摳圖后的人像與PPT屏幕共享疊加在一起推流（如下圖所示）。這個(gè)功能有助于游戲直播、在線教育、電子商務(wù)、視頻會(huì)議等領(lǐng)域的開發(fā)者建立更專業(yè)，視覺效果更好的場(chǎng)景。

圖：屏幕共享+背景分割，本地合圖

目前該功能建議2路視頻流+1路屏幕共享流+2張圖片進(jìn)行合圖推流，在此基礎(chǔ)上我們支持加入更多視頻流和圖片進(jìn)行合成，但由于用戶設(shè)備、瀏覽器等配置，可能影響性能和體驗(yàn)。

圖：兩個(gè)視頻流+一張圖片+一路屏幕共享

該功能的推薦配置為Intel Core i5 4核及以上的處理器的電腦，支持Chrome、Edge、Firefox瀏覽器。

動(dòng)態(tài)切換本地視頻流

在過(guò)去，開發(fā)者需要使用IAgorRTCClient.unpublish方法，然后再使用IAgorRTCClient.publish方法，才可以發(fā)布一個(gè)流。而在4.17.0版本中，不需要這么做了。

開發(fā)者現(xiàn)在可以直接使用ILocalVideoTrack.replaceTrack方法來(lái)發(fā)布新的媒體流。采用這個(gè)方法，可以使媒體流的切換時(shí)間減少100-200毫秒。

02

改進(jìn)與優(yōu)化

SDK包體積縮小至850KB

為了進(jìn)一步縮小SDK包體積，讓客戶的產(chǎn)品體驗(yàn)更順暢，聲網(wǎng)在Web SDK 4.17.0中刪除了美顏模塊并廢棄setBeautyEffect方法。這樣做之后，SDK包體積減少了11.5%，最終大小為850KB。

那么美顏沒法使用了么？并不是，開發(fā)者還有兩種方法可以使用美顏功能。

1、采用聲網(wǎng)自研的美顏插件。我們?cè)?022年6月就在Web SDK 4.12.0版本中引入了該插件。用戶可以開啟美顏，調(diào)節(jié)美白、磨皮、祛痘、紅潤(rùn)程度，實(shí)現(xiàn)自然的美顏效果。

2、集成聲網(wǎng)生態(tài)合作伙伴的美顏插件。我們?cè)诼暰W(wǎng)云市場(chǎng)（https://www.shengwang.cn/cn/marketplace/）提供了多個(gè)生態(tài)合作伙伴的美顏、特效插件，可以實(shí)現(xiàn)更多更豐富的美顏與視頻效果。開發(fā)者們可以根據(jù)自身需要選擇。

優(yōu)化重連機(jī)制

從Web SDK 4.17.0版本開始，SDK默認(rèn)在重新連接過(guò)程中顯示斷開連接前的最后一幀視頻，這可以防止在重新連接過(guò)程中出現(xiàn)黑屏問題。注意：該功能由于Safari瀏覽器的限制，僅在該瀏覽器上無(wú)法使用。

圖：優(yōu)化前后的顯示效果

改進(jìn)數(shù)據(jù)分析功能

我們?cè)跀?shù)據(jù)分析方面有一些現(xiàn)有的問題。首先，無(wú)法準(zhǔn)確測(cè)量250ms以下的視頻卡頓率。其次，timeupdate事件的間隔與視頻卡頓率指標(biāo)的定義不一致。這些問題在Web SDK 4.17.0中都得到了解決。我們?cè)谠摪姹局袆h除3個(gè)冗余的大小流采集上報(bào)，新增修復(fù)10個(gè)Firefox缺失上報(bào)、3個(gè)Safari缺失上報(bào)。

改進(jìn)虛擬背景插件效果

我們?cè)赪eb SDK 4.17.0版本中修復(fù)了Android端Chrome瀏覽器上背景圖片可能出現(xiàn)鋸齒狀效果的問題。