Плагин для использования веб-камеры

Плагин jQuery для подключения веб камеры создает прозрачный слой для связи с камерой непосредственно с помощью JavaScript.

Описание

Данный плагин обеспечивает три различных режима для доступа к веб камере с помощью маленького API непосредственно с помощью JavaScript (точнее, с помощью jQuery). Таким образом, возможно получать изображение в элемент canvas (режим callback), сохранять изображение на сервере (режим save) и добавлять поток живого видео для элемента Flash (режим stream).

Сайт проекта плагина jQuery для подключения веб камеры

Общее описание интерфейса

$("#camera").webcam({
	width: 320,
	height: 240,
	mode: "callback",
	swffile: "jscam_canvas_only.swf",
	onTick: function() {},
	onSave: function() {},
	onCapture: function() {},
	debug: function() {},
	onLoad: function() {}
});

Параметры конфигурации

width
Ширина flash видео.

height
Высота flash видео. Если изменения вносятся в оба параметра, то нужно производить также изменения в Flash файле. Следуйте ниже приведенной инструкции для перекомпиляции swf файла после изменения размеров.

mode
Режим сохранения может иметь следующие значения: callback, save, stream. Детальное описание использования каждого параметра приводится ниже.

swffile
swf файл Flash видео, который обеспечивает API веб камеры. В архиве имеется два swf файла: jscam.swf, который содержит полную версию API, и jscam_canvas_only.swf, в который не включена библиотека для обработки JPEG (используется JPGEncoder AS 3 corelib). Второй файл имеет в три раза меньший размер.

onTick, onSave, onCapture
Возвратные функции, назначение которых описано ниже.

onLoad
Возвратная функция onLoad вызывается после завершения регистрации интерфейса. В приведенном примере используется функция, которая получает список всех доступных веб камер:

onLoad: function() {

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

Как только вызывается функция onLoad становится доступным глобальный объект window.webcam, который поддерживает следующие методы:

• capture([задержка])
  Захват изображения.
• save([файл])
  Сохранение захваченного изображения в соответствующем режиме хранения.
• getCameraList()
  Возвращает массив доступных веб камер. Если веб камер нет, генерируется исключение и возвращается пустой массив.
• setCamera([индекс])
  Переключение на другую камеру. Параметр явлется индексом элемента в массиве, возвращаемом методом getCameraList()

debug
Возвратная функция debug вызывается в том случае, если есть сообщение с информацией или об ошибке. В приведенном примере просто изменяется HTML содержимое контейнера вывода:

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

Режим callback

Возвратные функции используются для получения данных и записи их, например, в элемент canvas, как в приведенном примере

Работа происходит следующим образом. После завершения загрузки страницы и принятия установок безопасности для Flash, пользователь увидит картинку с веб камеры. Затем можно запустить метод window.capture(). Данный метод в качестве параметра принимает значение для времени задержки перед захватом изображения. Для индикации оставшегося времени вызывается метод onTick() каждую секунду. Данный метод получает в качестве параметра оставшееся время в секундах. В примере просто изменяется сообщение:

onTick: function(remain) {

    if (0 == remain) {
        jQuery("#status").text("Улыбочку!");
    } else {
        jQuery("#status").text(remain + " секунд осталось...");
    }
}

После завершения копирования вызывается метод onCapture, который в приведенном примере сразу же вызывает метод webcam.save() для записи изображения в элемент canvas. В коде примере также используется небольшая хитрость для имитации вспышки с помощью лайтбокса и метода jQuery fadeOut().

onCapture: function () {

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

	webcam.save();
}

Для каждой строки вызывается метод onSave(), который получает целые значения цвета CSV, разделенные точкой с запятой. Для записи данных в элемент canvas в примере используется следующая функция:

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 >= 4 * 320 * 240) {
        ctx.putImageData(img, 0, 0);
        pos = 0;
    }
}

Режим save

C точки зрения обработки режим save почти идентичен режиму callback. Разница заключается в том, что метод webcam.save() получает имя файла в качестве параметра. Затем сохраненное изображение отправляется с помощью HTTP_RAW_POST_DATA на сервер и может быть обработано с использованием следующего кода для сохранения или дальнейшей обработки (Внимание, проверка ввода здесь не рассматривается!).

webcam.save('/upload.php');

На стороне сервера можно получить изображение следующим образом:

<?php

$str = file_get_contents("php://input");
file_put_contents("/tmp/upload.jpg", pack("H*", $str));

?>

Режим stream

Режим stream также очень похож на режим callback. Разница заключается в том, что метод onSave вызывается непрерывно. Поток запускается с помощью метода webcam.capture(). Метод webcam.save() не действует.

Перекомпиляция Flash файлов

Если вы внесли изменения в код или просто поменяли размеры видео в файле спецификации XML, то нужно провести перекомпиляцию swf файла. Перекомпиляция запускается из консоли Linux с помощью файла Makefile. Для выполнения работы требуется два программных пакета: swfmill и mtasc, которые можно легко установить с помощью команды apt-get:

apt-get install swfmill mtasc
vim src/jscam.xml
make

Демонстрация