自从大二初次接触前端以来，一直都有记markdown笔记的习惯.又因为掘金最近有一个活动.所以开了这个专栏。我会写一些业务相关的小技巧和前端知识中的重点内容之类的整理一下发上来。难免有点地方不够细致。欢迎大家指教
这个文章讲一下 怎么用face.js 和 javascript 实现视频的人脸替换.最后你会实现下图效果
打个码嘿嘿
第一步：引入依赖和样式
<head>
<script src="face-api.js"></script> <!-- 引入face-api.js库 -->
<script src="js/commons.js"></script> <!-- 引入commons.js脚本 -->
<script src="js/faceDetectionControls.js"></script> <!-- 引入faceDetectionControls.js脚本 -->
<link rel="stylesheet" href="styles.css"> <!-- 引入本地样式表styles.css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.css"> <!-- 引入Materialize样式表 -->
<script type="text/javascript" src="./jq.js"></script> <!-- 引入jq.js脚本 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script> <!-- 引入Materialize JavaScript库 -->
</head>
第二步：创建页面结构
<body>
<div class="center-content page-container">
<div class="progress" id="loader"> <!-- 显示加载进度 -->
<div class="indeterminate"></div>
</div>
<div style="position: relative" class="margin">
<video onloadedmetadata="onPlay(this)" id="inputVideo" autoplay muted playsinline></video> <!-- 创建视频元素并调用onPlay函数 -->
<canvas id="overlay" /> <!-- 创建画布元素 -->
</div>
<span id="tiny_face_detector_controls">
<div class="row side-by-side">
<div class="row">
<label for "scoreThreshold">Score Threshold:</label>
<input disabled value="0.5" id="scoreThreshold" type="text" class="bold">
</div>
<button
class="waves-effect waves-light btn"
onclick="onDecreaseScoreThreshold()"
>
<i class="material-icons left">-</i>
</button>
<button
class="waves-effect waves-light btn"
onclick="onIncreaseScoreThreshold()"
>
<i class="material-icons left">+</i>
</button>
</div>
</span>
</div>
</body>
第三步：添加JavaScript代码
首先我们需要知道，我们识别有两个步骤
第一步是获取用户摄像头或者是获取到指定的视频元素.这一步通过await navigator.mediaDevices.getUserMedia({ video: {} }) 要么通过video 上面 的 srcObject 也可以把目标输出给 facejs。如果你是MP4视频并且想要自定义时间，video 属性上面有一个 属性 time 可以进行使用。
第二步是调用 face api 对目标 进行输出。先初始化 face.js 的 option 也就是 置信度 。然后你就可以调用 const result = await faceapi.detectSingleFace(videoEl, options).withFaceExpressions() 传入第一步的 video 元素 和 option 的到 最终 的 参数 result。拿到这个参数后 你可以用 faceapi.draw.drawDetections 进行 绘图。也可以 直接 进行打印 result?.expressions
js 部分完整代码
// 步骤 1: 初始化变量
let forwardTimes = [] // 创建一个空数组用于存储时间信息
let withBoxes = true // 布尔值，用于控制是否显示人脸框
// 步骤 2: 视频播放时触发的函数
async function onPlay() {
const videoEl = $('#inputVideo').get(0)
// 步骤 2.1: 获取视频元素
const options = getFaceDetectorOptions() // 步骤 3.2: 获取人脸检测选项
const ts = Date.now()
// 步骤 2.2: 进行人脸检测和表情识别
const result = await faceapi.detectSingleFace(videoEl, options).withFaceExpressions()
console.log(result?.expressions) // 打印表情识别结果
if (result) {
// 步骤 2.3: 获取画布元素并匹配尺寸 | 调整结果尺寸
const canvas = $('#overlay').get(0)
const dims = faceapi.matchDimensions(canvas, videoEl, true)
const resizedResult = faceapi.resizeResults(result, dims)
const minConfidence = 0.05 // 设置最小置信度
if (withBoxes) {
// 步骤 3 绘制人脸框
faceapi.draw.drawDetections(canvas, resizedResult)
}
faceapi.draw.drawFaceExpressions(canvas, resizedResult, minConfidence)
}
// 控制视频播放频率
setTimeout(()=>{onPlay()},10)
}
// 步骤 4: 加载人脸检测和表情识别模型
async function run() {
await changeFaceDetector(TINY_FACE_DETECTOR)
await faceapi.loadFaceExpressionModel('./')
changeInputSize(224)
// 步骤 4.1: 尝试访问用户的摄像头并将图像流传输到视频元素
const stream = await navigator.mediaDevices.getUserMedia({ video: {} })
const videoEl = $('#inputVideo').get(0)
videoEl.srcObject = stream
}
// 步骤 5: 初始化人脸检测控件
initFaceDetectionControls()
// 步骤 6: 运行主程序
run()
注意 这个 console.log(result?.expressions) 。会持续输出 表情数据，如果不想让它 输出的 太快 。可以在 setTimeout(()=>{onPlay()},10) 中 把 时间拉长一点
