130 行代码模仿火爆抖音的“蚂蚁呀嘿”特效，你学会了吗？
【CSDN 编者按】最近很火的AI换脸来啦，本文具体操作步骤已献上，快来get一下吧。
过去一年，线上视频会议软件异军突起，成为了在家办公的主要沟通渠道。而最近抖音中能够让照片张嘴唱歌的“蚂蚁呀嘿”特效也突然火了起来，那我就想了想能不能在视频会议的时候换张脸活跃下气氛？
在 GitHub 上一番搜寻之后发现还真有办法，有一个开源的 Python 人工智能换脸的库，那正好趁着这个机会研究一下前端 WebRTC 实现视频通话功能，外加换脸操作。
先看一下效果吧：
因为有涉及到一点点的后台，所以项目分成了两部分，一个是用于存放前端代码的 frontend 项目，另一部分是存放后端代码的 backend 项目：
项目根目录 |-- backend |-- frontend另外这个视频需要电脑上有摄像头，没有的话可以想办法把手机当作电脑的摄像头。
注意：本教程中的代码仅供展示 AI 换脸技术的应用，不可以用于获取其他人隐私或其他任何非法目的。
编写页面
因为是前端实现，首先肯定是编写页面。这个页面比较简单，就是一个视频组件、显示用户 ID 的文本、呼叫对方视频的输入框和按钮，视频组件默认显示自己的视频，当视频接通之后就会显示对方的视频，而自己的视频会缩小到右上角。
HTML
在 frontend 目录下新建 index.html、style.css 和 index.js 文件。首先看一下 HTML 结构，index.html 中主要的代码如下：
<!-- frontend/index.html --><head> <!-- 其他代码 --> <link rel="stylesheet" href="style.css" /></head><body> <main> <div id="container"> <div class="videos"> <video id="myVideo" class="videoSize" autoplay></video> <video id="peerVideo" class="videoSize" autoplay></video> </div> <p id="idText"></p> <div class="call"> <input type="text" id="peerIdInput" placeholder="请输入对方 id" /> <button id="joinBtn">视频通话</button> </div> </div> </main> <script src="index.js"></script></body>每个标签的作用是：
<main />用于设置页面背景，把所有组件居中对齐。<div class="videos">里边分别放了显示自己视频#myVideo和对方视频#peerVideo的<video />组件，并设置为自动播放，以便于在加载摄像头后立刻开始播放画面。<p id="idText">在页面打开时显示自己的用户 ID，相当于是电话号码。<div class="call">里是输入对方 ID 的文本框#peerIdInput和呼叫按钮#joinBtn。最后在
<head />中引入样式文件 style.css，在 <body /> 结束前引入index.js。我们将主要在 index.js 中编写代码。
CSS
CSS 的代码都比较简单，基本就是设置一下样式，这里介绍一下重要的部分，剩余的可以在源代码中查看。因为自己的视频要在视频接通时移动到右上角，那么就需要把 <div class="videos"> 容器设置为相对定位，把我的视频和对方的视频设置成一样的宽高，然后先隐藏对方视频，当视频接通时，利用 JavaScript 加上接通后，我的视频的样式，把我的视频设置为绝对定位，宽高调小，放到右上角：
/* frontend/style.css */videos { position: relative;}
.videoSize { width: 500px; height: 600px; object-fit: cover; /* 让视频按比例占满整个空间 */}
.rightTop { /* 以下是通话中的样式 */ position: absolute; width: 150px; height: 180px; right: 0; top: 0;}
#peerVideo { display: none;}其他组件基本只是设置了下 Grid 布局、宽高、大小、阴影、背景、字体，没有什么特殊的，可以直接查看源代码。样式中所用到的图标在 frontend/icons 目录下。
访问摄像头
接下来我们先熟悉一下访问摄像头的代码。在 JavaScript 中访问用户的摄像头主要使用navigator.mediaDevices.getUserMedia() 方法， 它接收一个对象作为参数，用于指定要获取的设备，例如视频或音频，然后返回一个 Promise，在 Promise 完成之后它会传递给我们一个 Stream 流，我们把它放到 <video /> 标签的 srcObject 属性中就可以了，是不是很简单？代码如下：
// frontend/index.jsconst myVideo = document.getElementById("myVideo");
navigator.mediaDevices.getUserMedia({video: true, audio: true}).then((stream) => { myVideo.srcObject = stream;});在这段代码中：
获取了
#myVideo这个<video />组件。使用
navigator.mediaDevices.getUserMedia()并给它传递了一个对象，对象的 video 和 audio 属性都设置为了 true，表示要访问摄像头和音频设备。
这时，使用 VS Code 的 Live Server 插件运行项目（没有的话安装一下，很简单），在 index.html 文件里右击，选择 Open with Live Server，打开之后，浏览器可能会提示此网站需要访问摄像头和音频设备，点击允许，就能看到自己的视频了。
编写后台
要实现视频通话，需要使用 WebRTC 技术，这个技术牵扯的概念和 API 过于庞大和复杂，不过有开源的库来帮我们简化了 WebRTC 的操作，这里使用一个叫做 Peer.js（https://peerjs.com/）的库，它封装了 WebRTC 杂乱的 API，提供了完整的、可配置的、易于使用的 API。
我们将会通过把 Peer 附加到 Express.js 服务器上，来生成用户 ID 并管理 WebRTC 连接。首先在 backend 目录下运行：
npm init -y# 或yarn init -y接着初始化一个 node.js 项目，使用 npm 或 yarn 安装 peer 和 express 依赖，因为想在改动代码时自动重启服务，我们也可以再安装一个 nodemon 依赖：
# 或npm install --save peer express nodemon安装完成之后新建一个 server.js 文件，整个后台服务我们就只需要这一个文件，都是一些简单的初始化代码，它里边的内容是：
const express = require("express");const { ExpressPeerServer } = require("peer");
const app = express();
const server = app.listen(3000);
const peerServer = ExpressPeerServer(server, { debug: true, path: "/",});
app.use("/video", peerServer);导入express库，并从peer库中导入与express进行结合的 ExpressPeerServer。 创建 express 实例 app，并监听3000端口。把 ExpressPeerServer 挂载到 express 中，设置 debug开发模式为 true，这样有更好的错误提示。路径为根目录。ExpressPeerServer 挂载之后会返回一个 express 的控制器。 把返回的控制器挂载到 /video路径下，这样/video路径就是主要的、peer.js提供的 WebRTC 通信路径。
script 配置项，里边定义 start 命令值为 nodemon server.js ： "scripts": { "start": "nodemon server.js" },这样使用 nodemon 运行 server.js 文件后，如果 server.js 中的内容发生变化，它会自动帮助我们重启服务器。
我们现在来运行一下 yarn start 或者 npm start ，看到命令行提示 [nodemon] starting node server.js就算启动成功了，我们访问一下 http://localhost:3000/video ，看到下方输出结果就说明 peer 也加载成功了：
{"name":"PeerJS Server","description":"A server side element to broker connections between PeerJS clients.","website":"https://peerjs.com/"}生成用户 ID
在前端中调用后端 Peer 服务可以使用 Peer.js 官方的前端库，可以直接使用 cdn 形式：
<script src="https://unpkg.com/peerjs@1.3.1/dist/peerjs.min.js"></script>frontend/peer 目录下，然后在 index.html 中，在引入 index.js 的上方，引入 peerjs：<script src="peer/peerjs.min.js"></script><script src="index.js"></script>接下来打开 index.js 文件，建立与后台 peer 服务的连接：
const peer = new Peer({ host: "localhost", port: "3000", path: "/video",});这里直接使用 peer.js 前端库导出的构造函数 Peer()，它接收一个对象作为参数，这里就分别把后台服务的 host、port 和 path 传递进去就可以了，它会返回 peer 实例，后续有关视频通话的操作就主要使用它来实现。
当成功的连接到后台服务之后，我们首先给自己生成一个唯一的用户 ID，就等同于是一个电话号码，那么这里我们可以监听 peer 的 open 事件，当连接打开后，会把生成的用户 ID 返回到事件处理回调函数中，然后我们获取 html 中的 #idText 这个 p 元素来显示自己的 ID：
const idText = document.getElementById("idText");
peer.on("open", (id) => { idText.textContent = "我的 id 是：" + id;});这时在 Live Server 中打开 index.html，就可以看到显示出了 ID，类似于：
我的 id 是：2573c3ae-ba79-404a-b807-2128856ef3c9多打开几个页面，可以看到每个人的 ID 都不同。
呼叫视频通话
在有了用户 ID 之后，就可以呼叫对方了。这里的逻辑是，用户在输入框输入对方 ID 之后，点击视频通话按钮进行呼叫。那么我们应该先获取视频通话按钮元素，然后监听它的点击事件，在里边发起呼叫：
const joinBtn = document.getElementById("joinBtn");// 发起呼叫joinBtn.addEventListener("click", () => { const peerId = peerIdInput.value; console.log("正在连接：" + peerId);
navigator.mediaDevices.getUserMedia({video: true, audio: true}).then((stream) => { const call = peer.call(peerId, stream); call.on("stream", showVideo); });});在点击按钮的时候，事件处理函数作了如下操作：
获取用户输入的对方的 ID。
获取当前用户的视频流，然后调用
peer.call()呼叫对方，peer.call()需要对方的 ID 和自己的视频流作为参数，然后返回与呼叫有关的实例，保存到 call 中。这时当前用户就开始等待对方应答了，为了简单起见，这里没有做等待的样式。
下一步监听 call 的 stream 事件，这个事件会在对方应答后触发，它会返回对方的视频流作为事件处理函数的参数，然后我们使用 showVideo() 函数处理对方的视频流。
showVideo() 函数的代码如下：
const peerVideo = document.getElementById("peerVideo");
function showVideo(stream) { myVideo.classList.add("rightTop"); peerVideo.srcObject = stream; peerVideo.style.display = "block";}这个函数就是简单的把自己的视频移动到右上角，通过之前定义的 .rightTop class 样式，然后把对方的视频流放到 #peerVideo 视频组件中，之后把它显示出来（之前设置的是 display: none 隐藏）。现在因为一直是等待对方接听，所以需要有一个应答的处理。
应答视频通话
应答的处理是监听 peer 的 call 事件，然后通过事件参数中与呼叫有关的实例来应答通话：
// 应答呼叫peer.on("call", (call) => { navigator.mediaDevices.getUserMedia({video: true, audio: true}).then((stream) => { call.answer(stream); call.on("stream", showVideo); });});这一步的代码虽然在同一个文件中，但是应该想象为收到视频通话呼叫的对方，代码作了下边的操作：
获取自己的视频流。
调用
answer()函数应答视频呼叫，并把自己的视频流传回给呼叫者。这里是当有呼叫时直接进行应答，为了简单起见，没有编写点击应答按钮相关的样式和事件。监听stream事件，这一步和之前的一样，应答后这个事件就会触发，然后同样使用
showVideo()函数加载视频。
好了，现在打开两个页面试试，在其中一个页面输入另一个页面生成的 ID，然后点击视频通话，就可以看到双方视频显示出来了。如果用的是同一个摄像头，那么显示的画面都是一样的。
实现换脸
实现换脸主要是用到了 Avatarify 这个 AI 换脸库，它是使用 Python 编写的，利用了 First-Order Motion Model算法来实现换脸。我们这里只需要按照步骤进行安装就可以了，此外还需要安装虚拟摄像头软件，用于把 Avatarify 换脸后的数据作为摄像头视频，然后在前端页面中访问这个虚拟的摄像头。
Avatarify 由于是对摄像头的视频进行实时计算，所以对显卡的要求非常高，且只支持启用了 CUDA 的 Nvidia 显卡来进行 GPU 加速，官方的统计数据是这样的：
GeForce GTX 1080 Ti: 33 帧/秒
GeForce GTX 1070: 15 帧/秒
GeForce GTX 950: 9 帧/秒
如果配置达不到，可以使用腾讯云或阿里云的 GPU 实例，把显卡有关的计算交给远程服务器去进行，本地只需要建立视频流即可。本文将主要使用这种方法。
如果配置达到了要求，也可以在本地安装运行，不过我没有试过，后边简单的贴一下官方安装指导（Windows 下），你可以自己尝试一下。
要注意的是，如果是在本地运行算法，可以在 Windows 和 Linux 操作系统中进行，或者也可以使用 Docker 进行部署，不过只支持 Linux 操作系统下的 Docker。
购买服务器
这里以腾讯云 GPU 实例为例，介绍一下服务器的配置，关于计费我们会使用按量计费，完成这篇教程所用的总体费用可能在 30 元左右，用完之后一定要记得关机或者销毁来停止计费。如果是关机，记得先把带宽调整为 0，停止带宽计费，然后关机时选择关机不收费选项。
然后在选择机型中选择如下配置：
计费模式：按量计费。
实例：选择 GPU 型，在机型列表中选择 GPU 计算型 GN7，这个是最便宜的，7.16 元/小时。
镜像：选择 Ubuntu 64位 18.04，不要选过高的版本。显卡驱动可能支持不完善。
勾选上后台自动安装 GPU 驱动，CUDA 版本选择 10.0.130，cuDNN 版本选择 7.4.2。
带宽实测需要 20M 起步，大概 1 元/小时，不过在安装 Avatarify 的时候带宽可以小一点，后边真正开启视频的时候再把它改大。
注意这里系统盘费用是 0.03 元/小时，这个在关机后仍然会收取。
在下一步设置主机中：
新建安全组。
登录方式这里使用密码，可以选择自行设置，也可以自动生成。
再下一步确认成功后完成购买，稍后就可以在控制台实例列表中看到刚购买的实例了，新购买的机器可能需要等5分钟才能配置完成。如果要修改带宽，可以在列表中找到对应的实例，在最右侧操作栏里选择更多->资源调整->调整带宽，进行调整。
因为 Avatarify 需要使用 5557 和 5558 端口，我们需要在安全组中放行这两个端口。点击实例名称超链接，进入实例详情页面，在上方选项卡中选择 安全组 ，在右侧规则预览中的入站规则选项卡里，点击编辑规则，在新页面里的入站规则里，点击添加规则，在对话框里填写：
类型：自定义。
来源：all。
协议端口：TCP:5557,5558
策略：允许。
点击完成即可。到这里实例配置就完成了，留意一下实例的公网 IP 地址，稍后使用 SSH 登录时需要用到它。
部署 Avatarify
我们使用 Docker 的方式来部署 Avatarify，先登录到我们的 GPU 实例中，可以直接在腾讯云控制台登录，也可以使用 ssh 命令或 putty 工具。这里以 ssh 为例，输入如下命令：
ssh ubuntu@你的实例ip然后根据提示输入密码，第一次登录可能有一大段英文提示（是否信任设备），直接输入 yes 回车即可。
安装 Docker
登录进去之后先安装 Docker，可以直接使用简易的安装脚本：
curl -fsSL https://get.docker.com -o get-docker.shsudo sh get-docker.sh如果无法访问这个脚本，我们还可以使用普通方式安装，按照以下步骤复制粘贴命令：
# 第一步sudo apt-get update
# 第二步sudo apt-get install \ apt-transport-https \ ca-certificates \ curl \ gnupg
# 第三步curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg
# 第四步echo \ "deb [arch=amd64 signed-by=/usr/share/keyrings/docker-archive-keyring.gpg] https://download.docker.com/linux/ubuntu \ $(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null这些步骤都是在配置 Docker 的安装仓库源和密钥，接下来运行下面两条命令来安装 Docker：
sudo apt-get updatesudo apt-get install docker-ce docker-ce-cli containerd.io安装完成之后，docker命令需要管理员权限才能运行，每次都需要输入 sudo，如果要省略sudo ，可以把当前用户（腾讯云默认为 ubuntu）添加到 docker 用户组中：
sudo usermod -aG docker ubuntu之后退出 ssh 并重新登录来让配置生效，我们可以运行下面的命令检查 Docker 是否安装成功：
docker run hello-world有打印出 hello world 字样和一大段英文就说明成功了。
安装 Nvidia Docker tookit
要让 docker 使用 GPU，需要安装 Nvidia Docker tookit，这一步也很简单，首先设置 Nvidia 的仓库源：
distribution=$(. /etc/os-release;echo $ID$VERSION_ID) \ && curl -s -L https://nvidia.github.io/nvidia-docker/gpgkey | sudo apt-key add - \ && curl -s -L https://nvidia.github.io/nvidia-docker/$distribution/nvidia-docker.list | sudo tee /etc/apt/sources.list.d/nvidia-docker.list然后安装 tookit 并重启 Docker：
sudo apt-get updatesudo apt-get install -y nvidia-docker2sudo systemctl restart docker运行一个示例 container 检查是否安装成功：
sudo docker run --rm --gpus all nvidia/cuda:11.0-base nvidia-smi如果打印出类似的如下信息就算成功了：
Fri Mar 5 08:47:39 2021+-----------------------------------------------------------------------------+| NVIDIA-SMI 418.126.02 Driver Version: 418.126.02 CUDA Version: 11.0 ||-------------------------------+----------------------+----------------------+| GPU Name Persistence-M| Bus-Id Disp.A | Volatile Uncorr. ECC || Fan Temp Perf Pwr:Usage/Cap| Memory-Usage | GPU-Util Compute M. ||===============================+======================+======================|| 0 Tesla T4 Off | 00000000:00:08.0 Off | 0 || N/A 26C P8 9W / 70W | 0MiB / 15079MiB | 0% Default |+-------------------------------+----------------------+----------------------+
+-----------------------------------------------------------------------------+| Processes: GPU Memory || GPU PID Type Process name Usage ||=============================================================================|| No running processes found |+-----------------------------------------------------------------------------+构建 Avatarify Docker 镜像
选择一个文件夹，使用 git 克隆 Avatarify 仓库：
git clone https://github.com/alievk/avatarify.git进入到克隆下来的 avatarify 仓库中，使用 docker 构建镜像：
cd avatarifydocker build -t avatarify .构建需要的时间比较长，耐心等待完成之后，启动服务：
bash run.sh --is-worker --docker看到有 5557 和 5558 端口就说明启动成功了。到现在，Avatarify 的服务端配置完成了，之后就是使用客户端调用服务，把计算部分交给我们的 GPU 实例。这时如果担心计费，可以先把实例关机，在本地安装好客户端后再开机。
接下来的步骤以 MacOS 为例，Windows 版可以直接跳到后边的 Windows 安装方法 小节。
安装 Avatarify 客户端
在本地电脑上，首先安装 Miniconda Python 3.8，可以从这里下载：
https://docs.conda.io/en/latest/miniconda.html#macosx-installers
或者使用 Homebrew：
brew install --cask miniconda克隆 avatarify 仓库并运行安装脚本：
git clone https://github.com/alievk/avatarify.gitcd avatarifybash scripts/install_mac.sh下载 CamTwist 虚拟摄像头软件（类似 OBS，但是 OBS 的虚拟摄像头在 Mac 中访问不到）并安装：
http://camtwiststudio.com/download
启动 Avatarify 客户端
确保远程 GPU 实例已启动，且运行了 avatarify docker 镜像监听 5557 和 5558 端口，然后在本地克隆的 avatarify 仓库中，运行 mac 客户端：
./run_mac.sh --is-client --in-addr tcp://server_address:5557 --out-addr tcp://server_address:5558记得把两个server_address改成 GPU 实例的公网 IP。服务端可能需要下载一些必要的文件，所以连接会慢一些，稍等启动成功后 Avatarify 会自动打开摄像头窗口。
我们可以根据提示调整好脸部位置，这里我们最好把脸放到红色矩形框中，光线要充足，不能太黑，可以使用 W/D 键缩放画面，调整好之后按 X 键就可以呼出换脸之后的预览视频窗口，它就是作为虚拟摄像头的视频来源。
Avatarify 内置了 9 张示例的人脸照片，可以按 1-9 键进行切换，也可以自定义人脸照片，放到 Avatarify 中的avatars文件夹下。
Avatarify 成功显示之后，打开 CamTwist 虚拟摄像头，在左侧选择 Desktop+，然后点击底部的 select，然后在右侧的 settings 下，勾上 Confine to Application Window，然后勾上下方的 Select from existing windows ，在下拉框中选择 python (avatarify) ，如果找不到可以退出 CamTwist 重新打开，或者多点击下拉框几次试试。现在虚拟摄像头就准备好了。
Windows 安装方法
在 Windows 下的安装方法与 MacOS 类似，而且如果显卡配置够高，可以省略购买远程 GPU 服务器步骤。
首先安装 Minicoda Python 3.8，可以从这里下载：
https://docs.conda.io/en/latest/miniconda.html#windows-installers
安装完成之后打开 Anaconda 命令提示符，克隆 avatarify 仓库，并运行 windows 操作系统下的安装脚本：
git clone https://github.com/alievk/avatarify.gitcd avatarifyscripts\install_windows.bat如果要在本地执行换脸算法，那么需要下载 network weights（228 MB）：
https://openavatarify.s3.amazonaws.com/weights/vox-adv-cpk.pth.tar
或
https://yadi.sk/d/M0FWpz2ExBfgAA
或
https://drive.google.com/file/d/1coUCdyRXDbpWnEkA99NLNY60mb9dQ_n3/view?usp=sharing
下载完成后放到 avatarify 的根目录下，无需解压。
运行 avatarify 客户端，如果是在本地运行，可以使用：
./scripts/run_windows.batWindows 系统下也可以使用远程 GPU 实例，使用下面的方式启动客户端：
./scripts/run_windows.bat --is-client --in-addr tcp://server_address:5557 --out-addr tcp://server_address:5558两个
server_address需要替换成远程 GPU 实例的公网 IP。启动成功之后和 Mac 的操作一样，使用 W/D 缩放画面，完成之后按 X 键调出 avatarify 预览窗口。
Windows 下的虚拟摄像头可以使用 OBS，最新版的 OBS 26.1 及以上已经内置了虚拟摄像头插件了，无需再单独安装。
下载并安装 OBS：
https://obsproject.com/
安装完成之后打开 OBS，在左下角的 Source（源）面板中添加 Windows Capture，把视频输入源设置为某个应用程序窗口，然后选择 [python.exe]: avatarify 程序，点击 OK，可以调整以下大小。
再在 Tools（工具）菜单中选择 VirtualCam（虚拟摄像头），选择 AutoStart（自动开启），设置 Buffered Frames（缓冲）为 0，然点击开始。（如果 Tools 菜单没有 VirtualCam，看看界面右下角的 start recording 附近有没有 start virtual cam）。
现在虚拟摄像头就准备好了。
实现换脸
接下来就是在我们的视频通话前端项目中，使用 CamTwist 或 OBS 提供的虚拟摄像头了。我们需要明确知道它们的设备 ID 才能指定具体使用哪个摄像头。
首先使用 Live Server 打开前端项目的 index.html 文件，在谷歌开发者工具的 console 中，使用下面这段代码打印出视频设备信息：
navigator.mediaDevices.enumerateDevices().then(function(devices) { devices.forEach(function(device) { if(device.kind === "videoinput") { console.log(device); } });})这段代码就是访问所有媒体设备，然后获取其中的视频设备并打印出来，从打印结果里找到 label 包含 CamTwist 或者 OBS（视操作系统而定）的那一项，记录 deviceId 属性。
在 index.js 文件中，保存 deviceId 值到一个常量中：
const cameraId = "982947417cf490bae44ffb6a837bddcb813704ee491dd85d9149c45389f5521b";在使用navigator.mediaDevices.getUserMedia()获取摄像头时，除了可以把 video 设置为 true 之外，还可以把他的值设置为一个对象，用来指定更多的信息，我们把它单独定义出来，在里边使用 cameraId 指定访问哪个摄像头：
const mediaConstrains = { video: { deviceId: { exact: cameraId, }, }, audio: true,};exact 是精确的、只使用指定 ID 的摄像头，不会使用其他备选的。
然后在获取自己摄像头设备的部分，替换成上边这个对象。或者为了方便测试，也可以把所有的都替换掉：
navigator.mediaDevices.getUserMedia(mediaConstrains).then(/* ... */)好了，现在再试试视频通话，是不是成功的换脸了呢？
这里要注意的是，可能是因为 CamTwist 软件和真正的摄像头有冲突，页面会不时的重新刷新，这个暂时还没有比较好的解决方案，如果你有精力的话可以研究一下。
附上本文的源代码：
https://github.com/zxuqian/code-examples/tree/master/webrtc/video-call-change-face
总结
这篇教程所用到的技术都很简单，只是配置比较复杂，本教程提供了换脸的基本步骤，剩下的可以根据需要继续进行完善。示例中实现的的是一对一的视频通话，不过在这个基础上也完全可以实现多方视频会议，只需要调整一下视频显示的样式，然后在有新人加进来时，创建相应的<video />标签，并追加到现有的视频列表中即可。现在我们来回顾一下过程：
编写前端 HTML/CSS 页面结构和样式，并尝试加载摄像头。
编写简单的后台应用，利用 epxress 和 peer 建立基于 WebRTC 的视频通话基础。
前端利用 peer.js 前端库调用后台生成用户 ID，并呼叫、应答视频通话。
配置 Avatarify 换脸服务器程序，利用云 GPU 服务把显卡计算相关部分转移到 GPU 实例中。
安装 Avatarify 客户端程序和虚拟摄像头应用，把换脸后的数据用虚拟摄像头展现出来。
前端获取虚拟摄像头 ID，在视频通话的时候使用此摄像头。
如果有帮助请点赞并分享，有问题可以评论留言，感谢阅读！
作者：峰华，简介：前端工程师，以直观、专业的方式分享编程知识。Bilibili UP@峰华前端工程师