神奇，聲網Web SDK還能這麼實現直播中美顏功能

前言

本篇文章是透過使用聲網Web SDK來實現直播中美顏效果的深度體驗文章，其中發現了螢幕共享並本地合圖多個影片、圖片，聲網美顏外掛等功能特性十分強大和專業，特為此做一個技術+體驗的分享，畢竟好技術就是要去傳播的。

隨著音影片直播技術的蓬勃發展，越來越多的短影片類應用百家爭鳴，基於音影片直播相關的技術也是不斷的迭代更新，雖然最後沉澱下來的音影片直播類的應用不多，頭部的幾款應用想必大家都耳熟能詳。

但是隨著後疫情時代的到來，遠端辦公的條件越來越成熟，越來越多的的應用都需要接入音影片相關的功能，音影片領域已經不侷限於直播等功能，更多是的綜合性的使用，如共享螢幕並且整合本地素材的影片、圖片，以及直播中的美顏特效等綜合性的場景。

那麼這些功能的實現是怎麼來操作的呢？這裡可以透過共享螢幕並本地合圖影片、圖片，直播美顏特效兩個核心功能模組拆分來實現。其中，關於共享螢幕並本地合圖影片、圖片的功能可以透過聲網的本地合圖外掛來實現；關於直播美顏特效的功能可以透過聲網的美顏外掛來現實。那麼接下來就來詳細分享一下具體的操作流程吧。

使用前的準備工作

由於本文分享的是關於使用聲網Web SDK實現本地合圖和直播美顏特效的使用心得，讀者如果也想體驗聲網對應的Web SDK功能，同時也為了讓使用者能夠快速進入開發狀態，需要提前做一些準備工作，具體如下所示：

1、開發環境

其實聲網的Web SDK相容性非常不錯，對硬體裝置和軟體系統的要求不高，開發和測試環境只要滿足以下條件即可：

Chrome （強烈建議使用Chrome 瀏覽器官方最新版本）
Firefox
Safari
Edge

2、體驗測試使用到的開發環境

macOS 或者 Windows 電腦一臺
保證使用的電腦具有物理音影片採集裝置，能正常的使用攝像頭、麥克風
Visual Studio Code 或者 WebStorm 編輯器
安裝Node.js 和 npm，且Node版本要在v14及以上
安裝yarn

3、本文的體驗測試使用到的測試環境

Chrome

4、其他

在使用聲網Web SDK的時候，如果沒有聲網賬號，需要先去註冊一個聲網賬號，然後進入聲網後臺管理平臺建立你要使用的AppID、獲取 Token等操作。（聲網賬號註冊連結：https://sso2.agora.io/cn/v4/signup/with-sms）
提前下載聲網官方的視訊通話的Demo。（聲網官方的視訊通話Demo下載地址：https://docs.agora.io/cn/video-call-4.x/landing-page?platform...）

實現視訊通話功能

本文以聲網對應的實時音視訊通話功能的整合使用為例來講，用到的就是基於聲網的 web端音影片Web SDK（v4.17.0 或以上）。

首先來了解一下聲網的視訊通話SDK，它可以實現一對一單聊、多人群聊，同時具備純語音通話和視訊通話功能，而且視訊通話不區分主播和觀眾，所有使用者都可以發言且看見彼此畫面，在影片直播的時候使用者是分為主播和觀眾的，只有主播可以自由發言，但其他使用者可以看到，這是音視訊通話功能的功能介紹。

聲網的合圖外掛，號稱1分鐘就可以實現一個應用的本地合圖功能，那麼接下來就來看一下使用的操作步驟，具體使用步驟如下所示：

1、在專案中整合聲網的 web端音影片Web SDK（v4.17.0 或以上），並且實現專案的基本的實時音影片功能，使用者可以直接使用npm來把本地合圖功能整合到自己的專案中，首先整合Web SDK，在專案的package.json檔案對應的dependencies 欄位中新增 agora-rtc-sdk-ng 及版本號：

然後將以下程式碼貼上到 basicVideoCall.js 檔案中，且在自己的專案中匯入 AgoraRTC 模組，具體如下所示：

import AgoraRTC from "agora-rtc-sdk-ng"

在具體的視訊通話使用頁面，實現客戶端的使用者頁面，具體程式碼如下所示：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Video Web SDK Quickstart</title>
        <!--
        This line is used to refer to the bundle.js file packaged by webpack. A sample webpack configuration is shown in the later step of running your app.
        -->
        <script src="./dist/bundle.js"></script>
    </head>
    <body>
        <h2 class="left-align">Video Web SDK Quickstart</h2>
        <div class="row">
            <div>
                <button type="button" id="join">JOIN</button>
                <button type="button" id="leave">LEAVE</button>
            </div>
        </div>
    </body>
