Как получить доступ к видео с камеры в браузере

А вот интересная задача. Хочу сделать веб приложение под браузер, в котором нужно получить доступ к веб-камере. Снимать видео-поток и производить манипуляции. Вроде бы все просто, у нас есть различные HTML5 API для этих целей. Но не так все гладко. Даже вообще не гладко, к сожалению…

Сначала давайте разберемся, можно ли вообще получить доступ к веб-камере из веб-страницы.

Получаем фото в iOS из браузера

Для получения любого файла из браузера мы создаем тег input с типом file. Для того, чтобы был доступ к фото, мы указываем аттрибут accept. Разрешаем загружать только фотографии:

<input type="file" accept="image/*" capture="camera">

Получаем доступ к фото

Если мы делаем простое веб-приложение, по типу инстаграма, то нам нужно получить доступ к загруженному изображению. Сделать это просто. Код HTML выглядит так:

<input type="file" accept="image/*" capture="camera" id="pic">
<img id="img">

Ну и немного JS:

if (!('URL' in window) && ('webkitURL' in window))
window.URL = window.webkitURL;
$(f=>{
$('#pic').on('change', function(e){
if (e.target.files.length == 1 &&      
           e.target.files[0].type.indexOf("image/") == 0
       ){
$('#img').attr(
             'src',
URL.createObjectURL(e.target.files[0])
           )
       }
   })
})

Получаем видео из браузера в iOS

Разрешаем загружать только видео:

<input type="file" accept="video/*" capture="camcorder">

В случае, если не задавать атрибут capture, вам будет предложены все варианты получения медиаконтента: от камеры до фотопотока.


Демо

http://ios.majorov.su/


getUserMedia в iOS

К сожалению на сегодня (конец 2016 года) в Safari (да и в любом браузере на iOS) невозможно получить доступ видеопотоку. Если вы знаете как это сделать, то напишите в комментариях. Мне будет очень интересно.