如何在通話時在webrtc中交換相機源（javascript API）

Question

在iOS上，我可以執行以下操作：

// set a new camera id
cameraId = ([cameraId isEqualToString:frontCameraId]) ? backCameraId : frontCameraId;

// determine if the stream has a video track
BOOL hasActiveVideoTrack = ([self.localMediaStream.videoTracks count] > 0);

// remove video track from the stream
if (hasActiveVideoTrack) {
    [self.localMediaStream removeVideoTrack:self.localVideoTrack];
}

// remove renderer from the video track
[self.localVideoTrack removeRenderer:self.localVideoView];

// re init the capturer, video source and video track
localVideoCapturer = nil;
localVideoSource = nil;
localVideoCapturer = [RTCVideoCapturer capturerWithDeviceName:cameraId];
localVideoSource = [peerConnectionFactory videoSourceWithCapturer:localVideoCapturer constraints:mediaConstraints];

// create a new video track
self.localVideoTrack = [peerConnectionFactory videoTrackWithID:@"ARDAMSv0" source:localVideoSource];
[self.localVideoTrack addRenderer:self.localVideoView];

// add video track back to the stream
if (hasActiveVideoTrack) {
    [self.localMediaStream addVideoTrack:self.localVideoTrack];
}

在前后攝像頭之間切換。 我可以在通話中調用上述代碼，遙控器將暫時停止接收幀，然后繼續接收幀，但現在從其他攝像機開始。 如何在javascript中做同樣的事情？ 您沒有像在iOS中那樣專門創建視頻軌道，那么如何告訴流使用其他攝像頭設備而不啟動新呼叫？

Answer 1

這是一項實驗技術

---

WebRTC Javascript代碼示例包含一個攝像機選擇示例：

• https://webrtc.github.io/samples/src/content/devices/input-output/

github上有可用的源代碼：

• https://github.com/webrtc/samples
  • https://github.com/webrtc/samples/blob/gh-pages/src/js/adapter.js

---

使用MediaDevices.enumerateDevices （在chrome和Firefox上）獲取視頻|音頻源

• https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/enumerateDevices

• 不推薦使用MediaStreamTrack.getSources（僅適用於Chrome），而推薦使用 MediaDevices.enumerateDevices（）

---

navigator.mediaDevices.enumerateDevices =
        navigator.mediaDevices.enumerateDevices || function() {
          return new Promise(function(resolve) {
            var infos = [
              {kind: 'audioinput', deviceId: 'default', label: '', groupId: ''},
              {kind: 'videoinput', deviceId: 'default', label: '', groupId: ''}
            ];
            resolve(infos);
          });
        };

    if (browserDetails.version < 41) {
      // Work around http://bugzil.la/1169665
      var orgEnumerateDevices =
          navigator.mediaDevices.enumerateDevices.bind(navigator.mediaDevices);
      navigator.mediaDevices.enumerateDevices = function() {
        return orgEnumerateDevices().then(undefined, function(e) {
          if (e.name === 'NotFoundError') {
            return [];
          }
          throw e;
        });
      };
    }
  }

交換相機， @wpp的@ omar-khaled答案更改 RTCPeerConnection 的MediaStream

• https://www.webrtc-experiment.com/docs/how-to-switch-streams.html

---

_this.rtc.localstream.stop();
_this.rtc.pc.removeStream(_this.rtc.localstream);

gotStream = function (localstream_aud){
var constraints_audio={
    audio:true
   }

_this.rtc.localstream_aud = localstream_aud;
_this.rtc.mediaConstraints= constraints_audio;   
_this.rtc.createOffer();
}
getUserMedia(constraints_audio, gotStream);

gotStream = function (localstream){
var constraints_screen={
        audio:false,
        video:{
            mandatory:{
                chromeMediaSource: 'screen'
            }
        }
    }
  _this.rtc.localstream = localstream;
  _this.rtc.mediaConstraints=constraints_video;


  _this.rtc.createStream();  
  _this.rtc.createOffer();
}
getUserMedia(constraints_video, gotStream);