使用 TensorFlow.js 和 OffscreenCanvas 实现实时防挡脸弹幕

首先,要理解我们的目标,我们将实时获取视频中的面部区域并将其周围的内容转为不透明以制造出弹幕的“遮挡效应”。

步骤一:环境准备

我们将使用 TensorFlow.js 的 Body-segmentation 库来完成面部识别部分,并使用 OffscreenCanvas 来绘制更新后的图像。

安装相关库:

npm install @tensorflow-models/body-segmentation

步骤二:使用 body-segmentation 检测脸部

首先,我们需要导入所需的库并配置我们的模型。

import { createSegmenter, SupportedModels } from "@tensorflow-models/body-segmentation";
import type { Ref } from "vue";const model = SupportedModels.MediaPipeSelfieSegmentation;
const segmenterConfig = {runtime: "mediapipe",solutionPath: "https://cdn.jsdelivr.net/npm/@mediapipe/selfie_segmentation",modelType: "general"
}
const segmenter = await createSegmenter(model, segmenterConfig);

接下来,我们会定期从视频流中获取图像,然后使用 segmenter.segmentPeople(videoEl) 对其进行处理。

步骤三:使用 OffscreenCanvas 进行绘制

我们接下来要创建一个 worker,并将画布对象和 mask 图像传给它。在 worker 端,我们会从 mask 图像中剔除人脸部分,然后在这部分绘制白色,产生弹幕的“遮挡效应”。 注意转移权移动给worker。

const worker = new Worker("/src/assets/pull/worker.ts");
let offscreen;
export async function detect(videoEl: HTMLVideoElement, canvas: Ref<HTMLCanvasElement>) {if (!offscreen) {offscreen = canvas.value.transferControlToOffscreen();}const segmentation = await segmenter.segmentPeople(videoEl);const mask = await segmentation[0].mask.toCanvasImageSource();worker.postMessage({ canvas: offscreen, mask: mask }, [offscreen]);window.setTimeout(() => detect(videoEl, canvas), 66);
}

步骤四:Worker中绘制图像

在 worker 中,我们需要接收主线程传来的信息,并进行绘制。然后我们将绘制后的结果发送回主线程。

self.onmessage = function (event) {const offscreen = event.data.canvas;const mask = event.data.mask;const context = offscreen.getContext('2d');const reader = new FileReaderSync();// ... 清空画布,并绘制图像操作offscreen.convertToBlob({type: 'image/png', quality: 0 }).then((blob: Blob) => {const dataURL = reader.readAsDataURL(blob);self.postMessage({ msgType: 'mask', val: dataURL });}).catch(console.error);
};

经过以上步骤,我们成功制造了弹幕的“遮挡效应”。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/10901.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

tvm.frontend.from_pytorch详细介绍(1)

文章目录 一、pytorch前端整体转化流程&#xff08;部分&#xff09;1.脚本化的pytorch模型2.内联优化(_run_jit_passes)2.1、内联优化2.2 什么是内联函数 3.graph中的所有op(get_all_op_names)3.1 各个变量的值1 .graph2 .nodes3 .p nodes4、返回结果 二、from_pytorch完整代码…

国内智能搜索工具实战教程

大家好,我是herosunly。985院校硕士毕业,现担任算法研究员一职,热衷于机器学习算法研究与应用。曾获得阿里云天池比赛第一名,CCF比赛第二名,科大讯飞比赛第三名。拥有多项发明专利。对机器学习和深度学习拥有自己独到的见解。曾经辅导过若干个非计算机专业的学生进入到算法…

3、Qt--配置文件的使用

开发平台&#xff1a;Win10 64位 开发环境&#xff1a;Qt Creator 13.0.0 构建环境&#xff1a;Qt 5.15.2 MSVC2019 64位 一、需求及方案 实际开发过程中&#xff0c;我们需要根据本地的配置文件&#xff0c;去配置我们的程序&#xff0c;比如数据库地址、网络地址等信息&…

分享10类正规的网上赚钱平台,让你摆脱单一收入

在这个互联网飞速发展的时代&#xff0c;你是否还在为单一的收入来源而焦虑&#xff1f;别担心&#xff0c;今天带你解锁10种网上赚钱的新姿势&#xff0c;让你的收入不再单一&#xff0c;甚至可能翻倍&#xff01; 1. 文库类&#xff1a;知识的变现 你知道吗&#xff1f;你的…

k8s 数据流向 与 核心概念详细介绍

目录 一 k8s 数据流向 1&#xff0c;超级详细版 2&#xff0c;核心主键及含义 3&#xff0c;K8S 创建Pod 流程 4&#xff0c;用户访问流程 二 Kubernetes 核心概念 1&#xff0c;Pod 1.1 Pod 是什么 1.2 pod 与容器的关系 1.3 pod中容器 的通信 2&#xff0c; …

imx91的uboot编译

一、准备操作 下载半导体厂家的uboot源码 如这里我要下载的是imx91的恩智浦linux芯片bootloader 进入半导体厂家官网 下载源码&#xff0c;略 更新linux源&#xff0c;这里我是替换成清华源 vi /etc/apt/sources.list deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ fo…

【江科大STM32学习笔记】新建工程

