Комментарий: API -интерфейсы клиентов на мобильных устройствах и настольных компьютерах сначала не были синхронизированы. Первоначально сначала есть некоторые функции и соответствующие API на мобильных устройствах, но медленно эти API появятся на настольных компьютерах. Одной из технологий интерфейса приложения является API GetUsermedia, который позволяет разработчикам приложений получать доступ к камерам пользователей или встроенные камеры.
Клиентские API на мобильных устройствах и настольных компьютерах сначала не были синхронизированы. Первоначально сначала есть некоторые функции и соответствующие API на мобильных устройствах, но медленно эти API появятся на настольных компьютерах. Одной из технологий интерфейса приложения является API GetUsermedia, который позволяет разработчикам приложений получать доступ к камерам пользователей или встроенные камеры. Позвольте мне показать вам, как получить доступ к вашей камере через браузер и извлечь скриншоты.
HTML -код
Я написал несколько комментариев в следующем коде, пожалуйста, прочитайте:
<!-
В идеале мы должны сначала определить, включено ли ваше устройство
Есть камеры или камеры, но для простоты мы здесь напрямую
Напишите теги HTML вместо использования JavaScript для суждения сначала
Затем динамически генерируйте эти теги
->
<Видео Autoplay> </video>
<Tood> Snap Photo </button>
<Canvas> </canvas>
Перед написанием вышеуказанных тегов вы должны определить, имеет ли клиент пользователя поддержку камеры. Однако, чтобы не быть таким неприятным, эти теги HTML написаны непосредственно здесь. Следует отметить, что длина и ширина, которую мы используем здесь, 640 × 480.
Код JavaScript
Поскольку мы пишем HTML вручную, следующий код JS будет намного проще, чем вы думаете.
// Поместите слушателей событий на место
window.addeventlistener ("domcontentloaded", function () {
// захватывать элементы, создавать настройки и т. Д.
var canvas = document.getelementbyid ("canvas"),
context = canvas.getContext ("2d"),
video = document.getElementById ("Видео"),
videoobj = {"видео": true},
errback = function (ошибка) {
console.log («Ошибка захвата видео:», error.code);
};
// Поставьте видео слушателей
if (navigator.getusermedia) {// стандарт
navigator.getusermedia (videoobj, function (stream) {
video.src = stream;
video.play ();
}, errback);
} else if (navigator.webkitgetgeSermedia) {// webkit-prefixed
navigator.webkitgetUsermedia (videoobj, function (stream) {
video.src = window.webkiturl.createobjecturl (stream);
video.play ();
}, errback);
}
else if (navigator.mzgetusermedia) {// Firefox-Prefixed
navigator.mzgetusermedia (videoobj, function (stream) {
video.src = window.url.createobjecturl (stream);
video.play ();
}, errback);
}
}, ЛОЖЬ);
Как только я определяется, что браузер пользователя поддерживает Getusermedia, следующее очень просто. Вам нужно только установить SRC этого видео элемента на видео -подключение к камере пользователя. Это все, что вам нужно сделать, чтобы получить доступ к вашей камере с помощью браузера!
Функция фотографирования может быть только немного сложнее. Мы добавляем монитор в кнопку, чтобы нарисовать видео на холсте.
// запустить фотоаппарат
Document.getElementById ("Snap")
.AdDeventListener ("click", function () {
context.drawimage (видео, 0, 0, 640, 480);
});
Конечно, вы также можете добавить некоторые эффекты фильтра на картинку ...
В прошлом нам нужно было использовать сторонние плагины для доступа к камере пользователя из браузера, что было немного сложным. Теперь нам нужна только технология HTML5 Canvas и JavaScript, чтобы легко и быстро управлять камерами пользователей. Речь идет не только о доступе к камере, но и в том, что технология холста HTML5 настолько мощна, что мы можем добавить различные захватывающие эффекты фильтра на картинки. Теперь используйте свою собственную камеру, чтобы сфотографировать себя в своем браузере!