给bilibili上的所有视频里的人物都带上圣诞帽,
开启节日模式,
长按二维码查看视频效果。
def CodeFun
( video ,FaceRecognition ):
采用的技术栈:
face-api.js
chrome插件开发
步骤
STEP1
在manifest.json里设置加载face-api.js库。
"lib/face-api.min.js"
"js/content_script.js"
这样的话,在网页加载的时候,就可以通过content_script.js,调用face-api,并注入js代码至b站。
STEP2
通过开发者工具查找到b站视频的class属性,在网站加载时添加一个蒙板,用于绘制圣诞帽。
let videoContainer = document.querySelector('.bilibili-player-video');
let faceMask = document.createElement('div');
faceMask.setAttribute('id', 'mix-faceMask');
videoContainer.appendChild(faceMask);
添加的faceMask的style需要设置成:
position: absolute;
face-api加载预训练模型(可以从github或者自己的服务器下载)
await faceapi.loadSsdMobilenetv1Model('https://justadudewhohacks.github.io/face-api.js/models');
STEP3
获取视频的某一帧,检测人脸。
let videoEl=document.querySelector('.bilibili-player-video video');
const detections = await faceapi.detectAllFaces(videoEl, faceDetectionOptions);
STEP4
把检测到的人脸区域,绘制上圣诞帽,圣诞帽我这里直接转成base64的形式,写在了content_script.js里。
let baseImg=new Image();
baseImg.src='data:image/png;base64,...';
根据每一帧检测到人脸的结果,绘制圣诞帽。
let c = document.createElement('canvas');
for (let index = 0; index < detections.length; index++) {
let box = detections[index].box;
let x = box.x, y = box.y, w = box.width, h = box.height;
ctx.drawImage(baseImg, x - w * 0.25, y -0.85 * h, w, h);
};
至此,自动戴圣诞帽的功能就完成啦~
return 圣诞模式