Захват видеокадра с WebRTC

Подключение камеры и получение фото с камеры

Ниже представлен интегрированный в контент страницы пример включения камеры и получение (захват) с неё видеокадра. Для включения камеры необходимо нажать соответствующую кнопку. Перед включением камеры открывается диалоговое окно с запросом к пользователю на получение разрешения. Подробное описание примера представлено ниже.

Включить камеру

Отключить камеру

Камера

Захват видеокадра

Фото с камеры

Примечание :
1. Чтобы пример функционировал под управлением Apache(2.4) и Tomcat необходимо использовать SSL-протокол, т.е. пример можно демонстрировать только при безопасном подключении.
2. При разработке примера под управлением IDE (Eclipse) SSL-протокол (SSL-сертификат) не требуется.

Описание примера

Листинг webcam.css

Содержимое css-файла незначительно отличается от исходного примера. Изменения касаются только включения в классы camera и output атрибутов float:left, чтобы секции размещались у левой границы страницы, и включения описания класса button для кнопок управления камерой.

Скрыть листинг webcam.css

#video {
  border: 1px solid black;
  box-shadow: 2px 2px 3px black;
  width:320px;
  height:240px;
}

#photo {
  border: 1px solid black;
  box-shadow: 2px 2px 3px black;
  width:320px;
  height:240px;
}

#canvas {
  display:none;
}

.camera {
  display:inline-block;
  float:left;
  width: 340px;
  height: 240px;
}

.output {
  display:inline-block;
  float:left;
  clear:left;
  width: 340px;
  height: 240px;
}

#startbutton {
  display:block;
  position:relative;
  margin-left:auto;
  margin-right:auto;
  bottom:32px;
  background-color: rgba(0, 150, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0px 0px 1px 2px rgba(0, 0, 0, 0.2);
  font-size: 14px;
  font-family: "Lucida Grande", "Arial", sans-serif;
  color: rgba(255, 255, 255, 1.0);
}
 

Описание webcam.js

Ниже представлен листинг скриптового файла webcam.js, в котором обозначена только структура : переменные и наименования методов. Наименования переменных отражают элементы доменной структуры страницы. Каждый из методов будет представлен отдельно. Переменная constraints в формате JSON определяет флаги используемых треков камеры : аудио не будет включено, только видео.

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

Скрыть листинг webcam.js

(function() {
    var width = 320;  // Ширина видеокадра
    var height = 0;   // Высота видеокадра будет вычислена

    // Флаг streaming показывает включение камеры
    var streaming = false;

    // Элементы HTML страницы, определяемые в методе init()
    var video       = null;
    var canvas      = null;
    var photo       = null;
    var startbutton = null;

    var startStream = null;
    var stopStream  = null;
  
    var constraints = window.constraints = 
                     {audio: false, video: true};

    function init()         {...}
    function clearphoto()   {...}
    function startup()      {...}
    function shutdown()     {...}
    function createphoto(ev){...}
    function takepicture()  {...}

    // Подключение слушателя для вызова метода init после 
    // загрузки страницы и формирования структуры DOM
    window.addEventListener('load', init, false);
})();
 

Листинг метода init

В методе init выполняется инициализация переменных с использованием метода document.getElementById(), т.е. «связываются» переменные с элементами DOM страницы. Кроме этого, к кнопкам управления камерой подключаются слушатели, которые определяют вызываемый при нажатии на кнопку метод. Методом clearphoto формируется изображение на странице.

Скрыть метод init

function init() {
    video       = document.getElementById('video'      );
    canvas      = document.getElementById('canvas'     );
    photo       = document.getElementById('photo'      );
    startbutton = document.getElementById('startbutton');

    startStream = document.getElementById('startStream');
    stopStream  = document.getElementById('stopStream' );

    startStream.addEventListener('click', startup , false);
    stopStream .addEventListener('click', shutdown, false);

    stopStream.disabled = true;

    clearphoto();
}
 

Листинг метода clearphoto

