【Modelground】个人AI产品MVP迭代平台（4）——Mediapipe视频处理网站介绍

文章目录

  • 介绍
  • 模型配置
  • 输入输出
  • 核心实现（源码）
  • 总结

介绍

这篇文章我将硬核介绍Modelground的第一个产品——Mediapipe视频处理！网站入口为https://tryiscool.space/ml-video/，如图所示，欢迎体验。

在这里插入图片描述
tip: 由于服务器带宽较小，初次加载模型需要一定的等待时间。

Mediapipe视频处理的目标是：在线生成Mediapipe各类模型处理后的视频，支持导出视频和自定义样式。 效果如下图所示。

Mediapipe视频处理界面

整个网站分为两部分，左侧为模型选择器和模型配置模块，右侧上部分为视频流选择及导出选项，右侧下部分为视频处理效果。

模型配置

目前支持5个模型，投篮命中识别模型、脸部识别、姿态识别、手部识别和对象检测。

在这里插入图片描述
模型参数配置，暴露出模型的所有参数，供使用者自行调整，找出最佳配置。另外，每个模型提供了部分可选预训练模型，体积不同，效果也不一样。具体可参考官网。

在这里插入图片描述
样式配置可以对模型的输出做自定义的配置，例如脸部识别结果包括左眼、左眉毛、左瞳孔、嘴唇、脸廓等，你都可以修改配置。

在这里插入图片描述

输入输出

输入有两种形式，一种是视频/图片文件，另一种是摄像头。

下方左侧是视频处理性能监控组件。下载格式分为webm/gif，默认webm，如果选择gif，录制时间不宜太长，否则gif文件过大。视频速率是视频原速度的倍数，默认原速度（1倍），可调整。背景图开关决定输出图片/视频是否包含原图/视频。

在这里插入图片描述
点击开始识别后，可点击结束识别，输出结果即可下载。以下是一个简短的人脸识别gif结果。是不是挺酷炫？

在这里插入图片描述

核心实现（源码）

首先，前一章我们说过，Modelground的工程架构是monorepo多项目架构。其公共模型库被提取到了单独的项目中，供其余项目通过workspace的方式直接引用，而不需要再发包。那么这个公共模型库，我命名为mediapipe-model-core。（当然，这个npm包是publish过的，不过近期并没有更新，也没有很好的说明文档，后期如果大家感兴趣，我可以继续维护，但请告知我。）其项目结构如下图所示。

在这里插入图片描述
封装后的模型放在model文件夹下，base.ts是模型的抽象基类，所有具体模型都继承该基类，代码如下：

// model/bast.ts

import { FilesetResolver } from "@mediapipe/tasks-vision";
import _cloneDeep from "lodash-es/cloneDeep";
import { getModelName } from ".";
import { IParams, WasmFileset } from "./type";

let vision: WasmFileset;

/**
 * 封装模型基类
 */
export abstract class MediaPipeModal {
  public _modelInstance: any;

  public params: any[] = [];

  public config: Record<string, unknown> = {};

  public styleConfig: Record<string, unknown> = {};

  public model: any;

  constructor() {}

  /**
   * 初始化及加载模型
   */
  async init(baseUrl: string = "/") {
    this.initConfig(baseUrl);
    const vision = await this.initVison(baseUrl);
    this._modelInstance = await this.model.createFromOptions(
      vision,
      this.config
    );
  }

  // wasm只加载一次
  async initVison(baseUrl: string) {
    if (vision) {
      return vision;
    }
    vision = await FilesetResolver.forVisionTasks(baseUrl + "wasm");
    return vision;
  }

  getOptions() {
    return _cloneDeep(this.config);
  }

  getStyle() {
    return _cloneDeep(this.styleConfig);
  }

  /**
   * 参数初始化
   */
  initConfig(baseUrl: string) {
    this.params.forEach((item) => {
      if (item.name === "modelAssetPath") {
        this.config.baseOptions = {
          [item.name]: baseUrl + item.default,
        };
      } else {
        this.config[item.name] = item.default;
      }
    });
  }

