API HTML Media Capture по сравнению с getUserMedia()

В настоящее время я пытаюсь сделать что-то очень простое (ну, на самом деле, я думал, что это просто...): Я хочу сделать снимок с веб-камеры в веб-приложении.

Я наткнулся на две возможности:

1. HTML Media Capture API, который выглядит очень просто:

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

2. JavaScript-медиа-потоки, которые также выглядят довольно легко:

navigator.getUserMedia()

И вот мой вопрос:

API HTML Capture API не работает в настольных браузерах, а медиа-потоки JavaScript не работают на iOS. Так какой я должен взять? И то и другое? Какой из них будет разработан в будущем? Какой из них является предпочтительным? Какой из них вы предпочитаете? Существуют ли какие-либо недостатки в одном решении, которое я не вижу в таком тарифе (кроме совместимости?).

Спасибо.

BTW: Я не опытный разработчик HTML/JavaScript, поэтому, пожалуйста, будьте добры;)

Ответ 1

вот пример http://html5.by/blog/demo/image-capture-getusermedia/ и вот статья, которая может вам помочь http://html5.by/blog/html5-image-capture-getusermedia-stream-api-mirror/ жаль, что это по-русски, но пример работает, и вы можете проверить код + google translate:)

надеюсь, что это поможет

Ответ 2

Мобильные браузеры

Используйте HTML Media Capture для захвата изображения непосредственно с камеры:

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

Android (3.0+) перейдет прямо к камере. Вот как это будет выглядеть после стилизации CSS:

iOS (6-10) все равно предоставит вам возможность выбрать существующую фотографию, так как она не поддерживает capture. Подробнее см. Исправить синтаксис для HTML Media Capture.

Настольные браузеры:

1) Доступ к веб-камере: используйте MediaStream API getUserMedia:

navigator.getUserMedia или более новое обещание navigator.mediaDevices.getUserMedia

2) Используйте холст, чтобы сделать снимок

Пример Дэвида Уолша охватывает оба шага на рабочем столе.