Migrate or Avoid $refs in favor of v-model

I have this template:

<video id="camera-stream"
         ref="video"
         :width="width"
         :height="height"
         :src="source"
         :autoplay="autoplay"
         :playsinline="playsinline" />

and some functions using $refs like this:

loadSrcStream(stream: MediaStream) {
        if ("srcObject" in this.$refs.video) {
          // new browsers api
          this.$refs.video.srcObject = stream;
        } else {
          // old browsers
          let MediaElement = ( window.HTMLMediaElement as any)
          this.source = MediaElement.srcObject(stream);
        }
        // Emit video start/live event
        this.$refs.video.onloadedmetadata = () => {
          this.$emit("video-live", stream);
        };

        this.$emit("started", stream);
      },

will it be possible to migrate to a v-model and how?

If you want to use the srcObject property then it’s probably best to stick with $refs. You might be able to get it working in a template using :srcObject.prop (the .prop modifier is only required in Vue 2) but I suspect that’ll prove fiddly.

I’d have thought the onloadedmetadata could be switched to @loadedmetadata in the template instead. It depends whether stream would be available where you need it.

I’m not sure how you were envisioning using v-model here. I don’t believe there’s any support for using v-model with a native <video> element.

Ok. Thanks. I was unsure about the v-model because I’m a bloody beginner :slight_smile: