admin管理员组文章数量:1616691
因为疫情的原因，线上视频会议软件异军突起，成为了在家办公的主要沟通渠道。而最近抖音上“蚂蚁呀嘿”恶搞换脸的小视频也突然火了起来，那我就想了想能不能在视频会议的时候换张脸活跃下气氛？在 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 >里边分别放了显示自己视频#myVideo和对方视频#peerVideo的<video />组件，并设置为自动播放，以便于在加载摄像头后立刻开始播放画面。<p >在页面打开时显示自己的用户 ID，相当于是电话号码。<div >里是输入对方 ID 的文本框#peerIdInput和呼叫按钮#joinBtn。- 最后在
<head />中引入样式文件 style.css，在<body />结束前引入 index.js。我们将主要在 index.js 中编写代码。
CSS
css 的代码都比较简单，基本就是设置一下样式，这里介绍一下重要的部分，剩余的可以在源代码中查看。因为自己的视频要在视频接通时移动到右上角，那么就需要把 <div > 容器设置为相对定位，把我的视频和对方的视频设置成一样的宽高，然后先隐藏对方视频，当视频接通时，利用 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 {
</版权声明：本文标题：如何把“蚂蚁呀嘿”换脸特效用在前端 WebRTC 视频通话中 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/xitong/1728747607a1171431.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论