</html>

接著實現視訊通話邏輯，透過使用createClient方法建立 AgoraRTCClient 物件；呼叫 join 方法加入一個 RTC 頻道；接著先呼叫 createMicrophoneAudioTrack 透過麥克風採集的音訊建立本地音訊軌道物件，呼叫 createCameraVideoTrack 透過攝像頭採集的影片建立本地影片軌道物件；然後呼叫 publish 方法，將這些本地音影片軌道物件當作引數即可將音影片釋出到頻道中；監聽遠端使用者加入頻道併發布音影片軌道，先監聽 client.on("user-published")事件，再呼叫 subscribe 方法訂閱遠端使用者 AgoraRTCRemoteUser 物件，獲取遠端使用者的遠端音訊軌道 RemoteAudioTrack 和遠端影片軌道 RemoteVideoTrack 物件，接著呼叫 play 方法播放遠端音影片軌道。

最後，透過命令 npm install 安裝專案依賴，透過命令 npm run start:dev執行專案。

1.螢幕共享並本地合圖多個影片、圖片的實現

過程原理介紹

在實際應用中，遠端會議的多人共享螢幕的時候，會使用到本地合圖多個影片、圖片的情況，尤其是在多人遠端會議、直播pk、線上教育等場景下尤為普遍的需求。市面上也有很多合圖外掛和應用來為這些場景提供技術支援，比如騰訊會議的本地合圖功能。

但是我這裡想要說的是聲網的合圖外掛，為什麼這樣講？是因為聲網的合圖外掛結合聲網的Web SDK使用，會讓合圖效果更佳，而且使用操作起來更簡單，使用聲網的合圖外掛可以讓使用者在進行多人視訊會議的時候更加方便檢視和管理多個影片畫面，實現畫中畫的功能。

聲網的合圖功能的技術實現原理如下所示：

技術原理圖的詳解：

1.給參與本地合圖的每一個影片軌道建立影片輸入圖層（IBaseProcessor）、每一張圖片建立圖片輸入圖層（HTMLImageElement）；

2.連線每一個影片軌道與對應的影片輸入圖層之間的管線，將影片流注入對應的輸入圖層；

3.合成器（Compositor）對所有輸入圖層進行合併；

4.連線合成器與本地影片軌道之間的管線，將合圖後的影片輸出到 SDK。

具體步驟

在使用聲網的本地合圖外掛的時候，整合步驟很簡單，只需以下幾步即可：

1、專案要先把實時音影片功能實現，具體步驟見：實現視訊通話功能。

2、整合虛擬背景外掛，實現專案視訊通話的虛擬背景，由於篇幅有限這裡不再過多詳解，具體使用步驟參考文件：
https://docs.agora.io/cn/video-call-4.x/virtual_background_we...

3、給專案中整合本地合圖的外掛，具體使用npm的方式整合，具體操作步驟如下所示：

npm install agora-extension-video-compositor

接著往專案中引入合圖外掛，有兩種方式：

方法一：在 JavaScript 檔案中加入以下程式碼引入。

import VideoCompositingExtension from "agora-extension-video-compositor";

方法二：在 HTML 檔案中透過 Script 標籤引入。引入後即可在 JavaScript檔案中直接使用 VideoCompositingExtension 物件。

4、在專案中具體的檔案中建立和初始化本地合圖外掛：建立 AgoraRTCClient 物件之後，建立 VideoCompositingExtension 物件並呼叫 AgoraRTC.registerExtensions 註冊外掛，然後建立一個 VideoTrackCompositor 物件。具體如下所示：

// 建立 Client 物件
const client = AgoraRTC.createClient({mode: "rtc", codec: "vp8"});
// 建立 VideoCompositingExtension 和 VirtualBackgroundExtension 物件
const extension = new VideoCompositingExtension();
const vbExtension = new VirtualBackgroundExtension();
// 註冊外掛
AgoraRTC.registerExtensions([extension, vbExtension]);
// 建立 VideoTrackCompositor 物件
let compositor = extension.createProcessor();
let vbProcessor = null;

5、分別呼叫 createScreenVideoTrack、createCameraVideoTrack 和 createCustomVideoTrack 方法，建立三個影片軌道。具體程式碼如下所示：

