無法為 WebRTC 呼叫更改攝像頭/流

Question

來源： https : //github.com/anoek/webrtc-group-chat-example/blob/master/client.html

我正在嘗試修改此 Webrtc 示例以添加更改相機的功能（跨瀏覽器支持）。

正常使用完美，更換攝像頭后，重新協商失敗。

1) 通過navigator.mediaDevices.enumerateDevices()獲取設備列表

2）獲取新流后更改local_media_stream

local_media_stream.getTracks().forEach(function(track) {
    track.stop();
});
local_media_stream = stream; 

3）觸發重協商功能（從源代碼的第132行復制）

function renegotiate(){
    console.log("Creating RTC offer to ", peer_id);
    peer_connection.createOffer(
                    function (local_description) { 
                        console.log("Local offer description is: ", local_description);
                        peer_connection.setLocalDescription(local_description,
            function() { 
                signaling_socket.emit('relaySessionDescription', 
                    {'peer_id': peer_id, 'session_description': local_description});
                console.log("Offer setLocalDescription succeeded"); 
            },
            function() { Alert("Offer setLocalDescription failed!"); }
        );
    },
    function (error) {
        console.log("Error sending offer: ", error);
    });
};

我相信我的方法是錯誤的，但我已經嘗試了在谷歌上找到的許多不同的方法來編輯重新協商的代碼，但是我對 WebRTC 和 Socket.io 不熟悉，仍然無法使事情起作用。

更換攝像頭后，其他參與者顯示的視頻只是從視頻上一幀變成了靜態圖像。

有人可以幫忙指出我的錯誤嗎？ 提前致謝。

Answer 1

以前我是通過以下方式完成的（順序很重要）。

假設您列出了我們所有可用的設備：

var devicesIds = [];

navigator.mediaDevices.enumerateDevices().then(function(devices) {
  devices.forEach(function(device) {
     devicesIds.push(device.deviceId);
  });          
});

現在你想切換：

1) 停止當前曲目

localStream.getTracks().forEach(function(track) {
   track.stop();
});

2) 獲取新流

var constraints = {video: {deviceId: devicesIds[1]}, audio: true};

navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {
  replaceTracks(stream);
}).catch(function(error) {

});

3）更換曲目：

function replaceTracks(newStream){

  detachMediaStream(elementId);   

  newStream.getTracks().forEach(function(track) {
     localStream.addTrack(track);
  });

  attachMediaStream(elementId, newStream);

  // optionally, if you have active peer connections:
  _replaceTracksForPeer(peerConnection);

  function _replaceTracksForPeer(peer) {
    peer.getSenders().map(function(sender) {
        sender.replaceTrack(newStream.getTracks().find(function(track) {
            return track.kind === sender.track.kind;
        }));
    });
  }
}

function detachMediaStream = function(id) {
  var elem = document.getElementById(id);

  if (elem) {
    elem.pause();

    if (typeof elem.srcObject === 'object') {
        elem.srcObject = null;
    } else {
        elem.src = '';
    }
  }
};

function attachMediaStream = function(id, stream) {
  var elem = document.getElementById(id);

  if (elem) {
    if (typeof elem.srcObject === 'object') {
        elem.srcObject = stream;
    } else {
        elem.src = window.URL.createObjectURL(stream);
    }

    elem.onloadedmetadata = function(e) {
        elem.play();
    };
  } else {
    throw new Error('Unable to attach media stream');
  }
};