Захват изображения в HTML5 с полным разрешением

Можно захватить изображение в javascript с помощью API MediaStream. Но для этого сначала необходимо создать экземпляр видеообъекта, а затем нарисовать кадр на холсте, чтобы получить изображение. Но, к сожалению, многие устройства (например, телефоны) не позволяют снимать видео с полным родным разрешением устройства. Например, на моем телефоне максимальное разрешение изображения порядка 4000x3000, а максимальное разрешение видео всего 1920x1080. Очевидно, что съемка изображения, разрешение которого составляет лишь 1/6 от доступного разрешения, неприемлема.

Итак, как я могу получить доступ к полному разрешению камеры на устройстве?


javascript html mediastream getusermedia
person Michael    schedule 29.03.2016    source источник
comment
Вы можете попробовать stackoverflow.com/q/17241707/918910   -  person jib    schedule 29.03.2016

Ответы (1)


arrow_upward
6
arrow_downward

Вы не можете записать изображение в полном разрешении с помощью MediaStream API, но вы можете использовать API Media Capture.

API MediaStream может передавать данные с камеры, но в виде видео с разрешением видео. Вот почему вы не можете делать фотографии с высоким разрешением.

В качестве альтернативы можно использовать API Media Capture. Он просто переопределяет элемент HTMLInput, добавляя capture=camera к параметру accept. В результате открывается родное фото-приложение, чтобы сделать снимок. В настоящее время (ноябрь 2017 г.) эта функция реализована только в мобильных браузерах, поэтому вам все равно нужно WebRTC в качестве запасного варианта, если вам нужно поддерживать эту функцию на рабочем столе.

Рабочий пример

var myInput = document.getElementById('myFileInput');

function sendPic() {
    var file = myInput.files[0];

    // Send file here either by adding it to a `FormData` object 
    // and sending that via XHR, or by simply passing the file into 
    // the `send` method of an XHR instance.
    
    console.log(file);
}

myInput.addEventListener('change', sendPic, false);
<input id="myFileInput" type="file" accept="image/*" capture="camera">

Я чувствую, что текущая ситуация с API MediaStream заключается в том, чтобы получить доступ к камере рабочего стола, а не использовать ее для фотографирования.

person Tom    schedule 07.04.2016
comment
На данный момент у меня работает capture=camera! Спасибо! - person Michael; 07.04.2016