Web MediaRecorder API 无法同时录制音频和视频

Question

我一直在尝试使用 MediaRecorder API 录制视频和音频，但它只能让我录制没有音频的屏幕。我是否需要有两个独立的流并将它们合并为一个流？但是为什么在这种情况下可以在 navigator.mediaDevices.getDisplayMedia() 方法中设置 { audio: true, video: true } 呢？

这是我的代码：

async function startRecording() {
  let mimeType = "video/webm;codecs=vp9";

  try {
    const mediaDevices = navigator.mediaDevices as any;
    const stream = await mediaDevices.getDisplayMedia({
      audio: true,
      video: true,
    });

    const options = {
      mimeType: mimeType,
      bitsPerSecond: 500000,
    };

    let recorder = new MediaRecorder(stream, options);

    const chunks = [];
    recorder.ondataavailable = (e) => {
      if (e.data.size > 0) {
        chunks.push(e.data);
      } else {
        console.log("no data to push");
      }
    };

    recorder.onstop = (e) => {
      const completeBlob = new Blob(chunks, {
        type: chunks[0].type
      });
      stream.getTracks().forEach((track) => {
        track.stop();
        console.log(track);
      });

      setVideoData({
        recorded: true,
        localVideoURL: URL.createObjectURL(completeBlob),
        blob: completeBlob,
      });
    };

    recorder.start();

  } catch (error) {
    console.log(error);
  }
}

非常感谢任何指点。

Answer 1

大多数浏览器不支持使用显示媒体捕获音频。即使在 Chrome 和 Chromium 变体中，捕获支持也取决于 OS.

https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia#Browser_compatibility

Web MediaRecorder API 无法同时录制音频和视频

Web MediaRecorder API cannot record audio and video simultaneously

javascript

web-mediarecorder