Skip to content
/ vitar Public

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

Notifications You must be signed in to change notification settings

LarchLiu/vitar

Repository files navigation

Vitar

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

npm version npm downloads Image from Gyazo

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.