@cloudgeek/vitar

Vitar

Vue live real-time avatar from your webcam in the browser.

Get Started

Npm

$ npm install @cloudgeek/vitar --save

Yarn

$ yarn add @cloudgeek/vitar

pnpm

$ pnpm i @cloudgeek/vitar

Usage

Basic

Install Globally

// main.js
import Vitar from '@cloudgeek/vitar'

const app = createApp(App)

app.use(Vitar).mount('#app')

// your component
<template>
  <vitar />
<template>

Import Directly

// your component
<script setup>
import { Vitar } from '@cloudgeek/vitar'
</script>

<template>
  <vitar show-mesh />
</template>

Props

Name	Type	Default	Description
model	boolean | string	true	true: use default model of hiyori, false: don't show model, string: url of model.
mediaPipe	boolean	true	whether to use mediapipe for real-time avatar.
showCam	boolean	false	whether to show camera view.
showMesh	boolean	false	whether to show mesh view.
zIndex	number	9999	z-index of avatar.
display	object	{scale: 2, offsetX:0, offsetY: 0}	model display info of position and scale.

Dev Base

• Vite - An extremely fast frontend tooling
• Vue 3 - The Progressive JavaScript Framework
• Live2D - The technique of generating 2D animations.
• PixiJS - The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.
• MediaPipe - Cross-platform, customizable ML solutions for live and streaming media.
• Kalidokit - Blendshape and kinematics calculator for Mediapipe/Tensorflow.js Face, Eyes, Pose, and Finger tracking models.
• pixi-live2d-display - A PixiJS plugin to display Live2D models of any kind.

The example Live2D model hiyori (Cubism 4) is redistributed under Live2D's Free Material License.