How can I correctly provide a mock webcam video to Chrome?

Question

I\'m trying to run end-to-end testing in Chrome for a product that requires a webcam feed halfway through to operate. From what I understand this means providing a fake webc

Answer 1

After reading the link you provided I noticed that we can also provide an mjpeg.

Depending on what your test requirements - this may be sufficient for you.

ffmpeg -i oldfile.mp4 newfile.mjpeg

then I tested using:

google-chrome --use-fake-device-for-media-stream --use-file-for-fake-video-capture=newfile.mjpeg

After navigating to Tracking JS I could see the video being played back.

I hope that works for you!

Answer 2

If someone ever needs to mock a video dynamically, this is what I've used (forked from here)

await page.evaluate(() => {
        const video = document.createElement("video");

        video.setAttribute('id', 'video-mock');
        video.setAttribute("src", 'https://woolyss.com/f/spring-vp9-vorbis.webm');
        video.setAttribute("crossorigin", "anonymous");
        video.setAttribute("controls", "");

        video.oncanplay = () => {
            const stream = video.captureStream();

            navigator.mediaDevices.getUserMedia = () => Promise.resolve(stream);
        };

        document.querySelector("body").appendChild(video);
    });

• the key is to return Promise.resolve(stream)
• oncanplay is better than onplay because it is triggered after the video is playable

This flags are still necessary:

'--use-fake-ui-for-media-stream',
'--use-fake-device-for-media-stream',

In the end, with this script different camera mocks are possible for every page - especially useful when using browserless!

Answer 3

I provided a detailed answer here which might be helpful for some:

Fake Webcam (Chrome & Firefox)

https://stackoverflow.com/a/63312430/2419584