https://github.com/larchliu/vitar
Vue live real-time avatar from your webcam in the browser.
https://github.com/larchliu/vitar
live-avatar live2d mediapipe real-time vue
Last synced: about 2 months ago
JSON representation
Vue live real-time avatar from your webcam in the browser.
- Host: GitHub
- URL: https://github.com/larchliu/vitar
- Owner: LarchLiu
- Created: 2022-03-07T04:28:38.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-03-28T16:17:49.000Z (over 2 years ago)
- Last Synced: 2025-08-07T18:26:17.709Z (2 months ago)
- Topics: live-avatar, live2d, mediapipe, real-time, vue
- Language: Vue
- Homepage: https://vitar.vercel.app
- Size: 378 KB
- Stars: 60
- Watchers: 4
- Forks: 9
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Vitar
Vue live real-time avatar from your webcam in the browser.
[](https://www.npmjs.com/package/@cloudgeek/vitar)
[](https://www.npmjs.com/package/@cloudgeek/vitar)
[](https://gyazo.com/27e34834ad835dcd2e6fcdf9c775539a)
## Get Started
#### Npm
``` bash
$ npm install @cloudgeek/vitar --save
```
#### Yarn
``` bash
$ yarn add @cloudgeek/vitar
```
#### pnpm
``` bash
$ pnpm i @cloudgeek/vitar
```
## Usage
### Basic
#### Install Globally
```js
// main.js
import Vitar from '@cloudgeek/vitar'
const app = createApp(App)
app.use(Vitar).mount('#app')
```
```js
// your component
```
#### Import Directly
```js
// your component
import { Vitar } from '@cloudgeek/vitar'
```
### 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](https://vitejs.dev) - An extremely fast frontend tooling
- [Vue 3](https://vuejs.org/) - The Progressive
JavaScript Framework
- [Live2D](https://www.live2d.com/) - The technique of generating 2D animations.
- [PixiJS](https://github.com/pixijs/pixijs) - The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.
- [MediaPipe](https://mediapipe.dev/) - Cross-platform, customizable ML solutions for live and streaming media.
- [Kalidokit](https://github.com/yeemachine/kalidokit) - Blendshape and kinematics calculator for Mediapipe/Tensorflow.js Face, Eyes, Pose, and Finger tracking models.
- [pixi-live2d-display](https://github.com/guansss/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](https://www.live2d.com/eula/live2d-free-material-license-agreement_en.html).