Метод clearphoto получает контекст невидимого canvas, используемый при рендеринге. Для всей канвы устанавливается фоновый цвет (#ddd). После этого, canvas конвертируется в изображение IMG/PNG и методом setAttribute() отображается цветовым фоном в элементе видеокадра (photo).

Скрыть метод clearphoto

function clearphoto() {
    var context = canvas.getContext('2d');
    context.fillStyle = "#ddd";
    context.fillRect(0, 0, canvas.width, canvas.height);

    var data = canvas.toDataURL('image/png');
    photo.setAttribute('src', data);
}
 

Листинг метода startup

Прежде чем переходить к описанию старта камеры необходимо рассмотреть объекты MediaDevices и Promice. Интерфейс MediaDevices предоставляет доступ к таким медиа-устройствам, как камера, микрофон, а также к совместному использованию экрана. По сути, он открывает доступ к любому устройству медиа-данных. Интерфейс Promise, представляюший собой «обертку» для объекта, неопределенного на момент создания, позволяет обрабатывать результаты асинхронных операций так, как если бы они были синхронными. Т.е. вместо конечного объекта асинхронного метода возвращается промис (обещание / promice) получить его в ближайшее время.

Объект Promise может находиться в одном из трёх состояний :

• pending : ожидание (начальное состояние);
• fulfilled : исполнено (успешное завершение операции);
• rejected : отклонено (операция завершена с ошибкой).

При создании объекта Promise находится в состоянии ожидания (pending). Затем он может перейти в состояние fulfilled, вернув полученный результат (объект), или быть отклоненным (rejected), вернув причину отказа. В каждом из этих случаев вызывается обработчик, прикрепленный к Promise : методы .then, .catch. (Если в момент вызова обработчика промис уже был исполнен или отклонен, то обработчик все равно будет выполнен). Здесь следует ещё пару слов сказать о прототипе для конструктора Promise, определяемого как Promise.prototype. И последнее : поскольку методы Promise.prototype.then() и Promise.prototype.catch() сами возвращают promise, то их можно связать в «цепочку».

Ну и теперь, после небольшого знакомства с интерфейсами и объектами, необходимыми нам для восприятия порядка включения камеры, можно перейти к коду метода startup, который будет вызван при нажатии кнопки startStream.

Вызовом метода MediaDevices.getUserMedia() с определенными параметрами constraints (видео без аудиопотока) мы получаем promice, который будет обработан либо методом .then при успешном выполнении, либо методом .catch при неуспешном. Каждый из этих методов в качестве параметра получает анонимную функцию с параметром : метод then параметр медиа-потока stream, а метод catch параметр ошибки err. Здесь следует добавить, что при вызове MediaDevices.getUserMedia() у пользователя будет запрошено разрешение на включение камеры.

Таким образом, при успешном включении камеры, промис передает объект медиа-потока stream в качестве параметра анонимной функции метода .then, который присваивается свойству srcObject элемента <video>, направляя в него поток. После этого, вызовом метода HTMLMediaElement.play(), запускаем воспроизведение видеопотока.

Метод обработки ошибки промиса catch вызывается в случае, если пользователь запретил к ней доступ, или к устройству подключена несовместимая камера.

После листинга метода представлено описание слушателя обработки события начала воспроизведения.

Скрыть метод startup

function startup() {
   navigator.mediaDevices.getUserMedia(constraints)
      .then(function(stream) {
         video.srcObject = stream;
         video.play();
      }).catch(function(err) {
         console.log("Ошибка подключения : " + err);
      });
	
   video.addEventListener('canplay', function(ev){
      if (!streaming) {
         height= video.videoHeight/(video.videoWidth/width);
         if (isNaN(height))
            height = width / (4/3);
      
         video .setAttribute('width' , width );
         video .setAttribute('height', height);
         canvas.setAttribute('width' , width );
         canvas.setAttribute('height', height);
         streaming = true;

         tracks = video.srcObject.getTracks();
         console.log('Использется видео-устройство: ' + 
                      tracks[0].label);
         startbutton.addEventListener('click',
                                       createphoto,
                                       false);
	     stopStream.disabled = false;
	     startStream.disabled = true;
      }
  }, false);
}
 

Слушатель события начала воспроизведения

Между командой старта камеры методом HTMLMedрiaElement.play() и началом воспроизведения имеется небольшой промежуток времени, в который устанавливается обработчик события canplay элемента video. В обработчике свойства элемента video конфигурируются на основе формата потока. Флаг streaming допускает только одноразовое выполнение кода. В обработчике корректируется высота видео на основе разницы в размерах между фактической шириной видео (video.videoWidth) и заданной width, на которую будет визуализироваться видео-поток. Методом Element.setAttribute() определяются свойства width и height элементов video и canvas, чтобы соответствовать друг другу.

Дополнительно в обработчике в консоль браузера выводится тип камеры, к кнопке захвата видео-кадра подключается слушатель и доступ к кнопкам управления камерой инвертируется.

Листинг метода shutdown

В методе останова камеры выполняется проверка её включения. Если камера работает, то сначала определяется список используемых треков, после чего каждый трек останавливается. Далее флаг работы камеры сбрасывается, слушатель кнопки захвата видеокадра отключается и доступ к кнопкам управления камерой инвертируется.

Скрыть метод shutdown

function shutdown() {
   // проверка работы камеры
   if (streaming) {
      // получаем список треков
      tracks = video.srcObject.getTracks();
      // закрываем каждый трек
      tracks.forEach(function(track) {
         // останов трека
         track.stop();
      });
      // сброс флага работы видекамеры
      streaming = false;
      // удаляем слушатель
      startbutton.removeEventListener('click', 
                                      createphoto,
                                      false);
      // инвертируем доступ к кнопкам
      stopStream .disabled = true;
      startStream.disabled = false;
   }
}
 

Листинг метода createphoto

Захват кадра выполняется методом createphoto, который связан со слушателем нажатия на кнопку startbutton. В методе createphoto вызывается takepicture, после чего вызывается метод Event.preventDefault для предупреждения повторного выполнения действия обработки события более одного раза.

Скрыть метод createphoto

function createphoto(event) {
    takepicture();
    event.preventDefault();
}

 

Листинг метода takepicture

Метод takepicture выполняет последовательно несколько действий : захват текущего видеокадра, конвертацию видеокадра в формат PNG, отображение видеокадра в HTMLImageElement'е photo. Видеокадр формируется в невидимом элементе canvas, размеры которого сначала переопределяются. Методом HTMLCanvasElement.toDataURL() изображение конвертируется в формат PNG. Последним действием вызывается метод photo.setAttribute(), отображая захваченное изображение в элементе изображения (HTMLImageElement).

Скрыть метод takepicture

function takepicture() {
    var context = canvas.getContext('2d');
    if (width && height) {
        canvas.width = width;
        canvas.height = height;
        context.drawImage(video, 0, 0, width, height);
    
        var data = canvas.toDataURL('image/png');
        photo.setAttribute('src', data);
    } else {
        clearphoto();
    }
}