乐趣区

关于前端:神奇声网Web-SDK还能这么实现直播中美颜功能

jiezi

前言

本篇文章是通过应用声网 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 开发者社区」
退出移动版