WebRTC 通話時更換麥克風或網絡攝像頭

Question

我想弄清楚當您與某人進行視頻聊天時如何更換麥克風或網絡攝像頭。

---

我現在已經嘗試了幾天，但沒有任何效果。 我正在關注這個例子，但似乎在有人已經連接時實現更改要困難得多。

我遇到的問題：如果我更換麥克風，聲音會丟失/麥克風根本沒有反應。 我也無法將其更改回默認值。

如果我更換網絡攝像頭，也會發生類似的事情。 stream 掛起，看到最后一幀。

我沒有收到錯誤消息，實際上它告訴我更改成功。

在通話建立之前更改網絡攝像頭/麥克風

---

這是相關的代碼塊。 我正在閱讀的任何地方都只是創建新的約束並將所需的 deviceId 提供給音頻/視頻 stream。：

function ChangeDevice() {

  if (localStream) {
    localStream.getTracks().forEach(track => {
      track.stop();
    });
  }

  var audioSource = audioInputSelect.value;
  var videoSource = videoSelect.value;

  console.log(videoSource);
  console.log(audioSource);

  const newConstraints = {
    audio: {deviceId: audioSource ? {exact: audioSource} : undefined},
    video: {deviceId: videoSource ? {exact: videoSource} : undefined}
  };

  navigator.mediaDevices.getUserMedia(newConstraints).then(gotStream).then(gotDevices).catch(handleError);
}

function gotStream(stream) {

  console.log('Adding local stream.');
  localStream = stream;
  localVideo.srcObject = stream;
  sendMessage(['got user media', room]);
  if (isInitiator) {
    maybeStart();
  }
  return navigator.mediaDevices.enumerateDevices(); // I added this

}

我認為這兩個是相關的函數，當我從下拉列表中 select 一個新設備時調用 ChangeDevice。 身份證是對的。

這是我使用的整個代碼：

pastebin.com/6JrK4jJD

Answer 1

幸運的是， replaceTrack現在似乎可以在所有瀏覽器上運行，因此無需重新協商。

我不得不像這樣編輯我的gotStream function：

function gotStream(stream) {

  // If already started
  // Need this if webcam or mic changes
  if (isStarted) {
    var videoTrack = stream.getVideoTracks()[0];
    var audioTrack = stream.getAudioTracks()[0];

    var sender = pc.getSenders().find(function(s) {
      return s.track.kind == videoTrack.kind;
    });

    var sender2 = pc.getSenders().find(function(s) {
      return s.track.kind == audioTrack.kind;
    });

    console.log('found sender:', sender);
    sender.replaceTrack(videoTrack);
    sender2.replaceTrack(audioTrack);

    localStream = stream;
    localVideo.srcObject = stream;

  } else {
    console.log('Adding local stream.');
    localStream = stream;
    localVideo.srcObject = stream;
    sendMessage(['got user media', room]);
    if (isInitiator) {
      maybeStart();
    }
  }

  return navigator.mediaDevices.enumerateDevices(); // I added this

}