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

Posted 2023-05-07

【中文标题】如何正确向 Chrome 提供模拟网络摄像头视频？

【英文标题】：How can I correctly provide a mock webcam video to Chrome?

【发布时间】：2019-02-05 07:17:09

【问题描述】：

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

但是，无论我提供什么 y4m 文件，在这些条件下运行的 Chrome 都会出现以下错误：

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 录制了一个 20 秒的 mp4 视频，下载了结果，并使用以下命令行命令对其进行了转换：

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

当这不起作用时，我尝试使用我在 Quicktime 中录制的 20 秒电影文件进行同样的操作：

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，转到它提供的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 在所有这些情况下的所有相同的错误。

只有当我完全省略了视频时，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 建议如果我给它一个C420mpeg2 文件，Chrome 会“崩溃”，并建议只需替换元数据即可解决问题。事实上，我从 ffmpeg 生成的视频文件给了我以下标题：

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

Chrome 在使用这个文件运行时实际上并没有崩溃，我只是得到了上面的错误。如果我按照 TestRTC 的建议将视频文件编辑为以下标题，我会遇到相同的情况：

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

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

我可以/应该做什么？

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

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

我应该如何将其转换为 y4m？

【参考方案1】：

阅读您提供的链接后，我注意到我们还可以提供 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 后，我可以看到正在播放的视频。

希望对你有用！

【讨论】：

在没有环回设备的情况下为 chrome 模拟网络摄像头的精确解决方案。伟大的工作。

嗨，我在哪里写这些行？

另外，如果有人想从单个重复图像生成视频，您可以这样做：ffmpeg -loop 1 -i inputImage.png -pix_fmt yuv420p -t 0.05 outputVideo.y4m（Chrome 循环播放视频，因此您无需担心持续时间。 .我指定了0.05秒，这样创建的文件就小了）

【参考方案2】：

模拟/伪造原始视频（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 文件的标题。 Chrome 已被修复。

此方法使用较少的 CPU，但会占用大量硬盘空间用于原始视频。保持视频文件简短。 Chrome 会循环播放。

【讨论】：

这个解决方案对我有用，我正在使用剧作家打开浏览器

这似乎不适用于 windows，但适用于 mac。谁能确认一下？

@No_name 我在 Windows 上使用它。

在 linux 上我必须指定大小才能使其正常工作我使用过：ffmpeg -i original.png -pix_fmt yuv420p -s 1280x720 video-for-chrome.y4m 并且工作

@brad，感谢您的回答！请注意，它应该是--use-fa... 而不是--user-fa...。其他选项见this link

【参考方案3】：

如果有人需要动态模拟视频，这就是我用过的（来自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);
    );

关键是返回Promise.resolve(stream) oncanplay 比 onplay 好，因为它被触发 after the video is playable

这些标志仍然是必需的：

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

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

【参考方案4】：

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

假网络摄像头（Chrome 和 Firefox）

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

【参考方案5】：

如何在 Windows 版 Chrome 上模拟网络摄像头

（使用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 实例正在运行。

找不到相机

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