// 使用螢幕畫面建立螢幕共享影片軌道
screenShareTrack = await AgoraRTC.createScreenVideoTrack({encoderConfig: {frameRate: 15}});
// 使用攝像頭採集的影片建立源影片軌道 1
sourceVideoTrack1 = await AgoraRTC.createCameraVideoTrack({cameraId: videoSelect.value, encoderConfig: '720p_1'})
// 使用本地影片檔案建立源影片軌道 2
const width = 1080, height = 720;
const videoElement = await createVideoElement(width, height, './assets/video.mp4');
const mediaStream = videoElement.captureStream();
const msTrack = mediaStream.getVideoTracks()[0];
sourceVideoTrack2 = AgoraRTC.createCustomVideoTrack({ mediaStreamTrack: msTrack });

6、按從下到上的順序建立圖片和影片軌道的輸入圖層，後建立的圖層會覆蓋在上方。在下面這段程式碼中，螢幕共享畫面位於最底層，源影片軌道 2 的畫面位於最頂層。具體如下所示：

// 建立螢幕共享影片軌道的輸入圖層
const screenShareEndpoint = processor.createInputEndpoint({x: 0, y: 0, width: 1280, height: 720, fit: 'cover'});
// 建立圖片的輸入圖層
compositor.addImage('./assets/city.jpg', {x: 960, y: 0, width: 320, height: 180, fit: 'cover'})
compositor.addImage('./assets/space.jpg', {x: 0, y: 540, width: 320, height: 180, fit: 'cover'})
// 建立源影片軌道 1 和 2 的輸入圖層
const endpoint1 = compositor.createInputEndpoint({x: 0, y: 0, width: 320, height: 180, fit: 'cover'});
const endpoint2 = compositor.createInputEndpoint({x: 960, y: 540, width: 320, height: 180, fit: 'cover'});
// 設定源影片軌道 1 的虛擬背景
if (!vbProcessor) {
vbProcessor = vbExtension.createProcessor();
await vbProcessor.init("./assets/was");
vbProcessor.enable();
vbProcessor.setOptions({type: 'none'});
}
// 連線影片輸入圖層與影片軌道之間的管線
screenShareTrack.pipe(screenShareEndpoint).pipe(screenShareTrack.processorDestination);
sourceVideoTrack1.pipe(vbProcessor).pipe(endpoint1).pipe(sourceVideoTrack1.processorDestination);
sourceVideoTrack2.pipe(endpoint2).pipe(sourceVideoTrack2.processorDestination);

7、合併所有輸入圖層，將合併後的影片注入到本地影片軌道。具體如下所示：

const canvas = document.createElement('canvas');
canvas.getContext('2d');
// 建立本地影片軌道
localTracks.videoTrack = AgoraRTC.createCustomVideoTrack({ mediaStreamTrack: canvas.captureStream().getVideoTracks()[0]});
// 設定合圖選項
compositor.setOutputOptions(1280, 720, 15);
// 開始合圖
await compositor.start();
// 將合圖後的影片注入本地影片軌道
localTracks.videoTrack.pipe(compositor).pipe(localTracks.videoTrack.processorDestination);

8、播放和釋出本地影片軌道。具體如下所示：

// 播放本地影片軌道
localTracks.videoTrack.play("local-player");
// 釋出本地音影片軌道
localTracks.audioTrack = localTracks.audioTrack || await AgoraRTC.createMicrophoneAudioTrack();
await client.publish(Object.values(localTracks));

9、當需要離開頻道時，呼叫 unpipe 斷開合成器以及所有影片軌道的管線，並且停止所有音影片軌道，否則再次加入頻道時可能會出錯。

具體的執行效果如下所示：

小結

透過上面關於基於音影片的本地合圖功能的核心步驟使用介紹，可以看到聲網的本地合圖外掛使用起來非常簡單，只需簡單幾步就可在前端音影片專案中實現本地合圖的功能。個人覺得聲網這個本地合圖的音影片外掛非常好用，不僅整合使用很簡單，而且實現的效果也很不錯，感興趣的讀者快來下手試一下吧！

2.基於聲網美顏外掛實現web端直播中的美顏特效

過程原理介紹

在實際應用中，關於美顏的使用是音影片類應用必備功能，而且市面上有太多關於美顏相關的外掛，不管是在直播pk、線上教育，還是在遠端會議等場景中，美顏功能成為最基本的需求。

在這裡我還是想要說一下聲網的美顏外掛，是因為聲網的美顏外掛結合聲網的Web SDK使用，會讓影片中人物畫面效果更佳，而且使用操作起來更簡單，使用聲網的美顏外掛可以讓使用者在進行影片相關場景下開啟美顏之後，調節美白、磨皮、祛痘、紅潤程度等操作，實現自然的美顏功能。

