Комментарий: Сделайте фото в HTML5 прежде всего, давайте посмотрим на структуру кода HTML. Конечно, эта часть контента DOM должна быть динамически загружена после того, как пользователь позволяет использовать события своей камеры. Заинтересованные друзья могут узнать об этом.
Демо -адрес: HTML5 фото демонстрацияВо -первых, давайте посмотрим на структуру HTML -кода. Конечно, эта часть содержимого DOM должна быть динамически загружена после того, как пользователь позволяет начинать использование событий камеры.
Примечание: мы используем разрешение 640x480. Если вы используете динамическую генерацию JS, вы можете гибко контролировать разрешение.
<!-
Заявление: Этот Div должен быть динамически сгенерирован после разрешения веб -камеры, веб -камеры
Ширина и высота: 640 * 480, конечно, ее можно динамически управлять!
->
<!-
В идеале эти элементы не создаются, пока не подтвердится, что
Клиент поддерживает видео/камеру, но ради иллюстрации
Элементы, они созданы с помощью разметки (не JavaScript)
->
<Видео Autoplay> </video>
<Tood> Snap Photo </button>
<Canvas> </canvas>
JavaScript
Пока создан вышеупомянутый элемент HTML, часть JavaScript будет проще, чем вы думаете:
// Установить прослушивание событий, DOM Content загружается, что похоже на эффект jQuery $ .ready ().
window.addeventlistener ("domcontentloaded", function () {
// элемент холста будет использоваться для захвата
var canvas = document.getelementbyid ("canvas"),
context = canvas.getContext ("2d"),
// Видеоэлемент, чтобы получить и воспроизводить поток данных камеры
video = document.getElementById ("Видео"),
videoobj = {"видео": true},
// Функция обратного вызова ошибки печатает сообщение об ошибке на консоли
errback = function (ошибка) {
if ("object" === typeof window.console) {
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);
}
// Слушайте событие кнопки фото
document.getElementById ("snap"). addEventListener ("click", function () {
// нарисовать на холсте
context.drawimage (видео, 0, 0, 640, 480);
});
}, ЛОЖЬ);
Наконец, не забудьте поместить свою веб -страницу на веб -сервер и получить доступ к ней через протокол HTTP.
Кроме того, версия браузера должна быть более новой и поддерживает новые функции, связанные с HTML5.
Переводчик не квалифицирован и не переведен в соответствии с исходным текстом. Используемый браузер - хром 28.
Наконец, опубликуйте полный код, который более жесткий.
<! Doctype html>
<html>
<голова>
<Title> Webcamera </title> браузер </title>
<Meta Content = "EditPlus">
<Meta Content = "[email protected]">
<Meta Content = "Извлечено:">
<Скрипт>
// Установить прослушивание событий, DOM Content загружается, что похоже на эффект jQuery $ .ready ().
window.addeventlistener ("domcontentloaded", function () {
// элемент холста будет использоваться для захвата
var canvas = document.getelementbyid ("canvas"),
context = canvas.getContext ("2d"),
// Видеоэлемент, чтобы получить и воспроизводить поток данных камеры
video = document.getElementById ("Видео"),
videoobj = {"видео": true},
// Функция обратного вызова ошибки печатает сообщение об ошибке на консоли
errback = function (ошибка) {
if ("object" === typeof window.console) {
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);
}
// Слушайте событие кнопки фото
document.getElementById ("snap"). addEventListener ("click", function () {
// нарисовать на холсте
context.drawimage (видео, 0, 0, 640, 480);
});
}, ЛОЖЬ);
</script>
</head>
<тело>
<div>
<!-
Заявление: Этот Div должен быть динамически сгенерирован после разрешения веб -камеры, веб -камеры
Ширина и высота: 640 * 480, конечно, ее можно динамически управлять!
->
<!-
В идеале эти элементы не создаются, пока не подтвердится, что
Клиент поддерживает видео/камеру, но ради иллюстрации
Элементы, они созданы с помощью разметки (не JavaScript)
->
<Видео Autoplay> </video>
<Tood> Snap Photo </button>
<Canvas> </canvas>
</div>
</body>
</html>