Как получить доступ к видео с камеры в браузере
А вот интересная задача. Хочу сделать веб приложение под браузер, в котором нужно получить доступ к веб-камере. Снимать видео-поток и производить манипуляции. Вроде бы все просто, у нас есть различные 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, вам будет предложены все варианты получения медиаконтента: от камеры до фотопотока.
Демо
getUserMedia в iOS
К сожалению на сегодня (конец 2016 года) в Safari (да и в любом браузере на iOS) невозможно получить доступ видеопотоку. Если вы знаете как это сделать, то напишите в комментариях. Мне будет очень интересно.