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

【问题标题】：Web MediaRecorder API cannot record audio and video simultaneouslyWeb MediaRecorder API 无法同时录制音频和视频
【发布时间】：2020-09-09 11:46:38
【问题描述】：

我一直在尝试使用 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);
  }
}

非常感谢任何指针。

【问题讨论】：

标签： javascript web-mediarecorder

【解决方案1】：

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

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

【讨论】：