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

Так же можно добавлять поток живого видео для элемента Flash (режим stream). Весьма широкими функциями обладает данный плагин, все ограничивается лишь фантазией разработчика.

Создаем общий вид интерфейса:

Вот некоторые параметры:

  • width - Ширина flash видео.
  • height - Высота flash видео. Если изменения вносятся в оба параметра, то нужно производить также изменения в Flash файле. Следуйте ниже приведенной инструкции для перекомпиляции swf файла после изменения размеров.
  • mode - Режим сохранения может иметь следующие значения: callbacksavestream. Детальное описание использования каждого параметра приводится ниже.
  • swffile -swf файл Flash видео, который обеспечивает API веб-камеры. В архиве имеется два swf файла: jscam.swf, который содержит полную версию API, и jscam_canvas_only.swf, в который не включена библиотека для обработки JPEG (используется JPGEncoder AS 3 corelib). Второй файл имеет в три раза меньший размер.
  • onTickonSaveonCapture - Возвратные функции, назначение которых описано ниже.
  • onLoad -Возвратная функция onLoad вызывается после завершения регистрации интерфейса. В приведенном примере используется функция, которая получает список всех доступных веб-камер:

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

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

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

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

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

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

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

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

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

Читайте также: