I wrote some HTML5 and JS code that render a video stream, from a webcam, on a canvas but I don't know the method to specify which camera device to open.
Infact, if I access the webpage where my code runs with my Android, it shows only the "selfie-cam". How can I specify to use the main camera of the phone? Is there a method to do it?
If I access the webpage from my laptop, it opens the built-in webcam. But how can I connect to a (secondary) USB camera?
This is the "main" of my script:
var video, canvas, context;
window.onload = Initialize;
Initialization function:
function Initialize()
{
video = document.getElementById("videoElement");
canvas = document.getElementById("canvasElement");
canvas.width = parseInt(canvas.style.width);
canvas.height = parseInt(canvas.style.height);
context = document.getCSSCanvasContext("2d", "mask", 640, 480);
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;// || navigator.msGetUserMedia || navigator.oGetUserMedia;
if(navigator.getUserMedia)
{
navigator.getUserMedia({video: true}, VideoCapture, Error);
requestAnimationFrame(IdleFunc);
}
else
{
alert("Error: your browser is not supported.");
}
}
Success callback:
function VideoCapture(stream)
{
video.src = window.URL.createObjectURL(stream);
}
Failure callback:
function Error(e)
{
alert("Error: " + e);
}
Idle function:
function IdleFunc()
{
requestAnimationFrame(IdleFunc);
if(video.readyState === video.HAVE_ENOUGH_DATA)
{
context.drawImage(video, 0, 0, canvas.width, canvas.height);
}
}
Any help?
Thank you. And sorry for my English :)
PC: Windows 8.1, Chrome (v41). Smartphone: Android 4.2.2, Chrome (v41).