6

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

Marco Carletti
  • 318
  • 2
  • 5
  • 16

0 Answers0