在 Mac OS 上使用 WebRTC 和 Electron 进行屏幕共享和视频/音频通话答案

【问题标题】：Screen Sharing and video/audio calling using WebRTC and Electron on Mac OS在 Mac OS 上使用 WebRTC 和 Electron 进行屏幕共享和视频/音频通话
【发布时间】：2019-05-12 20:13:03
【问题描述】：

我正在尝试创建一个电子应用程序，它可以使用 webrtc 与系统音频共享桌面，如果我设置了约束：

const constraints = {
 audio: {
 mandatory: {
  chromeMediaSource: 'desktop'
 }
  },
video: {
mandatory: {
 chromeMediaSource: 'desktop'
}
 }
  }

我遇到了这个问题Mac OS 音频：

ERROR:adm_helpers.cc(73)] 无法查询立体声录音。 然后是“NotFoundError: Requested device not found”

【问题讨论】：

标签： node.js macos electron webrtc getusermedia

【解决方案1】：

对于 MacOS 用户，您需要分别获取音频和视频流，然后像这样合并流：

const stream = await navigator.mediaDevices.getUserMedia({
    audio: false,
    video: {
        mandatory: {
            chromeMediaSource: 'desktop',
            chromeMediaSourceId: source.id
        }
    }
});
navigator.mediaDevices.getUserMedia({
    audio: {
        mandatory: {
            chromeMediaSource: 'desktop'
        }
    },
    video: false
}).then(function(audioStream) {
  var audioTracks = audioStream.getAudioTracks();

  // merge audio and video tracks
  if(audioTracks.length > 0) {
    stream.addTrack(audioTracks[0]);
  }

    recorder = new MediaRecorder(stream, {
        mimeType: 'YOUR MIME TYPE'
    });

    recorder.ondataavailable = yourDataHandler;
    recorder.onstop = yourStopHandler;

    recorder.start();
}).catch(function(err) {
    console.error('audioTrackError', err);
});

【讨论】：

【解决方案2】：

你需要使用电子的desktopCapturer api。

示例 -

// In the renderer process.
const {desktopCapturer} = require('electron')

desktopCapturer.getSources({types: ['window', 'screen']}, (error, sources) => {
  if (error) throw error
  for (let i = 0; i < sources.length; ++i) {
    if (sources[i].name === 'Electron') {
      navigator.mediaDevices.getUserMedia({
        audio: false,
        video: {
          mandatory: {
            chromeMediaSource: 'desktop',
            chromeMediaSourceId: sources[i].id,
            minWidth: 1280,
            maxWidth: 1280,
            minHeight: 720,
            maxHeight: 720
          }
        }
      })
      .then((stream) => handleStream(stream))
      .catch((e) => handleError(e))
      return
    }
  }
})

function handleStream (stream) {
  const video = document.querySelector('video')
  video.srcObject = stream
  video.onloadedmetadata = (e) => video.play()
}

function handleError (e) {
  console.log(e)
}

并使用上面的audio 标志在屏幕共享时获取音频。

更多细节在这里 - https://electronjs.org/docs/api/desktop-capturer

【讨论】：

是的，我愿意，但关键是如果您将音频设置为“真”，它将无法在 MacOS 上运行。您是否尝试在 mac os 上启用音频？