Penjelasan praktis mendetail tentang fungsi foto dan kamera HTML5

Baru-baru ini, saya sedang mengerjakan aplikasi kamera cloud untuk aplikasi chrome. Aplikasi tersebut mencakup fungsi inti seperti mengambil gambar, merekam video, menyimpan foto dan video, mengunggah file, dll., yang melibatkan banyak API HTML5 yang terkait dengan streaming media. Tujuan penulisan artikel ini adalah, pertama, untuk merangkum dan memilah poin-poin pengetahuan, dan yang terpenting, untuk memberikan panduan kepada pembaca yang memiliki kebutuhan relevan.

Catatan: Artikel ini didasarkan pada pertarungan sebenarnya dan tidak memperkenalkan terlalu banyak pengetahuan teoretis.

GetUserMedia API HTML5 memberi pengguna antarmuka untuk mengakses media perangkat keras (kamera, video, audio, lokasi geografis, dll.). Berdasarkan antarmuka ini, pengembang dapat mengakses perangkat media perangkat keras tanpa bergantung pada plug-in browser apa pun.

Kompatibilitas browser adalah sebagai berikut:

Seperti yang Anda lihat dari gambar di atas, browser mainstream Firefox, Chrome, Safari, Opera, dll. memiliki dukungan penuh.

 <id video=putar otomatis video></video> --------------------------------------- ----------------------- const videoConstraints = { lebar: 1366, tinggi: 768 }; const videoNode = document.querySelector('#video'); stream = menunggu navigator.mediaDevices.getUserMedia({ audio: true, video: videoConstraints }); videoNode.srcObject = streaming; videoNode.bermain();

 // enumerateDevices mendapatkan semua perangkat media const mediaDevices = menunggu navigator.mediaDevices.enumerateDevices(); // Filter untuk mendapatkan perangkat kamera melalui atribut raja instance perangkat videoinput const videoDevices = mediaDevices.filter(item => item.kind === 'videoinput ') ||. []; // Dapatkan kamera depan const videoDeviceId = videoDevices[0].deviceId; videoConstraints = { deviceId: { tepat: videoDeviceId }, lebar: 1366, tinggi: 768 }; let stream = menunggu navigator.mediaDevices.getUserMedia({ audio: true, video: videoConstraints }); // Dapatkan kamera belakang const videoDeviceId = videoDevices[1].deviceId; const videoConstraints = { deviceId: { tepat: videoDeviceId }, lebar: 1366, tinggi: 768 }; let stream = menunggu navigator.mediaDevices.getUserMedia({ audio: true, video: videoConstraints });

 // Tangkap aliran video melalui kanvas dan buat gambar format base64 const canvas = document.createElement('canvas'); const konteks = canvas.getContext('2d'); konteks.drawImage(videoNode, 0, 0, canvas.width, canvas.height); // Unduh fungsi gambar unduh (src) { if (!src) return; const a = document.createElement('a'); a.setAttribute('download', new Date()); .klik(); }

 let stream = menunggu navigator.mediaDevices.getUserMedia({ audio: true, video: videoConstraints }); // Matikan kamera setelah 3 detik setTimeout(function () { stream.getTracks().forEach(track => track.stop( )) ; aliran = nol; }, 3000);

Ini melengkapi fungsi pengambilan kamera sederhana

Proses dasar fotografi adalah merekam aliran video dan menyimpannya sebagai file audio dan video. Objek HTML5 MediaRecorder menyediakan fungsi perekaman multimedia dan perekaman video.

Kompatibilitas browser adalah sebagai berikut:

Seperti yang ditunjukkan pada gambar di atas, kompatibilitas browser dengan MediaRecorder jauh lebih rendah daripada getUserMedia. Saat ini, hanya Chrome dan Firefox yang memiliki dukungan lebih baik untuk MediaRecorder.

==Catatan: Tag video pemutar pratinjau kamera harus disetel ke senyap (untuk menghilangkan kebisingan keras yang disebabkan oleh gema)==

 const videoConstraints = { lebar: 1366, tinggi: 768 }; biarkan streaming = menunggu navigator.mediaDevices.getUserMedia({ audio: true, video: videoConstraints }); / Rekam aliran data mediaRecorder.ondataavailable = (e) => { mediaRecorderChunks.push(e.data }; mediaRecorder.onstop = (e) => { // Membuat instance data biner file melalui objek Blob. biarkan recorderFile = new Blob(mediaRecorderChunks, { 'type' : mediaRecorder.mimeType }); mediaRecorderChunks = []; const file = new File([this.recorderFile], (Tanggal baru).toISOString().replace(/:| /./g, '-') + '.mp4', { ketik: 'video/mp4' }); unduh(URL.createObjectURL(file)); // Unduh fungsi video unduh (src) { if (!src) return; const a = document.createElement('a'); )); a.href = src; a.click();

Melalui latihan praktis di atas, saya yakin pembaca telah menguasai fungsi dasar kamera, seperti mengambil gambar, merekam video, menyimpan file, dll. Karena proyek aplikasi ini bukan proyek pribadi dan kode sumbernya bukan untuk umum, mereka yang tertarik mungkin ingin mencobanya.