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

Важно! Работать с камерой можно только на сайте с защищенным протоколом https.

Для начало разберемся с кросс-браузерностью.
Нам понадобится функция для получения списка медиа устройств.
if (navigator.mediaDevices && navigator.mediaDevices.enumerateDevices) {
     navigator.enumerateDevices = function(callback) {
          navigator.mediaDevices.enumerateDevices().then(callback);
     };
}

if (!navigator.enumerateDevices && window.MediaStreamTrack && window.MediaStreamTrack.getSources) {
     navigator.enumerateDevices = window.MediaStreamTrack.getSources.bind(window.MediaStreamTrack);
}
А так же для получение самой трансляции с камеры
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
В GCF.js в версии 3.12 от 25.08.2016, код выше выполнит функция GCF.device.media.init 

Теперь получим список медиа устройств девайса и сохраним id только видео входов
var camers = [];
navigator.enumerateDevices(function(devices) {
     devices.forEach(function(device) {
          if (device.kind == 'videoinput') {
               camers.push(device.deviceId);
          }
     });
});

Получим трансляцию с камеры по id
camera = document.getElementById('camera');
function getVideo(id) {
     if (window.stream) {
          camera.src = null;
          window.stream.getTracks()[0].stop();
     }
     if (navigator.getUserMedia) {    
          navigator.getUserMedia({
               video: {
                    optional: [{
                         sourceId: id
                    }],
                    deviceId: id
               }
          }, handleVideo, handleError);
     }
}
function handleVideo(stream) {
     window.stream = stream;
     camera.src = window.URL.createObjectURL(stream);
}
function handleError(){}
В camera храним DOM элемент с тегом video, в нем и будет отображаться видео с камеры
navigator.getUserMedia - получит трансляцию и передаст её в handleVideo, в случае ошибки, вызовется handleError
Отдельное внимание стоит обратить на аргументы для getUserMedia, deviceId по идее должно быть достаточно, в отличие от остальных браузеров, Chrome требовал не понятно чего, при этом отдавал трансляцию только с одной камеры, причем не обращая внимание на переданный id. Перепробовав множество спецификаций, выяснялось, что ему нужно следующее: optional: [{sourceId: id}]
Совмещенная функция getVideo и handleVideo вошли в GCF.js 3.12, как GCF.device.media.getVideo

Ну и напоследок съемка фото, а точнее кадра с трансляции
function photo() {
     var
          canvas = document.getElementById('photo'),
          ctx = canvas.getContext('2d');
     ctx.drawImage(camera, 0, 0, camera.videoWidth, camera.videoHeight);
}
Передадим в первом аргументе к drawImage DOM элемент video с трансляцией.
0, 0 - помещаем в верхний левый угол
camera.videoWidth, camera.videoHeight - ширина и высота видео, для сохранения пропорций.