Question about mocking the camera feed with overriding getUserMedia

[BeeMargarida]

Hi! I'm trying to write e2e tests with Playwright and test the functionality of testing different QRCodes in the same test. I'm facing some issues specific to the functionality of this library and would like to ask if someone could help me.

I was trying to override the getUserMedia to return a stream of the QRCode I want to show, but even though the video feed shows the correct image, the library doesn't seem to scan the QRCode.
Is there something specific that I should be doing or any quirk of the library that doesn't allow for this?

The code that mocks the getUserMedia:

const content = await readFile(`${__dirname}/../../fixtures/${image}.png`, { encoding: 'base64' });
await this.page.evaluate(async ({ content }) => {
    const canvas = document.createElement('canvas')
    canvas.id = 'mock-camera'
    canvas.height = 750
    canvas.width = 700
    canvas.hidden = true

    const context = canvas.getContext('2d')
    const image = new Image()

    const promise = new Promise((resolve) => {
        image.onload = () => {
            if (!context) return

            context.drawImage(image, 0, 0)

            const stream = canvas.captureStream()
            navigator.mediaDevices.getUserMedia = () => Promise.resolve(stream)
            resolve(true)
        }
    })
    image.src = `data:image/png;base64,${content}`
    document?.querySelector("body")?.appendChild(canvas)

    await promise
}, { content });

I run this code before opening a modal that contains the QRScanner (and it's initialization).

[arnard76]

I am having issues with this QR code scanner when testing with cypress. I pass in a fake webcam video to chrome. This is so I can simulate webcam during cypress tests (read more here: https://docs.cypress.io/api/plugins/browser-launch-api).

We are using this library in our web app and I see the fake camera feed for about 1s and then it goes black. If a open a new tab and then return to the original tab, I see the fake video playing.

This doesn't seem to be a cypress issue because the fake webcam video is working fine on other websites that don't use this library.

It also doesn't seem to be an http/https issue despite seeing this warning locally:
qr-scanner.ts The camera stream is only accessible if the page is transferred via https.