Selecting a different video source

[ylh888]

I'm asking this basic question here as I couldn't seem to find it elsewhere.

How do I select say a USB camera as a video source, rather than using the default webcam?

What do I have to change here?

Thanks.

[valepu]

I don't remember where i got this code from but i have succesfully used it to change your video source in a web page. It does work with tracking.js. I put it in a file .js and i have included it at the end of my web page

'use strict';

var videoElement = document.querySelector('video');
var videoSelect = document.querySelector('select#videoSource');

navigator.getUserMedia = navigator.getUserMedia ||
  navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

function gotSources(sourceInfos) {
  for (var i = 0; i !== sourceInfos.length; ++i) {
    var sourceInfo = sourceInfos[i];
    var option = document.createElement('option');
    option.value = sourceInfo.id;
    if (sourceInfo.kind === 'video') {
      option.text = sourceInfo.label || 'camera ' + (videoSelect.length + 1);
      videoSelect.appendChild(option);
    }
  }
}

if (typeof MediaStreamTrack === 'undefined'){
  alert('This browser does not support MediaStreamTrack.\n\nTry Chrome Canary.');
} else {
  MediaStreamTrack.getSources(gotSources);
}

function successCallback(stream) {
  window.stream = stream; // make stream available to console
  videoElement.src = window.URL.createObjectURL(stream);
  videoElement.play();
}

function errorCallback(error){
  console.log('navigator.getUserMedia error: ', error);
}

function start(){
  if (!!window.stream) {
    videoElement.src = null;
    window.stream.stop();
  }
  var videoSource = videoSelect.value;
  var constraints = {
    video: {
      optional: [{sourceId: videoSource}]
    }
  };
  navigator.getUserMedia(constraints, successCallback, errorCallback);
}

videoSelect.onchange = start;

start();

Remember to add this:

<div class="select">
    <label for="videoSource">Video source: </label>
    <select id="videoSource"></select>
</div>

in your web page

[valepu]

You can see it at work on this Plunker http://plnkr.co/edit/Y1oTReseZpFYoWnZcDbl?p=preview probably need some adjustments to work for you but i think it's a good start.
Mind that this is unrelated to tracking.js since this library provides only the tracking (which may come from your webcam, an image or a video) not the webcam support

[ylh888]

Thanks!

I ran your demo fine the first time. But I erroneously clicked off the 'permission' screen the second time I ran it and it now seems impossible to get it to run again. Neither could I run the code from file. ("Uncaught TypeError: Cannot set property 'onchange' of null" on line 53). It is probably a Chrome thing but would appreciate some tips.

[ylh888]

I also read (http://www.sitepoint.com/introduction-getusermedia-api/) that invoking a local "file:///" wont work in Chrome anyway.

[valepu]

If I remember correctly closing and opening the browser will ask you for permission again.

There are many things that don't work using file:// If you don't plan using a server. I'm not sure the webcam part of tracking.js works using a local file:// protocol. You can always get something like easyphp or xampp and put your files there, then call them through "http://localhost/webcam.html" or something like that

[eduardolundgren]

It's a good addition. Feel free to send a pull request for selecting different camera sources.

[valepu]

Problem is, code is not mine and i don't know who to credit for that (probably i got that from stackoverflow but i can't find it anymore). If it's ok for you i might add it somewhere. Where do you think it might be a good place to add it? I was thinking adding it into the examples (since it's unrelated to tracking)