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.