聲網的美顏功能的技術實現原理如下所示：

聲網 Web SDK 的媒體傳輸管道包含採集、前處理、編碼、傳輸、解碼、後處理和播放等環節。在前處理階段，外掛可以對管道中的音影片資料進行處理，從而實現虛擬背景、降噪、美顏等功能。

具體步驟

1、同理，專案要先把實時音影片功能實現，具體步驟見：實現視訊通話功能。

2、透過npm把美顏外掛整合到專案中，具體命令如下所示：

npm install agora-extension-beauty-effect

接著往專案中引入美顏外掛，有兩種方式：

方法一：在 JavaScript 檔案中加入以下程式碼引入。

import BeautyExtension from "agora-extension-beauty-effect";

方法二：在 HTML 檔案中透過 Script 標籤引入。引入後即可在 JavaScript 檔案中直接使用 VideoCompositingExtension 物件。

3、在專案中具體的檔案中建立和初始化美顏外掛：呼叫 AgoraRTC.createClient 建立 Client 物件後，新建一個 BeautyExtension 物件，然後呼叫 AgoraRTC.registerExtensions 並傳入建立的 BeautyExtension 物件。具體如下所示：

// 建立 Client
var client = AgoraRTC.createClient({mode: "rtc", codec: "vp8"});
// 建立 BeautyExtension 例項
const extension = new BeautyExtension();
// 註冊外掛
AgoraRTC.registerExtensions([extension]);

4、呼叫 extension.createProcessor 建立 BeautyProcessor 例項。具體如下所示：

const processor = extension.createProcessor();

5、在建立本地攝像頭影片軌道後，呼叫videoTrack.pipe並指定videoTrack.processorDestination，將外掛注入到 SDK 的媒體處理管道中。具體程式碼如下所示：

localTracks.videoTrack.pipe(processor).pipe(localTracks.videoTrack.processorDestination);

6、呼叫 processor.enable 開啟美顏。具體如下所示：

await processor.enable(); //若呼叫該方法前未呼叫 setOptions，SDK 會使用 BeautyEffectOptions 中各項美顏引數的預設值。

7、呼叫 processor.setOptions 設定美顏引數。具體如下所示：

processor.setOptions({
// 對比度
lighteningContrastLevel: 2,
// 亮度
lighteningLevel: 0.7,
// 平滑度
smoothnessLevel: 0.6,
// 銳化程度
sharpnessLevel: 0.5,
// 紅潤度
rednessLevel: 0.5
});

具體的執行效果可參考下圖：

小結

透過上面關於基於音影片的美顏功能的核心步驟使用介紹，可以看到聲網的這個美顏外掛使用起來非常簡單，只需簡單幾步就可在前端音影片專案中實現美顏特效的功能。個人覺得聲網的美顏外掛同樣非常的好用，不僅整合使用很簡單，而且實現的效果也很不錯，感興趣的讀者快來體驗吧！

結束語

透過本文關於實現基於聲網Web SDK的使用體驗，尤其是關於共享螢幕並本地合圖影片、圖片的功能和直播美顏特效的現實，不僅使用的步驟很簡單，而且實現出來的效果很不錯，完全可以滿足想要使用者開發相關應用的需求，尤其是本地合圖、直播美顏特效的業務場景。整體操作下來，個人還是覺得聲網對應的API文件寫的太好了，不僅很詳細，而且步驟也很清晰，再者就是聲網產品的整合步驟也很簡單，節省了整合外掛的時間，從整合到呼叫，再到體驗，用了不到一小時就搞定了本地合圖實現和直播美顏特效兩個模組的體驗。所以，有在開發音影片相關的朋友可以看過來了，聲網的相關產品不僅成熟，而且還很好用，快來體驗使用吧！

(正文完)

參考資料

註冊並試用每月 10000 分鐘免費的聲網影片SDK，體驗四行程式碼、三十分鐘快速構建沉浸式實時互動場景
下載體驗聲網相關 SDK & Demo
交流提問 & 撰寫文章，更好的技術氛圍可訪問「聲網RTE開發者社群」

神奇，聲網Web SDK還能這麼實現直播中美顏功能

前言

使用前的準備工作

實現視訊通話功能

1.螢幕共享並本地合圖多個影片、圖片的實現

過程原理介紹

具體步驟

小結

2.基於聲網美顏外掛實現web端直播中的美顏特效

過程原理介紹

具體步驟

小結

結束語

參考資料

相關文章