Use ImageSegmenter instance as reactive leads to exception

[amiznikov]

Have I written custom code (as opposed to using a stock example script provided in MediaPipe)

None

OS Platform and Distribution

MacOS Sonoma 14.5

Mobile device if the issue happens on mobile device

No response

Browser and version if the issue happens on browser

No response

Programming Language and version

Javascript, Vue.js

MediaPipe version

0.10.14

Bazel version

No response

Solution

ImageSegmenter

Android Studio, NDK, SDK versions (if issue is related to building in Android environment)

No response

Xcode & Tulsi version (if issue is related to building for iOS)

No response

Describe the actual behavior

Got a mistake "Task is not initialized with video mode. 'runningMode' must be set to 'VIDEO'."

Describe the expected behaviour

Don't get it)

Standalone code/steps you may have used to try to get what you need

I have component based on Vue.js where I try to launch ImageSegmenter

<script>
import { ImageSegmenter, FilesetResolver } from "@mediapipe/tasks-vision";
export default {
  name: 'MediaPipe',
  mounted() {
    this.startStream();
  },
  data() {
    return {
          imageSegmenter: null,
        };
  },
  methods: {
    async startStream() {
      try {
        const audio = await FilesetResolver.forVisionTasks("https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.2/wasm");
        this.imageSegmenter = await ImageSegmenter.createFromOptions(audio, {
          baseOptions: {
            modelAssetPath: "https://storage.googleapis.com/mediapipe-models/image_segmenter/selfie_segmenter/float16/latest/selfie_segmenter.tflite",
            delegate: "GPU"
          },
          runningMode: "VIDEO",
          outputCategoryMask: true,
          outputConfidenceMasks: false
        });
        const stream = await navigator.mediaDevices.getUserMedia({ video: {
          width: 940,
          height: 560,
            frameRate: {
            ideal: 30,
              max: 30
            }
          } });
        this.$refs.video.srcObject = stream;
        this.$refs.video.addEventListener("loadeddata", () => {
          let startTimeMs = performance.now();
          // Start segmenting the stream.
          this.imageSegmenter.segmentForVideo(this.$refs.video, startTimeMs, async(result) => {
            console.log(result);
          });
        })

      } catch (error) {
        console.error('Ошибка при получении доступа к веб-камере:', error);
      }
    }
  }
};
</script>

<template>
  <video ref="video" muted autoplay playsinline></video>


</template>

and I got exception
"Task is not initialized with video mode. 'runningMode' must be set to 'VIDEO'"
But If change my code
this.imageSegmenter = markRaw(await ImageSegmenter.createFromOptions(....);)
everything works fine
I guess this.imageSegmenter is not a plain ImageSegmenter it's wrapped Proxy, 'cause every data object is reactive in Vue.js

Other info / Complete Logs

No response