Unable to switch the camera once selected with the problem camera

[itshsinyu]

Describe the bug: There are three cameras available. The second one is already in use, but the first and third ones are fine. When I switch to the second camera, which has a problem, and then switch back to the first or third camera, an error is displayed. Uncaught (in promise) DOMException: Could not start video source

Screenshots: select the first camera switch the second camera([NotReadableError]) switch back to the first camera, got an error

Desktop (please complete the following information): OS: Windows Browser: Chrome(124.0.6367.207)

[gruhn]

Can you reproduce this issue on this more bare bones demo?

https://gruhn.github.io/vue-qrcode-reader/select-camera-demo.html

[itshsinyu]

It can switch back the camera successfully on select-camera-demo.html. I am wondering what the different settings are between this demo.html and full-demo.html?

[gruhn]

Maybe there is some race condition. It could be that you select a new camera but for some reason the old camera is not stopped, thus a camera is "still in use" and you are not allowed to request a different camera.

I just added some more console logging to the "full demo". It should look somewhat like this:

[vue-qrcode-reader] starting camera with constraints:  {"facingMode":"environment"}
[vue-qrcode-reader] calling getUserMedia
[vue-qrcode-reader] waiting for video element to load
[vue-qrcode-reader] video element loaded
[vue-qrcode-reader] camera ready
[vue-qrcode-reader] start scanning
[vue-qrcode-reader] stopping camera
[vue-qrcode-reader] stop scanning: video element readyState is 0
[vue-qrcode-reader] starting camera with constraints:  {"deviceId":"03d3debb17710ee26e8ace22e346314dda144614ee43525d2d58bee3b6f9b45b"}
[vue-qrcode-reader] calling getUserMedia
[vue-qrcode-reader] waiting for video element to load
[vue-qrcode-reader] video element loaded
[vue-qrcode-reader] camera ready
[vue-qrcode-reader] start scanning

In particular every starting camera ... line should always be followed by a stopping camera line before a new starting camera line is printed.

[itshsinyu]

When I select a new camera on the "full-demo" page after choosing a problematic camera, the console does not show the message "[vue-qrcode-reader] stopping camera". The old camera is not stopped as you mentioned.

However, I'm curious why it works well on the "select-camera-demo" page. It seems the old camera is stopped and the new camera starts on this page. Does the qrcodestream component use different settings?

<template>
<select v-model="selectedDevice">
    <option
      v-for="device in devices"
      :key="device.label"
      :value="device"
    >
      {{ device.label }}
    </option>
  </select>
<qrcode-stream
      :constraints="{ deviceId: selectedDevice.deviceId }"
      :track="paintCenterText"
      @detect="onDetect"
      @error="onError"
  />
</template>

<script lang="ts" setup>
const selectedDevice = ref(null as MediaDeviceInfo | null);
const devices = ref([] as MediaDeviceInfo[]);

onMounted(async () => {
    devices.value = (await navigator.mediaDevices.enumerateDevices()).filter(
    ({ kind }) => kind === 'videoinput'
    );
    if (devices.value.length > 0) {
        selectedDevice.value = devices.value[0]
    }
});
</script>

[gruhn]

Thanks for the detailed description and screenshots. I may have found the issue. Could you check if this preview deployment fixes your issue?

https://gruhn.github.io/vue-qrcode-reader/pr-preview/pr-435/demos/FullDemo.html

[itshsinyu]

This preview deployment resolves the issue. Thank you very much!

[github-actions[bot]]

:tada: This issue has been resolved in version 5.5.6 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: