如何正确地向 Chrome 提供模拟网络摄像头视频？

Question

我正尝试运行 end-to-end 在 Chrome 中测试需要网络摄像头馈送才能运行的产品。据我了解，这意味着使用 --use-file-for-fake-video-capture="/path/to/video.y4m" 命令行参数向 Chrome 提供伪造的网络摄像头视频。然后它会将其用作网络摄像头视频。

但是，无论我提供什么 y4m 文件，在这些条件下，我从 Chrome 运行ning 得到以下错误：

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

值得注意的是 我可以使用 --use-file-for-fake-audio-capture 提供一个很好的音频文件 并且 Chrome 可以很好地处理它。视频一直是我的症结所在。

此错误来自以下简单的 mediaDevices 请求：

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

（当提供视频文件时，这总是会出现“哦不！”分支。）

到目前为止我尝试了什么

我已经运行宁 Chrome 使用以下命令行参数（添加换行符以提高可读性），并且我使用 Mac 因此 open 命令：

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 和 microphone.wav 是从我录制的视频文件中生成的。

我首先使用浏览器的 MediaRecorder 录制了一个 twenty-second mp4 视频，下载了结果，并使用以下命令行命令对其进行了转换：

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

当这不起作用时，我使用我在 Quicktime 中录制的 twenty-second 电影文件进行了相同的尝试：

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

当也失败时，我直接转到 the Chromium file that explains fake video capture, went to the example y4m file list 它提供的，并下载了祖母文件并将其作为命令行参数提供给 Chrome 而是：

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 为我提供了 exact 这些情况中 all 相同的错误。

唯一一次 Chrome mediaDevices 请求没有出错是在我完全省略视频的时候：

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

占 C420mpeg2

TestRTC 建议 Chrome 如果我给它一个 C420mpeg2 文件会“崩溃”，并建议只需替换元数据即可解决问题。事实上，我从 ffmpeg 生成的视频文件给了我以下 header:

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

Chrome 当运行使用此文件时实际上并没有崩溃，我只是得到上面的错误。如果我根据 TestRTC 的建议将视频文件编辑为以下 header，我会遇到相同的情况：

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

视频文件在这些情况下仍然给我上述错误。

我做什么can/should？

我应该如何为这个命令行参数向 Chrome 提供视频文件？

我应该如何录制或创建视频文件？

如何将其转换为 y4m？

Answer 1

阅读您提供的 link 后，我注意到我们还可以提供 mjpeg。

取决于您的测试要求 - 这对您来说可能就足够了。作为安装了 ffmpeg 的终端命令：

ffmpeg -i oldfile.mp4 newfile.mjpeg

然后我在终端使用运行 Google Chrome 进行了测试：

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

导航到 Tracking JS 后，我可以看到正在播放的视频。

希望对你有用！

Answer 2

如果有人需要动态模拟视频，这就是我使用的方法（从 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);
    });

关键是returnPromise.resolve(stream)
oncanplay比onplay好，因为触发了after the video is playable

这些标志仍然是必要的：

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

最后，有了这个脚本，每个页面都可以使用不同的相机模拟 - 在使用无浏览器时尤其有用！

Answer 3

我在这里提供了一个详细的答案，可能对某些人有帮助：

假冒网络摄像头（Chrome 和 Firefox）

Answer 4

Mocked/Fake 原始视频 (2021)

如果您想要原始帧而不需要 Chrome 运行解码器，请使用 y4m：

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

然后，开始Chrome:

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

注意：不再有任何理由必须修改您的 y4m 文件的 header。 Chrome 已修复。

此方法使用较少 CPU，但会占用大量硬盘驱动器 space 用于原始视频。保持视频文件简短。 Chrome 将循环它。

Answer 5

如何在 Chrome 上为 Windows

模拟网络摄像头

（使用 Windows 10 Home Build 19043.1526 和 Chrome Version 98.0.4758.102 (Official Build) (64-bit) 测试）

安装 ffmpeg，然后运行在 shell 中使用以下命令将 mp4 转换为 mpjeg：

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

或者，您还可以从 png 图像创建 y4m 视频（感谢@LGenzelis）：

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

关闭所有 Chrome 个实例，然后运行在您的 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"

然后在https://webcamtests.com/

这样的网站上测试一下

疑难解答

Chrome 仍然显示来自真实相机的流

确保没有其他 Chrome 个实例运行ning 在使用这些参数启动它之前。

找不到相机

确保您在 --use-file-for-fake-video-capture 中提供视频的绝对路径（例如："C:/absolute/path/to/output.mjpeg" 而不仅仅是 output.mjpeg）

如何正确地向 Chrome 提供模拟网络摄像头视频？

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

video

webcam

google-chrome

ffmpeg

mocking