getUserMedia() 与音频和更新托盘共享屏幕答案

【问题标题】：getUserMedia() Screen share with Audio and update traygetUserMedia() 与音频和更新托盘共享屏幕
【发布时间】：2015-03-11 18:18:05
【问题描述】：

当我使用getUserMedia() 进行屏幕共享时，我听不到音频。

我想做的事情，但找不到任何相关的东西：

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

截图：

【问题讨论】：

标签： google-chrome google-chrome-extension stream webrtc getusermedia

【解决方案1】：

如果您想要一个由视频轨道的屏幕共享和音频轨道的网络摄像头/麦克风音频组成的流，您需要分别调用 2 次 getusermedia 调用，并将约束分别设置为屏幕和音频。那么您将不得不将曲目放在一个公共流中。最终，您可以将该流附加到对等连接。正如peveuve所说，你也可以使用两个对等连接，但它至少有两个问题：
- 您将无法在音频和视频之间进行同步（对于截屏来说不是那么重要）
- 您将需要两个连接 => 端口数量的两倍 => 更多失败的机会。这更有可能是个问题。
这是浏览器的一项强制性安全功能（防止恶意页面在您不知情的情况下广播您的屏幕）。我根本不知道有什么方法可以操纵它

【讨论】：

是否有一个示例应用程序可以进行 2 次通话屏幕和音频？我无法添加流来生成公共流。能指导一下吗？

【解决方案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);
  });
});

【讨论】：

【解决方案3】：

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

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

【讨论】：