【问题标题】：Is it possible broadcast audio with screensharing with WebRTC是否可以通过 WebRTC 屏幕共享来广播音频
【发布时间】：2013-10-15 13:26:17
【问题描述】：

是否可以通过 WebRTC 的屏幕共享来广播音频？使用audio: true 简单调用getUserMedia 因权限被拒绝错误而失败。是否有任何解决方法也可用于广播音频？是否会在屏幕共享之外实现音频？

谢谢。

【问题讨论】：

标签： webrtc screensharing

【解决方案1】：

参考这个演示：Share screen and audio/video from single peer connection!

多个流被捕获并附加到一个单个对等连接。 AFAIK，音频与 chromeMediaSource:screen 一起是“still”不允许。

2016 年 4 月 21 日更新

现在您可以在 Firefox 和 Chrome 上使用单个 getUserMedia 请求捕获音频+屏幕。

但 Chrome 仅支持 audio+tab，即您无法与音频一起捕获全屏。

Audio+Tab 表示任何 chrome 选项卡以及麦克风。

2017 年 1 月 9 日更新

您可以通过发出两个并行（唯一）getUserMedia 请求来捕获音频和屏幕流。

现在您可以使用addTrack 方法将音轨添加到屏幕流中：

var audioStream = captureUsingGetUserMedia();
var screenStream = captureUsingGetUserMedia();

var audioTrack = audioStream.getAudioTracks()[0];

// add audio tracks into screen stream
screenStream.addTrack( audioTrack );

现在screenStream 拥有音频和视频轨道。

nativeRTCPeerConnection.addStream( screenStream );
nativeRTCPeerConnection.createOffer(success, failure, options);

【讨论】：

在单个对等连接中同时使用音频和 chromeMediaSource:screen 是否有任何更新/进展？
这三个还不支持音频：chromeMediaSource:screen、chromeMediaSource:tab 和 chromeMediaSource:desktop。
但是可以创建两个并行对等连接，一个用于屏幕共享，一个用于音频/视频？
@Neko，您最多可以创建 256 个并行对等连接，使用这些对等连接共享哪种流并不重要。答案很简单：5 个节点可以共享 5 个应用程序的屏幕，10 个节点只能共享音频；剩下的可以分享音频+视频。这个过程通常被称为“网状网络模型”，其中启动多个对等点并且所有对等点相互连接。
谁能回答这个问题stackoverflow.com/questions/35444604/…

【解决方案2】：

截至 2020 年 5 月

要共享屏幕共享的音轨，您可以使用getDisplayMedia 而不是getUserMedia。 Docs.

navigator.mediaDevices.getDisplayMedia({audio: true, video: true})

目前仅在Chrome / Edge 中支持，并且仅在使用“Chrome Tab”共享选项时支持。您会在对话框中看到 Share audio 的复选标记。

【讨论】：

如果您有一个包含 2 个或更多音轨的流，它只会将第一个流传输到对等方。如果你想要两者，你需要在通过 WebRTC 发送之前混合它们。

【解决方案3】：

在 Firefox 中，您可以使用 getUserMedia 在同一请求中获取屏幕共享/等和麦克风音频，并将其附加到 PeerConnection。您可以将它与其他流结合起来——Firefox 中单个 PeerConnection 中的多个音频或视频轨道需要 Firefox 38 或更高版本。目前 38 是 Developer Edition（以前称为 Aurora）。 38 应该会在大约 9 周左右发布。

【讨论】：

同时创建 webRTC 屏幕共享和使用 getUserMedia 会产生奇怪的结果，其中一些音频会因为音频录制似乎无法正常工作而被截断。所以我即将放弃实现一个基于 getUserMedia 的录音机，它在屏幕录制的同时进行录制。
我将尝试使用 MediaRecorder。您可能希望在 Core::Audio/Video Recording 和 cc :mreavy 中的 bugzilla 中提交错误。它应该工作

【解决方案4】：

是的，您可以通过两个请求在 chrome 上录制音频和屏幕录制。

 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);
  });
});

【讨论】：