如何把“蚂蚁呀嘿”换脸特效用在前端 WebRTC 视频通话中

最新推荐文章于 2023-12-21 14:02:10 发布

峰华前端工程师

最新推荐文章于 2023-12-21 14:02:10 发布

阅读量8.1k

点赞数 27

分类专栏：前端文章标签： web javascript html5 css webrtc

本文链接：https://blog.csdn.net/fengqiuzhihua/article/details/114825972

版权

因为疫情的原因，线上视频会议软件异军突起，成为了在家办公的主要沟通渠道。而最近抖音上“蚂蚁呀嘿”恶搞换脸的小视频也突然火了起来，那我就想了想能不能在视频会议的时候换张脸活跃下气氛？在 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 {
   
  <

最低0.47元/天解锁文章

峰华前端工程师

关注

27
点赞
踩
54

收藏

觉得还不错? 一键收藏
打赏
15
评论
如何把“蚂蚁呀嘿”换脸特效用在前端 WebRTC 视频通话中

因为疫情的原因，线上视频会议软件异军突起，成为了在家办公的主要沟通渠道。而最近抖音上“蚂蚁呀嘿”恶搞换脸的小视频也突然火了起来，那我就想了想能不能在视频会议的时候换张脸活跃下气氛？在 Github 上一番搜寻之后发现还真有办法，有一个开源的 Python 人工智能换脸的库，那正好趁着这个机会研究一下前端 WebRTC 实现视频通话功能，外加换脸操作。先看一下效果吧：因为有涉及到一点点的后台，所以项目分成了两部分，一个是用于存放前端代码的 frontend 项目和存放后端代码的 backend 项目：项
复制链接

扫一扫