  initParams() {
    console.log("init params");
  }

  /**
   * 参数修改
   * @param config
   */
  async setOptions(config: any) {
    this.config = { ...this.config, ...config };
    await this._modelInstance.setOptions(this.config);
    this.initParams();
  }

  setStyle(config: any) {
    this.styleConfig = _cloneDeep(config);
    localStorage.setItem(getModelName(), JSON.stringify(this.styleConfig));
  }

  detect(image: HTMLImageElement) {
    return this._modelInstance.detect(image);
  }

  detectForVideo(video: HTMLVideoElement, timestamp: number) {
    return this._modelInstance.detectForVideo(video, timestamp);
  }

  /**
   * 子类实现各自模型的输出处理
   */
  abstract processResults(
    image: HTMLImageElement | undefined,
    canvas: HTMLCanvasElement,
    res: any,
    options: IParams
  ): void;

  abstract processVideoResults(
    video: HTMLVideoElement | undefined,
    canvas: HTMLCanvasElement,
    res: any,
    options: IParams
  ): void;
}

由于Mediapipe模型是通过url加载的，而npm包无法发包成可访问的静态资源，因此具体的模型，都由各个引用项目自行提供，只需要在init时传入模型路径即可。

子类以人脸识别为例，代码如下：

// model/face-land-marker/index.ts

import { MediaPipeModal } from "../base";
import { FaceLandmarker, DrawingUtils } from "@mediapipe/tasks-vision";
import { IParams } from "../type";

/**
 * @see https://developers.google.com/mediapipe/solutions/vision/face_landmarker
 */
export class FaceLandMarker extends MediaPipeModal {
  // 模型名
  static modelName = "FaceLandMarker";
  // 模型列表
  modelPath = [
    {
      path: "models/FaceLandMarker/face_landmarker.task",
      size: 3758596,
    },
  ];
  // 模型描述
  description = "人脸特征识别（face_landmarker）";
  // 模型参数
  params = [
    {
      name: "minFaceDetectionConfidence",
      type: "float",
      range: [0, 1],
      default: 0.5,
    },
    {
      name: "minFacePresenceConfidence",
      type: "float",
      range: [0, 1],
      default: 0.5,
    },
    {
      name: "minTrackingConfidence",
      type: "float",
      range: [0, 1],
      default: 0.5,
    },
    {
      name: "numFaces",
      type: "integer",
      range: [0, 5],
      default: 1,
    },
    {
      name: "outputFaceBlendshapes",
      type: "boolean",
      range: [true, false],
      default: false,
    },
    {
      name: "outputFacialTransformationMatrixes",
      type: "boolean",
      range: [true, false],
      default: false,
    },
    {
      name: "modelAssetPath",
      type: "enum",
      range: this.modelPath.map((item) => item.path),
      default: this.modelPath[0].path,
    },
    {
      name: "runningMode",
      type: "enum",
      range: ["IMAGE", "VIDEO"],
      default: "VIDEO",
    },
  ];
  // 识别结果样式
  styleConfig = {
    FACE_LANDMARKS_TESSELATION: { color: "#C0C0C070", lineWidth: 1 },
    FACE_LANDMARKS_RIGHT_EYE: { color: "#FF3030" },
    FACE_LANDMARKS_RIGHT_EYEBROW: { color: "#FF3030" },
    FACE_LANDMARKS_LEFT_EYE: { color: "#30FF30" },
    FACE_LANDMARKS_LEFT_EYEBROW: { color: "#30FF30" },
    FACE_LANDMARKS_FACE_OVAL: { color: "#E0E0E0" },
    FACE_LANDMARKS_LIPS: { color: "#E0E0E0" },
    FACE_LANDMARKS_RIGHT_IRIS: { color: "#FF3030" },
    FACE_LANDMARKS_LEFT_IRIS: { color: "#30FF30" },
  };

