Jquery Webcam/flash: How To Detect If Webcam Is Active?

I'm using this jQuery webcam plugin in a website I'm working on. If you go to the website, you'll notice it uses flash, and you have to click 'accept' in order to get it to work. I

Solution 1:

Add the following function to the debug option of the webcam.

$("#camera").webcam({
    width: 320,
    // other options etc.debug: function(type, message) { 
        if (message === "Camera started") { window.webcam.started = true; } 
    }
});

We cannot test for inactivity to be true (i.e. muted === true) but now we can test for webcam.started being true or undefined/false:

function capture_image(){
    if( !webcam.started ) { alert("hey, camera not started"); }
}

How to capture the event

There is not an event per se, other than the debug event. You could make one...

First do the following:

$("#camera").webcam({
    width: 320,
    // other options etc.debug: function(type, string) { 
        if (string === "Camera started") { 
            window.webcam.started = true; 
            if (window.webcam.onStarted) { window.webcam.onStarted(); } 
        } 
    }
});

Next add a function to our new event webcam.onStarted:

window.webcam.onStarted = function () {
    alert("Whey, the webcam started");
};

Solution 2:

You could use the method .getCameraList() to get all cameras available.

onLoad The onLoad callback is called as soon as the registration of the interface is done. In the example above, I use the callback to get a list of all cameras available:

onLoad: function() {
    var cams = webcam.getCameraList();
    for(var i in cams) {
        jQuery("#cams").append("<li>" + cams[i] + "</li>");
    } 
}

Solution 3:

I think you will need to use the ExternalInterface API to tell the JavaScript on your page when the privacy setting has been agreed to.

However I don't know if you will be able to get to the "image information" you want because flash has control of the camera, so the JavaScript will only be able to tell flash to "capture" and image through the ExternalInterface, you will probably have to use flash (ActionScript) to send the image data to a webservice before the javascript on the page can do anything with it.

HTML5 has an <input type="file" accept="image/*" capture="camera" id="capture"> that might suffice, instead of the flash implementation.

Solution 4:

Not sure about all these plugins etc. This works for me, though we're still testing:

webcamActive = false;webcamActive = $("#video").attr('src');

Solution 5:

If anyone here finding the solution for detecting when the webcam is loaded and he is using webcam.js then here is the way to detect when the webcam is loaded:

Webcam.on( 'live', function() {
    // camera is live, showing preview image// (and user has allowed access)
} );