refactor: change props of realTime to mediaPipe

Author: LarchLiu

README.md

@@ -62,7 +62,7 @@ import '@cloudgeek/vitar/dist/index.css'
 | Name           | Type             | Default          | Description |
 | -------------- | :--------------: | :--------------: | -------------- |
 | model          | boolean \| string| true             | true: use default model of hiyori, false: don't show model, string: url of model.|
-| realTime       | boolean          | true             | whether to use mediapipe for real-time avatar.|
+| 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.|

lib/Live2D.vue

@@ -20,7 +20,7 @@ Renderer.registerPlugin('interaction', InteractionManager)
 const props = defineProps({
   model: [Boolean, String],
   cdn: Boolean,
-  realTime: Boolean,
+  mediaPipe: Boolean,
   showMesh: Boolean,
   showCam: Boolean,
   zIndex: Number,
@@ -234,7 +234,7 @@ const onResults = (results: f.Results) => {
 }
 
 async function initMediapipe() {
-  if (!props.realTime)
+  if (!props.mediaPipe)
     return
   if (props.cdn) {
     mpFaceMesh = window as any
@@ -292,12 +292,12 @@ function fixPosition() {
 }
 
 watch(() => props.showCam, () => {
-  if (props.realTime)
+  if (props.mediaPipe)
     camView.value!.style.visibility = props.showCam ? 'visible' : 'hidden'
 })
 
 watch(() => props.showMesh, () => {
-  if (props.realTime) {
+  if (props.mediaPipe) {
     const canvasCtx = guideCanvas.value!.getContext('2d')
     canvasCtx!.clearRect(0, 0, guideCanvas.value!.width, guideCanvas.value!.height)
     guideCanvas.value!.style.visibility = props.showMesh ? 'inline' : 'none'
@@ -335,7 +335,7 @@ onMounted(async() => {
       :class="[handlerDown ? '!opacity-100' : '', loaded ? 'bg-green-500' : 'bg-red-500']"
     />
     <div
-      v-if="realTime"
+      v-if="mediaPipe"
       class="absolute bottom-0"
       style="transform: rotateY(180deg);"
       :style="[frameStyle, {right: `${size}px`}]"

lib/Vitar.vue

@@ -18,7 +18,7 @@ const props = defineProps({
     type: [Boolean, String],
     default: true,
   },
-  realTime: {
+  mediaPipe: {
     type: Boolean,
     default: true,
   },
@@ -40,15 +40,15 @@ const isDev = import.meta.env.MODE === 'development'
 const vm = getCurrentInstance()!
 
 async function create() {
-  if (props.realTime || props.model)
+  if (props.mediaPipe || props.model)
     import('./Live2D.vue').then(v => Live2DLayer.value = v.default)
 }
 
-if (props.realTime && (window as any).FaceMesh && (window as any).Camera && (window as any).drawConnectors && (window as any).Live2D && (window as any).Live2DCubismCore) {
+if (props.mediaPipe && (window as any).FaceMesh && (window as any).Camera && (window as any).drawConnectors && (window as any).Live2D && (window as any).Live2DCubismCore) {
   onMounted(create)
 }
 else {
-  if (props.realTime && !isDev && (!(window as any).FaceMesh || !(window as any).Camera || !(window as any).drawConnectors)) {
+  if (props.mediaPipe && !isDev && (!(window as any).FaceMesh || !(window as any).Camera || !(window as any).drawConnectors)) {
     useScriptTag(
       'https://cdn.jsdelivr.net/npm/@mediapipe/face_mesh/face_mesh.js',
       () => {
@@ -111,6 +111,6 @@ watch([isLive2dLoad, isCubismLoad, isFaceMeshLoad, isCameraUtilsLoad, isDrawiing
 
 <template>
   <template v-if="Live2DLayer">
-    <Live2DLayer :model="model" :real-time="realTime" :show-cam="showCam" :show-mesh="showMesh" :cdn="!isDev" :z-index="zIndex" />
+    <Live2DLayer :model="model" :media-pipe="mediaPipe" :show-cam="showCam" :show-mesh="showMesh" :cdn="!isDev" :z-index="zIndex" />
   </template>
 </template>

src/App.vue

@@ -2,13 +2,13 @@
 import { Vitar } from '../lib/index'
 const showCam = ref(false)
 const showMesh = ref(true)
-const realTime = ref(true)
+const mediaPipe = ref(true)
 const model = ref(true)
 const zIndex = ref(100)
 </script>
 <template>
   <main font-sans p="x-4 y-10" text="center gray-700 dark:gray-200">
-    <vitar :show-mesh="showMesh" :z-index="zIndex" :show-cam="showCam" :model="model" :real-time="realTime" />
+    <vitar :show-mesh="showMesh" :z-index="zIndex" :show-cam="showCam" :model="model" :media-pipe="mediaPipe" />
     <button @click="showCam = !showCam">
       show camera
     </button>