Cannot get the camera reference

[NathanAP]

Hello!

I'm trying to use this component to capture images, but when I try to do this:

<script setup>
import { ref } from "vue";

const camera = ref(null);

async function capture() {
  console.log("Click");
}
</script>

<template>
  <camera autoplay ref="camera" />
  <v-btn @click="capture">Snapshot!</v-btn>
</template>

I keep getting this warning:

Am I doing something wrong?

[BastiaanJansen]

Hello,

Since you are using the setup tag, refs can only be used in onMounted like so:

<script setup> import { ref } from "vue"; const camera = ref(null); onMounted(() => { // use ref }) async function capture() { console.log("Click"); } </script>

Edit: apparently code blocks do not work on mobile...

[NathanAP]

I tried

<script setup>
import { onMounted, ref } from "vue";

let camera

async function capture() {
  console.log("Click");
}

onMounted(() => {
   camera = ref()
})
</script>

<template>
  <camera autoplay ref="camera" />
  <v-btn @click="capture">Snapshot!</v-btn>
</template>

but I'm still getting the warning. Actually it seems that everytime I use ref="myVariable" it throws that warning and the camera won't show, even if my const camera = ref(null) is not present.

Edit: I'm not expert or anything, but maybe a v-model could be a good way to make this work?

[hector-romero]

I've found myself with this same issue and it apparently lies in having the same name as the component for the reference, so simply changing the ref name worked for me:

<script setup>
import { ref } from "vue";

const cameraObject = ref(null);

async function capture() {
   cameraObject.value.snapshot...
  console.log("Click");
}
</script>

<template>
  <camera autoplay ref="cameraObject" />
  <v-btn @click="capture">Snapshot!</v-btn>
</template>