How to swap camera sources in webrtc while in a call (javascript APIs)

Question

On iOS I can do:

// 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];
}

to switch between the front and back camera. I can call above code while in a call and the remote will briefly stop receiving frames and then continue receiving frames, but now from the other camera. How can I do the same in javascript? You don't specifically create a videotrack like I do in iOS, so how do I tell the stream to use a different camera device without starting a new call?

If you just want to swap between front and back camera you can use [`facingMode`](http://stackoverflow.com/a/32364912/918910). — jib, Sep 08 '16 at 14:07

score 5 · Accepted Answer · edited May 23 '17 at 11:46

This is an experimental technology

WebRTC Javascript code samples contain an example of camera selection :

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

with source code available on github :

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

Get video|audio sources using MediaDevices.enumerateDevices (on chrome and firefox)

https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices
MediaStreamTrack.getSources (only chrome) was deprecated in favour of 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;
        });
      };
    }
  }

to swap cameras, @omar-khaled answer from @wpp Changing a MediaStream of RTCPeerConnection

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

I'm sorry, I should've specified I'm trying to change the camera device in a call, our apps have a button in the call view to change the camera device and we'd like that same functionality in the web client. In all those links I can't find any example on how to change the camera device while in a call, only how to choose a device before calling getUserMedia. — Kevin, Sep 08 '16 at 08:48
no worries, your question is perfectly fine, I found this question on SO that may answer your question http://stackoverflow.com/questions/24239522/changing-a-mediastream-of-rtcpeerconnection — bfmags, Sep 08 '16 at 08:54
noticed this link https://www.webrtc-experiment.com/docs/how-to-switch-streams.html — bfmags, Sep 08 '16 at 09:57
I prefer something that doesn't force a renegotiation (like the iOS example), but I guess this will do for now, thanks for the help. — Kevin, Sep 08 '16 at 10:47
@Kevin you can use [`replaceTrack`](http://stackoverflow.com/a/35515536/918910) to change camera source without renegotiation, but it's currently only implemented in Firefox. I'll add an answer here. — jib, Sep 08 '16 at 14:12
@jib Yeah I saw your answer about that somewhere else on SO I think, thanks. I need a working fix for chrome though. — Kevin, Sep 09 '16 at 06:22
@Kevin FWIW that link shows a demo of renegotiation over data channel as well, which works in Chrome. — jib, Sep 09 '16 at 13:40

How to swap camera sources in webrtc while in a call (javascript APIs)

1 Answers1

Linked