如何合并两个媒体流？答案

【问题标题】：How do I combine two media streams?如何合并两个媒体流？
【发布时间】：2021-09-29 00:41:41
【问题描述】：

navigator.mediaDevices.getDisplayMedia({ audio: true, video: true }).then(stream => {});
navigator.mediaDevices.getUserMedia({ audio: true, video: true }).then(stream => {});

如何将这两个流合二为一？

【问题讨论】：

标签： javascript stream webrtc media

【解决方案1】：

使用 video-stream-merger.js 库将捕获流与网络摄像头流合并示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.jsdelivr.net/npm/video-stream-merger@4.0.1/dist/video-stream-merger.js"></script>
    <title>Merge screen with webcam</title>
  </head>
  <body>
    <video id="video"></video>
  </body>
  <script>
    async function startCapture() {
      let webcamStream = null;
      const constraints = { audio: true, video: { width: 720, height: 480 } };
      try {
        webcamStream = await navigator.mediaDevices.getUserMedia(constraints);
      } catch (err) {
        /* handle the error */
        console.error("Error: " + err);
      }
      let captureStream = null;

      try {
        const displayMediaOptions = null; //set it if you need
        captureStream = await navigator.mediaDevices.getDisplayMedia(
          displayMediaOptions
        );
      } catch (err) {
        /* handle the error */
        console.error("Error: " + err);
      }

      const merger = new VideoStreamMerger();

      // Add the screen capture. Position it to fill the whole stream (the default)
      merger.addStream(captureStream, {
        x: 0, // position of the topleft corner
        y: 0,
        width: merger.width,
        height: merger.height,
        mute: true, // we don't want sound from the screen (if there is any)
      });

      // Add the webcam stream. Position it on the bottom left and resize it to 100x100.
      merger.addStream(webcamStream, {
        x: 0,
        y: merger.height - 100,
        width: 100,
        height: 100,
        mute: false,
      });

      // Start the merging. Calling this makes the result available to us
      merger.start();

      // We now have a merged MediaStream!
      //merger.result
      const video = document.querySelector("video");
      video.srcObject = merger.result;
      video.onloadedmetadata = function (e) {
        video.play();
      };
    }
    startCapture();
  </script>
</html>

【讨论】：

var rvideo = document.getElementById('remoteVideo') navigator.mediaDevices.getUserMedia({ 我如何将这些组合起来并放入 mediarecorder？