javascriptcamerawebrtcrtcmulticonnection

switch camera in webRTC


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.


Solution

  • 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.