getUserMedia（）屏幕共享音频和更新托盘

Question

当我使用getUserMedia()进行屏幕分享时，我无法获得音频。

我想做的事情，但无法找到相关内容：

1. 我想同时捕捉屏幕和音频。我怎样才能做到这一点？
2. 当我的屏幕共享开始时，会出现下面的托盘。它叫什么？以及如何修改它（如它的外观）？

截图：

Answer 1

1. 如果您想要为视频轨道制作一个由屏幕共享构成的流，而为音频轨道制作网络摄像头/麦克风音频，则需要分别对屏幕和音频设置约束的getusermedia进行2次调用。那么你将不得不将轨道放在一个公共流中。最终，您可以将该流附加到对等连接。 正如peveuve所说，你也可以使用两个对等连接，但它至少有两个问题：

   • 您不会在音频和视频之间实现同步（对于屏幕播放来说不那么重要）
   • 你需要两个连接=＆gt;端口数量的两倍=＆gt;更多失败的机会。这更可能是一个问题。

2. 这是浏览器的强制性安全功能（防止恶意页面在您不知情的情况下广播您的屏幕）。我根本不知道如何操纵它

Answer 2

可以在Chrome上使用npm-msr。

getScreenId(function (error, sourceId, screen_constraints) {
  navigator.getUserMedia = navigator.mozGetUserMedia || navigator.webkitGetUserMedia;
  navigator.getUserMedia(screen_constraints, function (stream) {
    navigator.getUserMedia({audio: true}, function (audioStream) {
      stream.addTrack(audioStream.getAudioTracks()[0]);
      var mediaRecorder = new MediaStreamRecorder(stream);
      mediaRecorder.mimeType = 'video/mp4'
      mediaRecorder.stream = stream;

      document.querySelector('video').src = URL.createObjectURL(stream);
      var video =  document.getElementById('screen-video')
      if (video) {
        video.src = URL.createObjectURL(stream);
        video.width = 360;
        video.height = 300;
      }
    }, function (error) {
      alert(error);
    });
  }, function (error) {
    alert(error);
  });
});

Answer 3

检查此答案：Is it possible broadcast audio with screensharing with WebRTC

你不能在同一个同伴中共享屏幕和音频，你必须打开2个同伴。