如何将多个WebRTC媒体流(截屏+摄像头)混合组合成一个流？

Question

我有一个从getDisplayMedia()返回的实时屏幕截图媒体流，

以及从getUserMedia()返回的实时网络摄像头媒体流。

我目前将摄像头视频渲染在屏幕分享视频的顶部，以创建画中画效果：

​

​

我想将它们混合/组合成一个视频流，以便在单个HTML视频元素中呈现它。

我想保持两个流的活动和生活，就像他们是两个单独的视频渲染两个不同的媒体流一样。

我还需要保持流的位置-保持网络摄像头流小，并在屏幕分享流的顶部。保持原始分辨率和比特率对我来说也很重要。

我该怎么做呢？

Answer 1

您可以在HTMLCanvasElement上绘制这两个视频流，然后通过该HTMLCanvasElement调用其captureStream方法来创建一个MediaStream。

要绘制这两个视频流，您必须在元素中读取它们，并在定时循环中将这些元素drawImage()到画布上(例如，requestAnimationFrame可用于此定时循环)。

async function getOverlayedVideoStreams( stream1, stream2 ) {
  // prepare both players
  const vid1 = document.createElement("video");
  const vid2 = document.createElement("video");
  vid1.muted = vid2.muted = true;
  vid1.srcObject = stream1;
  vid2.srcObject = stream2;
  await Promise.all( [
    vid1.play(),
    vid2.play()
  ] );
  // craete the renderer
    const canvas = document.createElement("canvas");
  let w = canvas.width = vid1.videoWidth;
  let h = canvas.height = vid1.videoHeight;
  const ctx = canvas.getContext("2d");

  // MediaStreams can change size while streaming, so we need to handle it
  vid1.onresize = (evt) => {
    w = canvas.width = vid1.videoWidth;
    h = canvas.height = vid1.videoHeight;
  };
  // start the animation loop
  anim();
  
  return canvas.captureStream();
  
  function anim() {
    // draw bg video
        ctx.drawImage( vid1, 0, 0 );
    // caculate size and position of small corner-vid (you may change it as you like)
    const cam_w = vid2.videoWidth;
    const cam_h = vid2.videoHeight;
    const cam_ratio = cam_w / cam_h;
    const out_h = h / 3;
    const out_w = out_h * cam_ratio;
    ctx.drawImage( vid2, w - out_w, h - out_h, out_w, out_h );
    // do the same thing again at next screen paint
    requestAnimationFrame( anim );
  }
}

Live demo as a glitch，因为StackSnippets不允许捕获API。

Answer 2

我尝试在画布上渲染，但每当我更改/最小化我的web-app标签时，刷新率就会下降。我能够使用audioTimerLoop解决这个问题。但它在firefox上仍然不起作用。

由于我现在只能使用chrome，所以我使用PictureInPicture应用程序接口将userMedia显示为PiP，然后记录screenMedia。这使用户可以调整其在画布方法中固定的凸轮视频坐标。

为了获得pip模式，我在屏幕上显示了userMedia，并将其不透明度设置为0%，并创建了一个按钮来切换它。