帮B站开启圣诞节模式～
帮B站开启圣诞节模式～
mixlab
发布于 2018-12-27 11:46:46
发布于 2018-12-27 11:46:46
给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 圣诞模式
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2018-12-13，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
相关产品与服务
人脸识别
腾讯云神图·人脸识别（Face Recognition）基于腾讯优图强大的面部分析技术，提供包括人脸检测与分析、比对、搜索、验证、五官定位、活体检测等多种功能，为开发者和企业提供高性能高可用的人脸识别服务。 可应用于在线娱乐、在线身份认证等多种应用场景，充分满足各行业客户的人脸属性识别及用户身份确认等需求。