4

how can I switch cameras in RTCMulticonnection

i fetch list of divices and their ids 

  var videoDevices = document.getElementById('video-devices');
        var audioDevices = document.getElementById('audio-devices');

        connection.DetectRTC.load(function() {

                connection.DetectRTC.audioInputDevices.forEach(function(device) {
                    var option = document.createElement('option');
                    option.innerHTML = device.label;
                    option.value = device.id;
                    document.querySelector('select').appendChild(option);
                    });
                connection.DetectRTC.videoInputDevices.forEach(function(device) {
                    var option = document.createElement('option');
                    option.innerHTML = device.label;
                    option.value = device.id;
                    videoDevices.appendChild(option);
                });
        });

And trying to change the camera by following. took this from GitHub issue

document.getElementById('switch-camera').onclick = function() {
          var videoSourceId = videoDevices.value;
          connection.codecs.video = 'VP8';
          connection.bandwidth  = { // all values in kbits/per/seconds
            audio: 192,
            video: 512,
            screen: 512
           };
           connection.stopMediaAccess();

            setTimeout(() => {
                 connection.mediaConstraints.video.optional = [{
                       sourceId: videoSourceId
                 }];

            connection.addStream({audio: true, video: true});

             },2000);
   };

but no use camera won't change at all I tried in many ways but lands with failure

here is an example on codepen

This example from WebRTC samples may helpful it does what i want, but got confussed integrating with RTCMulticoonection.

asimdev
  • 705
  • 1
  • 8
  • 22

1 Answers1

3

If you want to switch camera front and back there is a solution in documentation of RTCMulticonnection.

and here is solution for you if you want to switch cameras (i.e. front/back)

function openOrJOinRoom(roomid) {
    connection.mediaConstraints = {
        audio: true,
        video: {
            facingMode: {exact : 'environment'}
        }
    };

    connection.openOrJoin(roomid);
}

function selectFrontCameraDuringActiveSession() {
    // we need to stop previous video tracks because
    // mobile device may not allow us capture
    // both front and back camera streams
    // at the same time
    connection.attachStreams.forEach(function(stream) {
        // stop only video tracks
        // so that we can recapture video track
        stream.getVideoTracks().forEach(function(track) {
            track.stop();
        });
    });

    var mediaConstraints = {
        audio: false, // NO need to capture audio again
        video: {
            facingMode: {exact : 'user'}
        }
    };

    navigator.mediaDevices.getUserMedia(mediaConstraints).then(function(frontCamera) {
        var frontCameraTrack = frontCamera.getVideoTracks()[0];
        connection.getAllParticipants().forEach(function(pid) {
            connection.peers[pid].peer.getSenders().forEach(function(sender) {
                if (sender.track.kind == 'video') {
                    sender.replaceTrack(frontCameraTrack);
                }
            });
        });
    });
}

function selectBackCameraDuringActiveSession() {
    // we need to stop previous video tracks because
    // mobile device may not allow us capture
    // both front and back camera streams
    // at the same time
    connection.attachStreams.forEach(function(stream) {
        // stop only video tracks
        // so that we can recapture video track
        stream.getVideoTracks().forEach(function(track) {
            track.stop();
        });
    });

    var mediaConstraints = {
        audio: false, // NO need to capture audio again
        video: {
            facingMode: {exact : 'environment'}
        }
    };

    navigator.mediaDevices.getUserMedia(mediaConstraints).then(function(frontCamera) {
        var frontCameraTrack = frontCamera.getVideoTracks()[0];
        connection.getAllParticipants().forEach(function(pid) {
            connection.peers[pid].peer.getSenders().forEach(function(sender) {
                if (sender.track.kind == 'video') {
                    sender.replaceTrack(frontCameraTrack);
                }
            });
        });
    });
}

I copied this from GitHub issue. please do not forget to add adapter.js Hope you find this answer helpful.

Ziauz
  • 773
  • 4
  • 22