Веб-камера jquery не работает в chrome 35

Я пытаюсь получить доступ к веб-камере из API веб-камеры jquery. Пример, приведенный ниже, отлично работает в IE9, Firefox, но, к сожалению, не работает в Chrome v35. Он показывает, что веб-камера активирована, но когда я нажимаю кнопку «Сделать снимок», появляется ошибка javascript, говорящая, что webcam.capture не определено. В приведенном ниже коде объект веб-камера не имеет функции, называемой capture() в Chrome; но он найден для Firefox и IE9.

Пожалуйста, помогите мне!

Index.html

    <!DOCTYPE html>
<html lang="en">
<head>
    <script src="jquery-1.11.0.js"></script>
    <script type="text/javascript" src="jquery.webcam.min.js"></script>
</head>

<body>


<p id="status" style="height:22px; color:#c00;font-weight:bold;"></p>

<div id="webcam" style="width:350px;float: left;"">

<a href="javascript:webcam.capture();changeFilter();void(0);">Take a picture instantly</a>

</div>

<p style="width:350px; float: left;"><canvas id="canvas" height="240" width="320" style="float: left;""></canvas></p>

<script type="text/javascript" src="main.js"></script>



</body>
</html>

main.js

var pos = 0;
var ctx = null;
var cam = null;
var image = null;

var filter_on = false;
var filter_id = 0;

function changeFilter() {
    if (filter_on) {
        filter_id = (filter_id + 1) & 7;
    }
}

function toggleFilter(obj) {
    if (filter_on =!filter_on) {
        obj.parentNode.style.borderColor = "#c00";
    } else {
        obj.parentNode.style.borderColor = "#333";
    }
}

jQuery("#webcam").webcam({

    width: 320,
    height: 240,
    mode: "callback",
    swffile: "http://www.xarg.org/download/jscam_canvas_only.swf",

    onTick: function(remain) {

        if (0 == remain) {
            jQuery("#status").text("Cheese!");
        } else {
            jQuery("#status").text(remain + " seconds remaining...");
        }
    },

    onSave: function(data) {

        var col = data.split(";");
        var img = image;

        for(var i = 0; i < 320; i++) {
            var tmp = parseInt(col[i]);
            img.data[pos + 0] = (tmp >> 16) & 0xff;
            img.data[pos + 1] = (tmp >> 8) & 0xff;
            img.data[pos + 2] = tmp & 0xff;
            img.data[pos + 3] = 0xff;
            pos+= 4;
        }

        if (pos >= 0x4B000) {
            ctx.putImageData(img, 0, 0);
            pos = 0;
        }
    },

    onCapture: function () {
        webcam.save();

        jQuery("#flash").css("display", "block");
        jQuery("#flash").fadeOut(100, function () {
            jQuery("#flash").css("opacity", 1);
        });
    },

    debug: function (type, string) {
        jQuery("#status").html(type + ": " + string);
    },

    onLoad: function () {

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

function getPageSize() {

    var xScroll, yScroll;

    if (window.innerHeight && window.scrollMaxY) {
        xScroll = window.innerWidth + window.scrollMaxX;
        yScroll = window.innerHeight + window.scrollMaxY;
    } else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
        xScroll = document.body.scrollWidth;
        yScroll = document.body.scrollHeight;
    } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
        xScroll = document.body.offsetWidth;
        yScroll = document.body.offsetHeight;
    }

    var windowWidth, windowHeight;

    if (self.innerHeight) { // all except Explorer
        if(document.documentElement.clientWidth){
            windowWidth = document.documentElement.clientWidth;
        } else {
            windowWidth = self.innerWidth;
        }
        windowHeight = self.innerHeight;
    } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
        windowWidth = document.documentElement.clientWidth;
        windowHeight = document.documentElement.clientHeight;
    } else if (document.body) { // other Explorers
        windowWidth = document.body.clientWidth;
        windowHeight = document.body.clientHeight;
    }

    // for small pages with total height less then height of the viewport
    if(yScroll < windowHeight){
        pageHeight = windowHeight;
    } else {
        pageHeight = yScroll;
    }

    // for small pages with total width less then width of the viewport
    if(xScroll < windowWidth){
        pageWidth = xScroll;
    } else {
        pageWidth = windowWidth;
    }

    return [pageWidth, pageHeight];
}

window.addEventListener("load", function() {

    jQuery("body").append("<div id=\"flash\"></div>");

    var canvas = document.getElementById("canvas");

    if (canvas.getContext) {
        ctx = document.getElementById("canvas").getContext("2d");
        ctx.clearRect(0, 0, 320, 240);

        var img = new Image();
        img.src = "logo.gif";
        img.onload = function() {
            ctx.drawImage(img, 129, 89);
        }
        image = ctx.getImageData(0, 0, 320, 240);
    }

    var pageSize = getPageSize();
    jQuery("#flash").css({ height: pageSize[1] + "px" });

}, false);

window.addEventListener("resize", function() {

    var pageSize = getPageSize();
    jQuery("#flash").css({ height: pageSize[1] + "px" });

}, false);

google-chrome webcam-capture jquery-webcam-plugin
person ArinCool    schedule 08.06.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Думаю, я нашел ответ. Сначала я пытался запустить код из папки в моей системе. Но когда я развернул тот же код в локальном веб-приложении, работающем на Tomcat (http://‹>/webcam/webcam.html), он начал работать в Chrome!! В любом случае я собирался развернуть код завтра на удаленном сервере, но понятия не имел, что API-интерфейсы веб-камеры будут недоступны из системы, если приложение не запущено на сервере. Довольно странно, но это меня спасло!!

person ArinCool    schedule 08.06.2014