Komentar: Ambil foto di HTML5 pertama -tama, mari kita lihat struktur kode HTML. Tentu saja, bagian dari konten DOM ini harus dimuat secara dinamis setelah pengguna memungkinkan penggunaan acara kamera mereka. Teman yang tertarik dapat mempelajarinya.
Alamat demo: demonstrasi foto html5Pertama, mari kita lihat struktur kode HTML. Tentu saja, bagian dari konten DOM ini harus dimuat secara dinamis setelah pengguna memungkinkan penggunaan acara kamera mereka untuk memulai.
Catatan: Kami menggunakan resolusi 640x480. Jika Anda menggunakan JS Dynamic Generation, Anda dapat mengontrol resolusi secara fleksibel.
<!-
Pernyataan: Div ini harus dihasilkan secara dinamis setelah mengizinkan webcam, webcam
Lebar dan Tinggi: 640 * 480, tentu saja, dapat dikontrol secara dinamis!
->
<!-
Idealnya elemen -elemen ini tidak dibuat sampai dikonfirmasi bahwa
klien mendukung video/kamera, tetapi demi menggambarkan
elemen yang terlibat, mereka dibuat dengan markup (bukan javascript)
->
<Video AutoPlay> </dide>
<button> Snap Photo </button>
<Canvas> </an Canvas>
Javascript
Selama elemen HTML di atas dibuat, bagian JavaScript akan lebih sederhana dari yang Anda pikirkan:
// Setel acara mendengarkan, konten DOM dimuat, yang mirip dengan efek $ .ready () JQuery.
window.addeventListener ("domContentLoaded", function () {
// Elemen kanvas akan digunakan untuk ditangkap
var canvas = document.geteLementById ("canvas"),
context = canvas.getContext ("2d"),
// Elemen video, untuk menerima dan memutar aliran data kamera
video = document.geteLementById ("video"),
Videoobj = {"video": true},
// Fungsi panggilan balik kesalahan mencetak pesan kesalahan di konsol
errback = function (error) {
if ("objek" === typeof window.console) {
console.log ("Kesalahan pengambilan video:", error.code);
}
};
// Letakkan pendengar video di tempatnya
// untuk browser standar
if (navigator.getusermedia) {// standar
navigator.getusermedia (videoobj, function (stream) {
Video.src = stream;
Video.play ();
}, errback);
} lain jika (navigator.webkitgetusermedia) {// Webkit-prefixed
navigator.webkitgetusermedia (videoobj, fungsi (stream) {
Video.src = window.webkiturl.createObjecturl (stream);
Video.play ();
}, errback);
}
// Dengarkan acara tombol foto
document.geteLementById ("snap"). addeventListener ("klik", function () {
// menggambar di atas kanvas
Context.drawimage (video, 0, 0, 640, 480);
});
}, PALSU);
Akhirnya, ingatlah untuk meletakkan halaman web Anda di bawah server web dan mengaksesnya melalui protokol HTTP.
Selain itu, versi browser harus lebih baru dan mendukung fitur terkait HTML5 baru.
Penerjemah tidak memenuhi syarat dan belum diterjemahkan sesuai dengan teks aslinya. Browser yang digunakan adalah Chrome 28.
Akhirnya, posting kode lengkap, yang lebih kaku.
<! Doctype html>
<Html>
<head>
<title> browser webcamera </iteme>
<meta content = "editplus">
<meta content = "[email protected]">
<meta content = "dinyatakan oleh:">
<script>
// Setel acara mendengarkan, konten DOM dimuat, yang mirip dengan efek $ .ready () JQuery.
window.addeventListener ("domContentLoaded", function () {
// Elemen kanvas akan digunakan untuk ditangkap
var canvas = document.geteLementById ("canvas"),
context = canvas.getContext ("2d"),
// Elemen video, untuk menerima dan memutar aliran data kamera
video = document.geteLementById ("video"),
Videoobj = {"video": true},
// Fungsi panggilan balik kesalahan mencetak pesan kesalahan di konsol
errback = function (error) {
if ("objek" === typeof window.console) {
console.log ("Kesalahan pengambilan video:", error.code);
}
};
// Letakkan pendengar video di tempatnya
// untuk browser standar
if (navigator.getusermedia) {// standar
navigator.getusermedia (videoobj, function (stream) {
Video.src = stream;
Video.play ();
}, errback);
} lain jika (navigator.webkitgetusermedia) {// Webkit-prefixed
navigator.webkitgetusermedia (videoobj, fungsi (stream) {
Video.src = window.webkiturl.createObjecturl (stream);
Video.play ();
}, errback);
}
// Dengarkan acara tombol foto
document.geteLementById ("snap"). addeventListener ("klik", function () {
// menggambar di atas kanvas
Context.drawimage (video, 0, 0, 640, 480);
});
}, PALSU);
</script>
</head>
<body>
<div>
<!-
Pernyataan: Div ini harus dihasilkan secara dinamis setelah mengizinkan webcam, webcam
Lebar dan Tinggi: 640 * 480, tentu saja, dapat dikontrol secara dinamis!
->
<!-
Idealnya elemen -elemen ini tidak dibuat sampai dikonfirmasi bahwa
klien mendukung video/kamera, tetapi demi menggambarkan
elemen yang terlibat, mereka dibuat dengan markup (bukan javascript)
->
<Video AutoPlay> </dide>
<button> Snap Photo </button>
<Canvas> </an Canvas>
</div>
</body>
</html>