  constructor() {
    super();
    this.model = FaceLandmarker;
    const storage = localStorage.getItem(FaceLandMarker.modelName);
    this.styleConfig = storage ? JSON.parse(storage) : this.styleConfig;
  }

  processResults(
    image: HTMLImageElement | HTMLVideoElement | undefined,
    canvas: HTMLCanvasElement,
    res: any,
    options: IParams
  ) {
    const ctx = canvas.getContext("2d")!;
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    if (!!options?.renderImage) {
      ctx.drawImage(image!, 0, 0, canvas.width, canvas.height);
    }
    const drawingUtils = new DrawingUtils(ctx);
    for (const landmarks of res.faceLandmarks) {
      drawingUtils.drawConnectors(
        landmarks,
        FaceLandmarker.FACE_LANDMARKS_TESSELATION,
        this.styleConfig.FACE_LANDMARKS_TESSELATION
      );
      drawingUtils.drawConnectors(
        landmarks,
        FaceLandmarker.FACE_LANDMARKS_RIGHT_EYE,
        this.styleConfig.FACE_LANDMARKS_RIGHT_EYE
      );
      drawingUtils.drawConnectors(
        landmarks,
        FaceLandmarker.FACE_LANDMARKS_RIGHT_EYEBROW,
        this.styleConfig.FACE_LANDMARKS_RIGHT_EYEBROW
      );
      drawingUtils.drawConnectors(
        landmarks,
        FaceLandmarker.FACE_LANDMARKS_LEFT_EYE,
        this.styleConfig.FACE_LANDMARKS_LEFT_EYE
      );
      drawingUtils.drawConnectors(
        landmarks,
        FaceLandmarker.FACE_LANDMARKS_LEFT_EYEBROW,
        this.styleConfig.FACE_LANDMARKS_LEFT_EYEBROW
      );
      drawingUtils.drawConnectors(
        landmarks,
        FaceLandmarker.FACE_LANDMARKS_FACE_OVAL,
        this.styleConfig.FACE_LANDMARKS_FACE_OVAL
      );
      drawingUtils.drawConnectors(
        landmarks,
        FaceLandmarker.FACE_LANDMARKS_LIPS,
        this.styleConfig.FACE_LANDMARKS_LIPS
      );
      drawingUtils.drawConnectors(
        landmarks,
        FaceLandmarker.FACE_LANDMARKS_RIGHT_IRIS,
        this.styleConfig.FACE_LANDMARKS_RIGHT_IRIS
      );
      drawingUtils.drawConnectors(
        landmarks,
        FaceLandmarker.FACE_LANDMARKS_LEFT_IRIS,
        this.styleConfig.FACE_LANDMARKS_LEFT_IRIS
      );
    }
  }

  processVideoResults(
    video: HTMLVideoElement | undefined,
    canvas: HTMLCanvasElement,
    res: any,
    options: IParams
  ) {
    this.processResults(video, canvas, res, options);
  }
}

引用也十分简单，mediapipe-model-core导出了setModelName、getModelName和getModelIns三个方法，代码如下：

// model/index.ts

import { FaceLandMarker } from "./face-land-marker";
import { PoseLandMarker } from "./pose-land-marker";
import { HandLandMarker } from "./hand-land-marker";
import { BasketballGoalDetection } from "./basketball-goal-detection";
import { ObjectDetection } from "./object-detection";

export * from "./basketball-goal-detection";
export * from "./face-land-marker";
export * from "./hand-land-marker";
export * from "./object-detection";
export * from "./pose-land-marker";

/**
 * 支持的模型列表
 */
export const ModelList = {
  [BasketballGoalDetection.modelName]: BasketballGoalDetection,
  [FaceLandMarker.modelName]: FaceLandMarker,
  [PoseLandMarker.modelName]: PoseLandMarker,
  [HandLandMarker.modelName]: HandLandMarker,
  [ObjectDetection.modelName]: ObjectDetection,
};

