asp.net.netwebcamwebcam-capturejquery-webcam-plugin

Unable to access the WebCam


(function ($) {

    var webcam = {

    "extern": null, // external select token to support jQuery dialogs
    "append": true, // append object instead of overwriting

    "width": 320,
    "height": 240,

    "mode": "callback", // callback | save | stream

    "swffile": "../Webcam_Plugin/jscam_canvas_only.swf",
    "quality": 85,

    "debug":    function () {},
    "onCapture":    function () {},
    "onTick":   function () {},
    "onSave":   function () {},
    "onLoad":   function () {}
    };

    window["webcam"] = webcam;

    $["fn"]["webcam"] = function(options) {

    if (typeof options === "object") {
        for (var ndx in webcam) {
        if (options[ndx] !== undefined) {
            webcam[ndx] = options[ndx];
        }
        }
    }

    var source = '<object id="XwebcamXobjectX" type="application/x-shockwave-flash" data="'+webcam["swffile"]+'" width="'+webcam["width"]+'" height="'+webcam["height"]+'"><param name="movie" value="'+webcam["swffile"]+'" /><param name="FlashVars" value="mode='+webcam["mode"]+'&amp;quality='+webcam["quality"]+'" /><param name="allowScriptAccess" value="always" /></object>';

    if (null !== webcam["extern"]) {
        $(webcam["extern"])[webcam["append"] ? "append" : "html"](source);
    } else {
        this[webcam["append"] ? "append" : "html"](source);
    }

    var run = 3;
    (_register = function() {
        var cam = document.getElementById('XwebcamXobjectX');

        if (cam && cam["capture"] !== undefined) {

        /* Simple callback methods are not allowed :-/ */
        webcam["capture"] = function(x) {
            try {
            return cam["capture"](x);
            } catch(e) {}
        }
        webcam["save"] = function(x) {
            try {
            return cam["save"](x);
            } catch(e) {}
        }
        webcam["setCamera"] = function(x) {
            try {
            return cam["setCamera"](x);
            } catch(e) {}
        }
        webcam["getCameraList"] = function() {
            try {
            return cam["getCameraList"]();
            } catch(e) {}
        }
        webcam["pauseCamera"] = function() {
            try {
            return cam["pauseCamera"]();
            } catch(e) {}
        }       
        webcam["resumeCamera"] = function() {
            try {
            return cam["resumeCamera"]();
            } catch(e) {}
        }
        webcam["onLoad"]();
        } else if (0 == run) {
        webcam["debug"]("error", "Flash movie not yet registered!");
        } else {
        /* Flash interface not ready yet */
        run--;
        window.setTimeout(_register, 1000 * (4 - run));
        }
    })();
    }

})(jQuery);

Above is the function which I've used in order to access the webcam of the system. It work fine when i use it on localhost but the problem arises when the same is put on the server and then accessed through intranet. I'm unable to find the reason to fix it. Kindly help me with the same.

localhost

localhost

intranet

The first two images are the ones when i use my code on localhost. It works fine as i'm able to access the webcam.

Problem statement: The last image is the one where I try to do the same through server. The webcam opens by the images is completely wiped out. Only a white screen appears and even if I capture the photo through webcam, the white image is only saved on server instead of a proper original image.


Solution

  • Because of security reasons you have to serve the Site over Https to access the camera.