Komentar: API klien pada perangkat seluler dan komputer desktop tidak disinkronkan pada awalnya. Awalnya, selalu ada beberapa fitur dan API yang sesuai pada perangkat seluler terlebih dahulu, tetapi perlahan -lahan, API ini akan muncul di komputer desktop. Salah satu teknologi antarmuka aplikasi adalah API Getusermedia, yang memungkinkan pengembang aplikasi untuk mengakses kamera pengguna atau kamera bawaan.
API klien pada perangkat seluler dan komputer desktop tidak disinkronkan pada awalnya. Awalnya, selalu ada beberapa fitur dan API yang sesuai pada perangkat seluler terlebih dahulu, tetapi perlahan -lahan, API ini akan muncul di komputer desktop. Salah satu teknologi antarmuka aplikasi adalah API Getusermedia, yang memungkinkan pengembang aplikasi untuk mengakses kamera pengguna atau kamera bawaan. Izinkan saya menunjukkan cara mengakses kamera Anda melalui browser dan mengekstrak tangkapan layar.
Kode HTML
Saya telah menulis beberapa komentar dalam kode berikut, silakan baca:
<!-
Idealnya kita harus terlebih dahulu menentukan apakah perangkat Anda menyala
Ada kamera atau kamera, tetapi untuk kesederhanaan, kami di sini secara langsung
Tulis tag html alih -alih menggunakan javascript untuk menilai terlebih dahulu
Kemudian secara dinamis menghasilkan tag ini
->
<Video AutoPlay> </dide>
<button> Snap Photo </button>
<Canvas> </an Canvas>
Sebelum menulis tag di atas, Anda harus menentukan apakah klien pengguna memiliki dukungan kamera. Namun, agar tidak terlalu merepotkan, tag HTML ini ditulis langsung di sini. Perlu dicatat bahwa panjang dan lebar yang kami gunakan di sini adalah 640 × 480.
Kode JavaScript
Karena kami menulis HTML dengan tangan, kode JS berikut akan jauh lebih sederhana dari yang Anda pikirkan.
// Letakkan pendengar acara
window.addeventListener ("domContentLoaded", function () {
// ambil elemen, buat pengaturan, dll.
var canvas = document.geteLementById ("canvas"),
context = canvas.getContext ("2d"),
video = document.geteLementById ("video"),
Videoobj = {"video": true},
errback = function (error) {
console.log ("Kesalahan pengambilan video:", error.code);
};
// Letakkan pendengar video di tempatnya
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);
}
lain jika (navigator.mozgetusermedia) {// firefox-prefixed
navigator.mozgetusermedia (videoobj, function (stream) {
Video.src = window.url.createObjecturl (stream);
Video.play ();
}, errback);
}
}, PALSU);
Setelah ditentukan bahwa browser pengguna mendukung Getusermedia, berikut ini sangat sederhana. Anda hanya perlu mengatur SRC elemen video itu ke koneksi video langsung kamera pengguna. Itu semua hal yang perlu Anda lakukan untuk mengakses kamera Anda dengan browser!
Fungsi mengambil foto hanya dapat dikatakan sedikit lebih rumit. Kami menambahkan monitor ke tombol untuk menggambar video di kanvas.
// memicu tindakan foto
document.geteLementById ("snap")
.addeventListener ("klik", function () {
Context.drawimage (video, 0, 0, 640, 480);
});
Tentu saja, Anda juga dapat menambahkan beberapa efek filter ke gambar ...
Di masa lalu, kami perlu menggunakan plug-in pihak ketiga untuk mengakses kamera pengguna dari browser, yang agak rumit. Sekarang kami hanya membutuhkan teknologi Canvas HTML5 dan JavaScript untuk mengoperasikan kamera pengguna dengan mudah dan cepat. Ini bukan hanya tentang mengakses kamera, tetapi juga karena teknologi kanvas HTML5 sangat kuat sehingga kita dapat menambahkan berbagai efek filter yang menarik ke gambar. Sekarang, gunakan kamera Anda sendiri untuk mengambil foto diri Anda di browser Anda!