const modelInstance: Record<
  string,
  | PoseLandMarker
  | FaceLandMarker
  | HandLandMarker
  | ObjectDetection
  | BasketballGoalDetection
> = {};

let modelName: string = PoseLandMarker.modelName;

let baseUrl: string = "/";

/**
 * 获取加载好的模型实例
 * @returns 模型实例
 */
export async function getModelIns() {
  if (!modelInstance[modelName]) {
    modelInstance[modelName] = new ModelList[modelName]();
    await modelInstance[modelName].init(baseUrl);
  }
  return modelInstance[modelName];
}

/**
 * 获取当前的模型名称
 * @returns 模型名称
 */
export function getModelName() {
  return modelName;
}

/**
 * 切换当前模型
 * @param name 模型名称
 */
export async function setModelName(name: string, url: string = "/") {
  baseUrl = url || "/";
  if (Object.keys(ModelList).includes(name)) {
    modelName = name;
    const model = await getModelIns();
    model.initParams();
  } else {
    console.error("未知模型名");
  }
}

以上都是mediapipe-model-core仓库的核心代码，那么其他项目要引用这个包，如何使用呢？
以人脸检测模型为例，具体用法如下：

import { FaceLandMarker, setModelName } from 'mediapipe-model-core';

async function init() {
	// 设置模型
	await setModelName(FaceLandMarker.modelName, '/');
	// 获取模型实例
	const model = await getModelIns();
	// 模型识别
	const res = model.detectForVideo(video, startTimeMs);
	// 模型结果渲染
    await model.processVideoResults(video, canvas, res);
}

其中，设置模型需要在比较早的生命周期就调用，例如vue的mounted，因为模型的加载时间较久。

后续的模型识别、和结果渲染，都是基于requestAnimationFrame循环调用的，本质上，就是调用model.detectForVideo传入视频在startTimeMs时刻的图片，模型识别，结果绘制在传入的canvas上。

值得一提的是，目前mediapipe-model-core中有部分模型内部采用了web worker和离屏canvas技术，渲染性能较高。此外，为了解决模型缓存问题，网站采用了service worker技术，以缓存模型。

其余技术细节我就不赘述，并不难。

总结

Mediapipe视频处理是Modelground的第一个孵化MVP产品。其最初是为了mediapipe-model-core库提供可视化效果，后期经过一定的设计，产出了这么一个不错的产品。其功能丰富，且特点鲜明：可导出处理后的视频，完全免费。

Mediapipe视频处理还具有很大的优化空间，例如，集成视频的编辑能力、音效等等。

如果你喜欢这篇文章，请给我一些收藏、点赞。你的支持是我创作的动力！
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Query传递的参数需不需要加注解？加什么？为什么有的时候要加有的时候不加？

Query传递的参数需不需要加注解？加什么？为什么有的时候要加有的时候不加？

Query传递过来的参数可以加&#xff0c;也可以不加注解。如果要加&#xff0c;是在传递的参数名和后端的变量名不一致的情况下&#xff0c;要加RequestParam如果传递过来的参数名和后端的变量名一致&#xff0c;则可以不加RequestParam。 传递过来的数据如果是通过 Query 方式…
阅读更多...
Java操作数据库 —— JDBC ① 基础篇

Java操作数据库 —— JDBC ① 基础篇

