title: How do i detect multiple web-cameras connected to a system and choose a specific camera at a time?
body: <p>I am trying to use two cameras on web application . My requirement  is to detect these cameras from the browser and choose one camera at time to capture the image and display it in the web-page.  It may be like we are displaying two buttons , by clicking on one button camera1 will be detected and capture the image , when the user press the other button second camera will be used to capture the  image.  </p>
  
  <p>I need to achieve this using HTML5 and JavaScript. I already have some reference and tried navigator.webkitGetUserMedia()  and MediaStreamTrack.getSources()  but i am getting a script error using MediaStreamTrack.getSources().  <strong>Error</strong> : " <em>Failed to execute 'getSources' on 'MediaStreamTrack': Functionality not implemented yet</em> " . </p>
  
  <p>Currently the browser is able to display the cameras and user need to select the camera on page load,  can we do it programmatically? </p>
  
  <p>Here is the link for the code :   <a href="http://jsfiddle.net/xL8wzzx2/" rel="nofollow">http://jsfiddle.net/xL8wzzx2/</a>     </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;body&gt;
  &lt;video id="video" autoplay&gt;&lt;/video&gt;
  &lt;button id="snap"&gt;Capture&lt;/button&gt;
  &lt;button id="new"&gt;New&lt;/button&gt;
  &lt;canvas id="canvas" width="640" height="480"&gt;&lt;/canvas&gt;
  &lt;button id="upload"&gt;Upload&lt;/button&gt;
  &lt;/body&gt;
  
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1 /jquery.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  
  // Put event listeners into place
  window.addEventListener("DOMContentLoaded", function() {
  // Grab elements, create settings, etc.
  
  var canvas = document.getElementById("canvas"),
  context = canvas.getContext("2d"),
  video = document.getElementById("video"),
  videoObj = { "video": true },
  errBack = function(error) {
     console.log("Video capture error: ", error.code); 
  };
  
  
  /* &lt; Error: TypeError: MediaStreamTrack.getSources is not a function &gt;*/
  
  MediaStreamTrack.getSources(function(sources){
    var cams = _.filter(sources, function(e){ //only return video elements 
    return e.kind === 'video';
    });
    var camIds = _.map(cams, function (e) { // return only ids
      return e.id;
   });
  });
  
  // &lt;/Error  &gt;If the above block is removed, then it is working properly.
  
  
  
  
  // Put video listeners into place
  if(navigator.getUserMedia) { // Standard
  navigator.getUserMedia(videoObj, function(stream) {
  video.src = stream;
  video.play();
  }, errBack);
  } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
  navigator.webkitGetUserMedia(videoObj, function(stream){
  video.src = window.webkitURL.createObjectURL(stream);
  video.play();
  }, errBack);
  } else if(navigator.mozGetUserMedia) { // WebKit-prefixed
  navigator.mozGetUserMedia(videoObj, function(stream){
  video.src = window.URL.createObjectURL(stream);
  video.play();
  }, errBack);
  }
  // Trigger photo take
  document.getElementById("snap").addEventListener("click", function() {
  context.drawImage(video, 0, 0, 640, 480);
  // Littel effects
  $('#video').fadeOut('slow');
  $('#canvas').fadeIn('slow');
  $('#snap').hide();
  $('#new').show();
  // Allso show upload button
  //$('#upload').show();
  });
  // Capture New Photo
  document.getElementById("new").addEventListener("click", function() {
  $('#video').fadeIn('slow');
  $('#canvas').fadeOut('slow');
  $('#snap').show();
  $('#new').hide();
  });
  // Upload image to sever 
  document.getElementById("upload").addEventListener("click", function(){
  var dataUrl = canvas.toDataURL();
  $.ajax({
  type: "POST",
  url: "camsave.php",
  data: { 
  imgBase64: dataUrl
  }
  }).done(function(msg) {
  console.log('saved');
  // Do Any thing you want
  });
  });
  }, false);
  
  
  // Upload image to sever 
  document.getElementById("upload").addEventListener("click", function(){
  var dataUrl = canvas.toDataURL();
  $.ajax({
  type: "POST",
  url: "camsave.php",
  data: { 
  imgBase64: dataUrl
  }
  }).done(function(msg) {
  console.log('saved');
  // Do Any thing you want
  });
  });
  
  
  &lt;/script&gt;
  </code></pre>
  
  <p>Thank you. </p>