Package Exports

@cloudgeek/vitar
@cloudgeek/vitar/dist/vitar.cjs.js
@cloudgeek/vitar/dist/vitar.es.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@cloudgeek/vitar) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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.