我走我的路&#xff0c;有人拦也走&#xff0c;没人陪也走 —— 24.6.7 JDBC JDBC就是使用Java语言操作关系型数据库的一套API 一、JDBC简介 JDBC 概念 JDBC 就是使用Java语言操作关系型数据库的一套API 全称:(Java DataBase Connectivity)意为Java 数据库连接 JDBC 本质: ①…
阅读更多...
7种常用数据分析方法，建议收藏学习(下）

7种常用数据分析方法，建议收藏学习(下）

在上一篇内容里&#xff0c;我们提到了常用的数据分析放法&#xff0c;比如&#xff1a;漏斗分析法、留存分析法、分组分析法、矩阵分析法。没有看到的上篇推送的小伙伴可以回过头去查看我们之前的推送。 今天&#xff0c;我们继续讲后面的内容&#xff1a;关联分析法、指标分…
阅读更多...
图钉AI导航

图钉AI导航

1、图钉AI导航 https://www.tudingai.com/
阅读更多...
MySQL复习题（期末考试）

MySQL复习题（期末考试）

MySQL复习题&#xff08;期末考试&#xff09; 1.MySQL支持的日期类型&#xff1f; DATE,DATETIME,TIMESTAMP,TIME,TEAR 2.为表添加列的语法&#xff1f; alter table 表名 add column 列名 数据类型; 3.修改表数据类型的语法是&#xff1f; alter table 表名 modify 列名 新…
阅读更多...
【机器学习】让计算机变得更加智能

【机器学习】让计算机变得更加智能

Hi~&#xff01;这里是奋斗的小羊&#xff0c;很荣幸您能阅读我的文章&#xff0c;诚请评论指点&#xff0c;欢迎欢迎 ~~ &#x1f4a5;&#x1f4a5;个人主页&#xff1a;奋斗的小羊 &#x1f4a5;&#x1f4a5;所属专栏&#xff1a;C语言 目录 机器学习&#xff1a;让计算机…
阅读更多...
springmvc 全局异常处理器配置的三种方式深入底层源码分析原理

springmvc 全局异常处理器配置的三种方式深入底层源码分析原理

文章目录 springmvc 全局异常处理器配置的三种方式&深入底层源码分析原理配置全局异常处理器的三种方式实现接口HandlerExceptionResolver并配置到WebMvcConfigurer注解式配置ExceptionHandlercontroller里方法上定义ExceptionHandler 深入源码分析进入DispatcherServlet执…
阅读更多...
Jmeter07：函数

Jmeter07：函数

1 Jmeter组件&#xff1a;函数 1.1 是什么&#xff1f; 是程序中的封装单元&#xff08;最小的&#xff09;&#xff0c;封装一些功能实现 1.2 为什么&#xff1f; 优点1&#xff1a;易读 易维护 优点2&#xff1a;实现功能复用 1.3 怎么用&#xff1f; 流程&#xff1a; 1&…
阅读更多...
HCIE认证，这些误区要避开

HCIE认证，这些误区要避开

追求HCIE认证是许多网络工程师提升职业水平的选择之一。 然而&#xff0c;在这条备考之路上&#xff0c;存在不少误解可能会误导你的学习方向或影响你的备考效率。 了解并避开这些常见误区&#xff0c;将帮助你更有效地准备HCIE认证考试。 01 误区一&#xff1a;过分依赖题库 …
阅读更多...
【Three.js】知识梳理二：Three.js引用和环境搭建

【Three.js】知识梳理二：Three.js引用和环境搭建

1.文件包下载和目录简介 1.1 文件包下载 a. 官方网站下载&#xff1a; 访问 Three.js 的官方网站&#xff08;threejs.org/&#xff09;并点击 "Download" 按钮&#xff0c;下载最新版本的文件包。 b. GitHub仓库下载&#xff1a; 访问 Three.js 的 GitHub 仓库&a…
阅读更多...
面向对象设计原则概述

面向对象设计原则概述

面向对象设计原则概述 面向对象设计原则概述 面向对象设计原则概述单一职责原则开闭原则里氏代换原则依赖倒转原则接口隔离原则合成复用原则迪米特法则 内容来自《设计模式与艺术》一文。后续会陆续分享书中值得深思观点。 面向对象设计的目标之一在于支持可维护性复用&#xf…
阅读更多...
Django UpdateView视图

Django UpdateView视图

UpdateView是Django中的一个通用视图&#xff0c;用于处理对象的更新操作。它允许用户更新一个已经存在的对象。UpdateView通常与一个模型表单一起使用&#xff0c;这样用户就可以看到当前对象的值&#xff0c;并可以修改它们。 1&#xff0c;添加视图 Test/app3/views.py fr…
阅读更多...
第十九节：暴力递归到动态规划

第十九节：暴力递归到动态规划

一 动画规划的概念 优化出现重复解的递归 一旦写出递归来&#xff0c;改动态规划就很快 尝试策略和状态转移方程是一码事 学会尝试是攻克动态规划最本质的能力 如果你发现你有重复调用的过程&#xff0c;动态规划在算过一次之后把答案记下来&#xff0c;下回在越到重复调用过程…
阅读更多...
2-1基于matlab的拉普拉斯金字塔图像融合算法

2-1基于matlab的拉普拉斯金字塔图像融合算法

基于matlab的拉普拉斯金字塔图像融合算法&#xff0c;可以使部分图像模糊的图片清楚&#xff0c;也可以使图像增强。程序已调通&#xff0c;可直接运行。 2-1 图像融合 拉普拉斯金字塔图像融合 - 小红书 (xiaohongshu.com)
阅读更多...
Camtasia Studio2024破解神器下载，轻松上手视频剪辑

Camtasia Studio2024破解神器下载，轻松上手视频剪辑

嘿&#xff01;今天我要和大家分享一个神奇的软件——Camtasia Studio2024最新版的破解安装包&#xff01;&#x1f3ac; 作为一个视频制作爱好者&#xff0c;我一直在寻找一款功能强大、易于操作的视频编辑软件。而Camtasia Studio2024就是我心目中的完美选择&#xff01;它不…
阅读更多...
数值计算精度问题(浮点型和双整型累加精度测试)

数值计算精度问题(浮点型和双整型累加精度测试)

这篇博客介绍双整型和浮点数累加精度问题，运动控制轨迹规划公式有大量对时间轴的周期累加过程,如果我们采用浮点数进行累加，势必会影响计算精度。速度的不同 进一步影响位置积分运算。轨迹规划相关问题请参考下面系列文章，这里不再赘述： 1、博途PLC 1200/1500PLC S型速度曲…
阅读更多...
工业机器视觉系统如何实现精准检测？

工业机器视觉系统如何实现精准检测？

机器视觉系统是指利用机器替代人眼做出各种测量和判断。一种比较复杂的系统。大多数系统监控对象都是运动物体&#xff0c;系统与运动物体的匹配和协调动作尤为重要&#xff0c;所以给系统各部分的动作时间和处理速度带来了严格的要求。在某些应用领域&#xff0c;例如机器人、…
阅读更多...
网工使用频率最高的6款软件，都有的绝对是资深打工人

网工使用频率最高的6款软件，都有的绝对是资深打工人

号主&#xff1a;老杨丨11年资深网络工程师&#xff0c;更多网工提升干货&#xff0c;请关注公众号&#xff1a;网络工程师俱乐部 晚上好&#xff0c;我的网工朋友。 有不少朋友问到&#xff0c;深耕网络工程师需要哪些软件&#xff1f; 其实网工行业需要的软件还挺多的&…
阅读更多...
外卖抢单神器

外卖抢单神器

在现代快节奏的生活中&#xff0c;外卖服务已成为许多人日常生活的一部分&#xff0c;给外卖行业带来前所未有的机遇和挑战。随着市场竞争的加剧&#xff0c;许多外卖员开始寻求方法以提升接单效率。但在此过程中&#xff0c;道德和合规性是业务持续性的关键。 正直的经营不仅…
阅读更多...
iOS ------ 对象的本质

iOS ------ 对象的本质

一&#xff0c;OC对象本质&#xff0c;用clang编译main.m OC对象结构都是通过基础的C/C结构体实现的&#xff0c;我们通过创建OC文件及对象&#xff0c;将OC对象转化为C文件来探寻OC对象的本质。 代码&#xff1a; interface HTPerson : NSObject property(nonatomic,strong)…
阅读更多...
最新文章

Copyright @ 2022~2023