当前位置: 首页 > article >正文

基于 Gitee AI数据集实现弹幕不遮挡人像滚动

引言

    最近在刷视频的时候不巧发现了一个giteeAI工具,根据内部推荐的数据集,最后找到了一个叫tensorflow.js的github库,能够简单实现对于视频人像的扣取,从而可以为视频生成AI遮罩层,最终实现弹幕不会遮住人像的效果。
在这里插入图片描述

效果如下

    由于使用的数据集不是很大,所以运行起来的效果可能不如B站的完美,由于数据集是第三方数据集,需要挂梯子才能够有效访问,否则会出现资源加载失败的bug。

弹幕遮罩效果演示录频

实现原理

    在实现上,主要是利用了前端的mask-image属性,mask-image支持png格式的图片,然后内容只会出现在png非透明区域(也就是非透明背景色块),从而实现了人像不会被遮罩。关键在于视频每一帧的人像扣取并生成一个对人像的无色色块。具体的实现代码如下(完整代码链接):

<script setup>
import * as bodySegmentation from "@tensorflow-models/body-segmentation";
import { onMounted } from "vue";
const canvas = document.createElement("canvas");
const canvasCtx = canvas.getContext("2d");

let segmenter = null;

const segmenterConfig = {
  runtime: 'mediapipe', // or 'tfjs'
  solutionPath: 'https://cdn.jsdelivr.net/npm/@mediapipe/selfie_segmentation',
  modelType: 'general'
}
async function setMask() {
  const videoElem = document.querySelector("#video");
  canvas.width = videoElem.clientWidth;
  canvas.height = videoElem.clientHeight;
  canvasCtx.clearRect(0, 0, canvas.width, canvas.height);
  canvasCtx.drawImage(videoElem, 0, 0, canvas.width, canvas.height);

  if (!segmenter) {
    segmenter = await bodySegmentation.createSegmenter(bodySegmentation.SupportedModels.MediaPipeSelfieSegmentation, segmenterConfig)
  }

  const segmentation = await segmenter.segmentPeople(canvas);
  const coloredPartImage = await bodySegmentation.toBinaryMask(segmentation);

  canvasCtx.clearRect(0, 0, canvas.width, canvas.height);
  canvasCtx.putImageData(coloredPartImage, 0, 0);

  const base64Data = canvas.toDataURL('image/png');
  const danmuEle = document.querySelector(".danmu");
  console.log("输出数据:", danmuEle);
  danmuEle.style.maskImage = `url(${base64Data})`;
}
onMounted(() => {
  function loop() {
    requestAnimationFrame(() => {
      setMask();
      loop();
    })
  }
  loop();
});
</script>

<template>
  <div class="danmu-video">
    <video id="video" controls="controls" autoplay="true">
      <source src="./assets/Output.mp4" type="video/mp4">
    </video>
    <div class="danmu">
      <marquee>
        <p>手动测试手动测试手动测试手动测试手动测试手动测试手动测试手动测试手动测试手动测试</p>
        <p>手动测试手动测试手动测试手动测试手动测试手动测试手动测试手动测试手动测试手动测试</p>
        <p>手动测试手动测试手动测试手动测试手动测试手动测试手动测试手动测试手动测试手动测试</p>
        <p>手动测试手动测试手动测试手动测试手动测试手动测试手动测试手动测试手动测试手动测试</p>
        <p>手动测试手动测试手动测试手动测试手动测试手动测试手动测试手动测试手动测试手动测试</p>
        <p>手动测试手动测试手动测试手动测试手动测试手动测试手动测试手动测试手动测试手动测试</p>
        <p>手动测试手动测试手动测试手动测试手动测试手动测试手动测试手动测试手动测试手动测试</p>
        <p>手动测试手动测试手动测试手动测试手动测试手动测试手动测试手动测试手动测试手动测试</p>
        <p>手动测试手动测试手动测试手动测试手动测试手动测试手动测试手动测试手动测试手动测试</p>
        <p>手动测试手动测试手动测试手动测试手动测试手动测试手动测试手动测试手动测试手动测试</p>
        <p>手动测试手动测试手动测试手动测试手动测试手动测试手动测试手动测试手动测试手动测试</p>
        <p>手动测试手动测试手动测试手动测试手动测试手动测试手动测试手动测试手动测试手动测试</p>
        <p>手动测试手动测试手动测试手动测试手动测试手动测试手动测试手动测试手动测试手动测试</p>
        <p>手动测试手动测试手动测试手动测试手动测试手动测试手动测试手动测试手动测试手动测试</p>
        <p>手动测试手动测试手动测试手动测试手动测试手动测试手动测试手动测试手动测试手动测试</p>
        <p>手动测试手动测试手动测试手动测试手动测试手动测试手动测试手动测试手动测试手动测试</p>
        <p>手动测试手动测试手动测试手动测试手动测试手动测试手动测试手动测试手动测试手动测试</p>
        <p>手动测试手动测试手动测试手动测试手动测试手动测试手动测试手动测试手动测试手动测试</p>
      </marquee>
    </div>
  </div>
</template>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

.danmu-video {
  height: 300px;
  width: 300px;
  position: relative;
}

#video {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
}

.danmu {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  z-index: 1;
  pointer-events: none;
}

.danmu p {
  font-size: 12px;
}
</style>

    但是目前giteeAI不能够自己上传自己的数据集,不然的话可以看到更多的更加细腻的识别数据集:
在这里插入图片描述

补充说明

    一般来说AI模型的运行应该交给后端,现实上,可以将视频的每一帧获取之后提交给后端,然后生成mask-image之后前端再显示(但是这样好像给前后端带来的流量压力都有些大,如果有做过这方面的大佬希望能够再评论区指点一二),或者继续期待我们GiteeAI提供更多完备的AI数据集和API调用接口,更多功能可以继续去giteeAI尝试哦。
在这里插入图片描述


http://www.kler.cn/a/372965.html

相关文章:

  • 02 什么是Babel
  • 从0开始学python-day18-Python包和模块2
  • 贪心算法入门(一)
  • [0152].第3节:IDEA中工程与模块
  • 【总目录】
  • Python第六次作业
  • Leetcode224 -- 基本计算器及其拓展
  • Spring学习笔记_17——@Primary
  • 基于python的语音识别与蓝牙通信的温控系统毕设项目
  • 医学数据分析中的偏特征图可视化
  • 请详细介绍python三大神器:迭代器、生成器、装饰器
  • 数据结构练习题(链表)
  • 2024双11买什么东西比较好?双十一购物清单
  • 全面解读京东商品详情 API 接口:从功能到应用场景
  • 从0学习React(6)
  • k8s 1.28.2 集群部署 Thanos 对接 MinIO 实现 Prometheus 数据长期存储
  • GO语言微服务 服务注册与服务发现平台 - Nacos go sdk
  • 通过route访问Openshift上的HTTP request报错504 Gateway Time-out【已解决】
  • C#读取.ini配置文件
  • 手工方式屏蔽某一个网站
  • 利用摄像机实时接入分析平台LiteAIServer视频智能分析软件进行视频监控:过亮过暗检测算法详解
  • AHT20 HAL库驱动
  • 人工智能:开启未来之门
  • 如何分析算法的执行效率和资源消耗
  • 将本地某个commit 提交另一个分支上
  • Unity BesHttp插件修改Error log的格式