gruhn / vue-qrcode-reader

A set of Vue.js components for detecting and decoding QR codes.
https://gruhn.github.io/vue-qrcode-reader
MIT License
2.03k stars 330 forks source link

Detect and tracking don't work anymore if choose a camera with constraints #416

Closed viac92 closed 1 month ago

viac92 commented 4 months ago

Hi everyone,

When I use the qrcodestream component like this everything works well.

<qrcode-stream
      :formats="selectedBarcodeTypes"
      :track="selected.value"
      @detect="onDetect"
      @error="logErrors"
/>

but when I select a specific camera with the constraints I can switch camera but all the logic doesn't work anymore

 <p>
  <select v-model="selectedDevice">
    <option
      v-for="device in devices"
      :key="device.label"
      :value="device"
    >
      {{ device.label }}
    </option>
  </select>
</p>

<qrcode-stream
      :constraints="{ deviceId: selectedDevice.deviceId }"
      :formats="selectedBarcodeTypes"
      :track="selected.value"
      @detect="onDetect"
      @error="logErrors"
      v-if="selectedDevice !== null"
  />
<p v-else>
    No camera available
</p>

in script setup I get the devices like this:

const selectedDevice = ref(null)
const devices = ref([])

onMounted(async () => {
  await navigator.mediaDevices.getUserMedia({video: true});
  devices.value = (await navigator.mediaDevices.enumerateDevices()).filter(
    ({ kind }) => kind === 'videoinput'
  )

  if (devices.value.length > 0) {
    selectedDevice.value = devices.value[0]
  }
})

I add await navigator.mediaDevices.getUserMedia({video: true}); bc without it I don't get the devices on safari.

gruhn commented 4 months ago

Thanks, I'm not sure if I reproduced your problem exactly but I found a bug and merged a fix. Please install v5.5.2 and check if you can still reproduce your problem.

As for the Safari issue you mention:

I add await navigator.mediaDevices.getUserMedia({video: true}); bc without it I don't get the devices on safari.

I'm not sure what's going on there.

marcelloromanelli commented 4 months ago

@viac92 I have the same issue. I've downgraded to 5.3.0 and it seems to be working ok there. In my case if I specify the constraints onDetect is not being called

gruhn commented 4 months ago

@marcelloromanelli I can't reproduce this issue. Can you provide a minimal reproduction? Ideally somewhere online.

azerioxal commented 4 months ago

I'm having a similar issue. Only shows up when using contraints and paused. I'll setup a reproduction when I get a moment.

azerioxal commented 4 months ago

Well, I was trying to reproduce this in a sandbox and couldn't. For whatever reason it suddenly started working in the project I was having issues with too....

gruhn commented 4 months ago

Yeah, there is a lot of async stuff going. I suspect there are some race conditions.

ninjabyron commented 3 months ago

Yeah, there is a lot of async stuff going. I suspect there are some race conditions.

please fix it

gruhn commented 3 months ago

please fix it

Please provide a way for me to reproduce it

github-actions[bot] commented 1 month ago

This issue has been marked as stale. If there is no further activity it will be closed.