1.建立工程文件夹&#xff0c;Keil中新建工程&#xff0c;选择型号 2.工程文件夹里建立Start、Library、User等文件夹&#xff0c;复制固件库里面的文件到工程文件夹 为添加工程文件准备&#xff0c;建文件夹是因为文件比较多需要分类管理&#xff0c;需要用到的文件一定要复…

Web UI自动化测试--PO模式

没有PO实现的测试用例的问题: 重用性低:登录功能重复可维护性差:数据和代码混合可读性差:元素定位方法杂乱(id、xpath、css混杂)可读性差:不易识别操作的含义(特别是css和xpath语法)可维护性差:如果某个元素的属性改了,你要更改多次PO(Page Object Model)页面对象模型…

完全背包问题(c++)

完全背包问题 当前有 N 种物品&#xff0c;第 i 种物品的体积是 ci​&#xff0c;价值是 wi​。 每种物品的数量都是无限的&#xff0c;可以选择任意数量放入背包。 现有容量为 V 的背包&#xff0c;请你放入若干物品&#xff0c;使总体积不超过 V&#xff0c;并且总价值尽可…

el-table被点击行添加背景颜色

在 Element UI 的 el-table 组件中&#xff0c;你可以通过使用行样式 row-style 属性来为被点击的行添加颜色。首先&#xff0c;你需要在数据中定义一个对象来存储被点击行的索引&#xff0c;然后在 row-style 函数中根据这个索引来返回不同的样式。 以下是一个示例&#xff1…

YOLOv8+CLIP实现图文特征匹配

本文通过结合YOLOv8s的高效物体检测能力与CLIP的先进图像-文本匹配技术&#xff0c;展示了深度学习在处理和分析复杂多模态数据中的潜力。这种技术的应用不仅限于学术研究&#xff0c;还能广泛应用于工业、商业和日常技术产品中&#xff0c;以实现更智能的人机交互和信息处理。…

新年首站 | 宝兰德教育行业信创新动力发展研讨会顺利召开

近日&#xff0c;宝兰德携手慧点数码、安超云共同举办了教育行业信创新动力发展研讨会。会议邀请了中国人民公安大学、中国戏曲学院、北京航空航天大学、北京理工大学、华北电力大学、中国矿业大学、北京服装学院、北京城市学院等数十所高校信息中心负责人、专家出席了本次会议…

LeetCode 题目 120:三角形最小路径和

作者介绍&#xff1a;10年大厂数据\经营分析经验&#xff0c;现任字节跳动数据部门负责人。 会一些的技术&#xff1a;数据分析、算法、SQL、大数据相关、python&#xff0c;欢迎探讨交流 欢迎加入社区&#xff1a;码上找工作 作者专栏每日更新&#xff1a; LeetCode解锁1000题…

WEB后端复习——javabean与会话cookie、session

JavaBean 是一种符合特定命名约定的 Java 类&#xff0c;它通常用于封装数据。 JavaBean 的主要特点是&#xff1a; 1. 无参构造器&#xff1a;JavaBean 必须有一个公共的&#xff08;public&#xff09;无参构造方法&#xff0c;以便于反射时能够创建对象实例。 2. 属性&…

Android的视图显示和管理机制:layout view window WindowManager Canvas Surface

在Android系统中&#xff0c;Layout view window WindowManager Canvas Surface SurfaceFlinger这些组件协同工作&#xff0c;以实现图形的绘制和显示。需要搞明白这些组件是什么时候创建的以及他们之间的结构关系。 从上到下的层级关系&#xff1a;用户在View上进行操作&…

嵌入式交叉编译:ffmpeg及相关库

目前只编译了部分。其他库需要时再说。 fdk-aac 嵌入式交叉编译&#xff1a;linux fdk-aac-CSDN博客 libvpx 这个最麻烦&#xff0c;还是编译通过啦。 嵌入式交叉编译&#xff1a;libvpx&#xff08;全网首发&#xff09;-CSDN博客 x265 嵌入式交叉编译&#xff1a;x265…

考研踩坑经验分享

文章目录 写在前面自身情况简介自身学习路线优点坑点 学习路线建议1、2和3月份3、4和5月份6、7和8月份9、10月份11、12月份 一些私货建议结尾 写在前面 考研是一件非常有盼头的事&#xff0c;但绝对不是一件容易的事。 如果你不能做好来年三月份出成绩时&#xff0c;坦然接受…

Ubuntu 下使用 Scons 交叉编译嘉楠堪智 CanMV K230 大小核 Coremark 程序

在 Ubuntu 下使用 SCons 进行交叉编译嘉楠堪智 CanMV K230 大小核&#xff08;不同的玄铁 C908 核心&#xff09;的 C 程序&#xff0c;以 Coremark 程序为例&#xff0c;顺便测试一下大小核和编译器的性能。 2024年3月14日&#xff0c;嘉楠科技宣布推出了全球首款支持 RISC-V…

# 从浅入深 学习 SpringCloud 微服务架构(十七)--Spring Cloud config(1)

从浅入深 学习 SpringCloud 微服务架构&#xff08;十七&#xff09;–Spring Cloud config&#xff08;1&#xff09; 一、配置中心的 概述 1、配置中心概述 对于传统的单体应用而言&#xff0c;常使用配置文件来管理所有配置&#xff0c;比如 SpringBoot 的 application.y…

消费金融平台公司如何做大做强自营产品

本文来自于2019年的某次内部分享沟通会&#xff0c;部分敏感内容已做删减。