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 webcam video to Chrome using the --use-file-for-fake-video-capture="/path/to/video.y4m" command line argument. It will then use that as a webcam video.

However, no matter what y4m file I provide, I get the following error from Chrome running under these conditions:

DOMException: Could not start video source
{
  code: 0,
  message: "Could not start video source",
  name: "NotReadableError"
}

Notably I can provide an audio file just fine using --use-file-for-fake-audio-capture and Chrome will work with it well. The video has been my sticking point.

This error comes out of the following straightforward mediaDevices request:

navigator.mediaDevices.getUserMedia({ video: true, audio: true })
  .then(data => {
    // do stuff
  })
  .catch(err => {
    // oh no!
  });

(This always hits the “oh no!” branch when a video file is provided.)

What I've tried so far

I've been running Chrome with the following command line arguments (newlines added for readability), and I'm using a Mac hence the open command:

open -a "Google Chrome" --args
  --disable-gpu
  --use-fake-device-for-media-stream
  --use-file-for-fake-video-capture="~/Documents/mock/webcam.y4m"
  --use-file-for-fake-audio-capture="~/Documents/mock/microphone.wav"

webcam.y4m and microphone.wav were generated from a video file I recorded.

I first recorded a twenty-second mp4 video using my browser's MediaRecorder, downloaded the result, and converted it using the following command line commands:

ffmpeg -y -i original.mp4 -f wav -vn microphone.wav
ffmpeg -y -i original.mp4 webcam.y4m

When this didn't work, I tried the same using a twenty-second movie file I recorded in Quicktime:

ffmpeg -y -i original.mov -f wav -vn microphone.wav
ffmpeg -y -i original.mov webcam.y4m

When that also failed, I went straight to the Chromium file that explains fake video capture, went to the example y4m file list it provided, and downloaded the grandma file and provided that as a command line argument to Chrome instead:

open -a "Google Chrome" --args
  --disable-gpu
  --use-fake-device-for-media-stream
  --use-file-for-fake-video-capture="~/Documents/mock/grandma_qcif.y4m"
  --use-file-for-fake-audio-capture="~/Documents/mock/microphone.wav"

Chrome provides me with the exact same error in all of these situations.

The only time Chrome doesn't error out with that mediaDevices request is when I omit the video completely:

open -a "Google Chrome" --args
  --disable-gpu
  --use-fake-device-for-media-stream
  --use-file-for-fake-audio-capture="~/Documents/mock/microphone.wav"

Accounting for C420mpeg2

TestRTC suggests Chrome will “crash” if I give it a C420mpeg2 file, and recommends that simply replacing the metadata fixes the issue. Indeed the video file I generate from ffmpeg gives me the following header:

YUV4MPEG2 W1280 H720 F30:1 Ip A1:1 C420mpeg2 XYSCSS=420MPEG2

Chrome doesn't actually crash when run with this file, I just get the error above. If I edit the video file to the following header though per TestRTC's recommendations I get the same situation:

YUV4MPEG2 W1280 H720 F30:1 Ip A1:1 C420 XYSCSS=420MPEG2

The video file still gives me the above error in these conditions.

What can/should I do?

How should I be providing a video file to Chrome for this command line argument?

How should I be recording or creating the video file?

How should I convert it to y4m?

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. As a terminal command with ffmpeg installed:

ffmpeg -i oldfile.mp4 newfile.mjpeg

then I tested by running Google Chrome from the terminal 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

Mocked/Fake Raw Video (2021)

Use y4m if you want raw frames without Chrome having to run a decoder:

ffmpeg -i original.avi -pix_fmt yuv420p video-for-chrome.y4m

Then, start Chrome:

chrome.exe --use-fake-device-for-media-stream --use-file-for-fake-video-capture=video-for-chrome.y4m

Note: There is no longer any reason to have to modify your y4m file's header. Chrome has since been fixed.

This method uses less CPU, but will take up a good deal of hard drive space for the raw video. Keep your video file short. Chrome will loop it.

Answer 4

How to mock webcam on Chrome for Windows

(Tested with Windows 10 Home Build 19043.1526 and Chrome Version 98.0.4758.102 (Official Build) (64-bit))

Install ffmpeg, then run the following command in your shell to convert your mp4 to mpjeg:

./ffmpeg.exe -i originalVideo.mp4 output.mjpeg

Alternatively, you could also create a y4m video from a png image (thanks @LGenzelis):

./ffmpeg.exe -loop 1 -i myStaticImage.png -pix_fmt yuv420p -t 0.05 output.y4m

Close all Chrome instances, then run the following command in your shell:

"C:\Program Files\Google\Chrome\Application\chrome.exe" --use-fake-device-for-media-stream --use-file-for-fake-video-capture="C:/absolute/path/to/output.mjpeg"

Then test it on a website like https://webcamtests.com/

Troubleshooting

Chrome still showing stream from real camera

Make sure there are no other Chrome instances running before launching it with those arguments.

Camera not found

Make sure you're providing the absolute path to your video in --use-file-for-fake-video-capture (e.g.: "C:/absolute/path/to/output.mjpeg" instead of just output.mjpeg)