HTML5 Canvas JS mengawal kamera pada komputer atau telefon mudah alih anda instance_html5 kemahiran tutorial

API pelanggan pada peranti mudah alih dan komputer meja pada mulanya tidak disegerakkan. Pada mulanya, fungsi tertentu dan API yang sepadan akan sentiasa tersedia pada peranti mudah alih, tetapi perlahan-lahan, API ini akan muncul pada komputer meja. Salah satu teknologi antara muka aplikasi tersebut ialah getUserMedia API, yang membolehkan pembangun aplikasi mengakses kamera pengguna atau kamera terbina dalam. Biar saya tunjukkan cara untuk mengakses kamera anda melalui penyemak imbas dan mengekstrak tangkapan skrin.

Kod HTML

Saya menulis beberapa ulasan dalam kod di bawah, sila baca:

Salin kod

Kod adalah seperti berikut :

Sebelum menulis teg di atas, anda harus menentukan sama ada pelanggan pengguna mempunyai sokongan kamera, tetapi untuk mengelakkan masalah, teg HTML ini ditulis terus di sini Perlu diingat bahawa panjang dan lebar yang kami gunakan di sini ialah 640×480.

Kod JavaScript

Oleh kerana kami menulis HTML secara manual, kod js berikut adalah lebih mudah daripada yang anda fikirkan.

Salin kod

Kod tersebut adalah seperti berikut:

// Letakkan pendengar acara pada tempatnya
window.addEventListener("DOMContentLoaded", function() {
// Dapatkan elemen, buat tetapan, dsb.
var canvas = document.getElementById("kanvas"),
konteks = canvas.getContext("2d"),
video = document.getElementById("video"),
videoObj = { "video": benar },
errBack = fungsi(ralat) {
console.log("Ralat tangkapan video: ", error.code); };
// Letakkan pendengar video pada tempatnya
if(navigator.getUserMedia) { // Standard
navigator.getUserMedia(videoObj, function(strim) {
video.src = strim;
video.play();
}, errBack);
} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
navigator.webkitGetUserMedia(videoObj, function(strim){
video.src = window.webkitURL.createObjectURL(strim);
video.play();
}, errBack);
}
else if(navigator.mozGetUserMedia) { // awalan Firefox
navigator.mozGetUserMedia(videoObj, function(strim){
video.src = window.URL.createObjectURL(strim);
video.play();
}, errBack);
}
}, palsu);

Setelah ditentukan bahawa pelayar pengguna menyokong getUserMedia, perkara berikut adalah sangat mudah Anda hanya perlu menetapkan src elemen video kepada sambungan video langsung kamera pengguna. Itu sahaja yang anda perlu lakukan untuk mengakses kamera menggunakan penyemak imbas anda!
Fungsi mengambil gambar hanya boleh dikatakan rumit sedikit. Kami menambah pendengar pada butang dan melukis skrin video ke kanvas.

Salin kodKod tersebut adalah seperti berikut:

//Cetuskan tindakan foto
document.getElementById("snap")
.addEventListener("klik", function() {
context.drawImage(video, 0, 0, 640, 480);
});

Sudah tentu, anda juga boleh menambah beberapa kesan penapis pada gambar…
Pada masa lalu, kami perlu menggunakan pemalam pihak ketiga untuk mengakses kamera pengguna daripada penyemak imbas, yang agak rumit. Kini kami hanya memerlukan teknologi kanvas HTML5 dan javaScript, kami boleh mengendalikan kamera pengguna dengan mudah dan cepat. Bukan sahaja akses kepada kamera, tetapi juga kerana teknologi kanvas HTML5 yang berkuasa, kami boleh menambah pelbagai kesan penapis yang menawan pada gambar. Sekarang, ambil gambar diri anda dengan kamera anda sendiri dalam penyemak imbas anda!