Switch Camera

WebRTC Switch Camera Solution

by kalyansai99

HTML

<video id="player" autoplay></video>

<div>
  <button id="flipBtn">
      Flip Camera
  </button>
</div>

CSS

#player {
  width: 320px;
}

#flipBtn {
  width: 150px;
  height: 50px;
}

JavaScript

var player = document.getElementById('player');
var flipBtn = document.getElementById('flipBtn');
var deviceIdMap = {};
var front;

var constraints = {
    audio: false,
    video: {
        frameRate: 1000
    }
};

var gotDevices = function (deviceList) {
    var length = deviceList.length;
    console.log(deviceList);
    for (var i = 0; i < length; i++) {
        var deviceInfo = deviceList[i];
        if (deviceInfo.kind === 'videoinput') {
            if (deviceInfo.label.indexOf('front') !== -1) {
                deviceIdMap.front = deviceInfo.deviceId;
            } else if (deviceInfo.label.indexOf('back') !== -1) {
                deviceIdMap.back = deviceInfo.deviceId;
            }
        }
    }
    if (deviceIdMap.front) {
        constraints.video.deviceId = {exact: deviceIdMap.front};
        front = true;
    } else if (deviceIdMap.back) {
        constraints.video.deviceId = {exact: deviceIdMap.back};
        front = false;
    }
    console.log('deviceIdMap - ', deviceIdMap);
};

var handleError = function (error) {
    console.log('navigator.getUserMedia error: ', error);
};

function handleSuccess(stream) {
    window.stream = stream;
    // this is a video track as there is no audio track
    console.log("Track - ", window.stream.getTracks()[0]);
    console.log('Ready State - ', window.stream.getTracks()[0].readyState);
    if (window.URL) {
        player.src = window.URL.createObjectURL(stream);
    } else {
        player.src = stream;
    }
    player.onloadedmetadata = function (e) {
    		console.log('Ready State - 3', window.stream.getTracks()[0].readyState);
        player.play();
        console.log('Ready State - 4', window.stream.getTracks()[0].readyState);
    }
    console.log('Ready State - 2', window.stream.getTracks()[0].readyState);
}

navigator.mediaDevices.enumerateDevices().then(gotDevices).catch(handleError);

flipBtn.addEventListener('click', function () {
		if (window.stream) {
     ...