Webcam Photo Booth Gratis

Cara kerja

1. Izinkan kamera: klik «Mulai kamera» dan berikan akses ketika peramban memintanya.
2. Sesuaikan opsi: pilih filter, aktifkan mode cermin, dan tetapkan pengatur waktu jika Anda ingin memposisikan diri sebelum pengambilan.
3. Ambil dan unduh: klik «Ambil foto». Foto-foto terkumpul di galeri, siap untuk diunduh secara individual atau dalam batch.

Pertanyaan yang sering diajukan

Apakah foto saya dikirim secara online?

Tidak. Semua pemrosesan terjadi di peramban Anda melalui API MediaDevices; gambar tidak pernah meninggalkan perangkat Anda. Tidak ada server yang melihat atau menyimpan aliran video Anda.

Mengapa kamera tidak menyala?

Periksa apakah Anda telah mengizinkan akses kamera di pengaturan peramban, situs disajikan melalui HTTPS (wajib untuk akses kamera), dan tidak ada aplikasi lain yang sudah menggunakannya.

Bisakah saya memilih di antara beberapa webcam?

Ya. Jika beberapa kamera terhubung, pemilih «Kamera» mencantumkan semuanya: webcam terintegrasi, webcam USB eksternal, kamera virtual, dll.

Cara kerja webcam browser sebenarnya

Akses kamera browser diatur oleh spesifikasi W3C Media Capture and Streams. Titik masuknya adalah navigator.mediaDevices.getUserMedia(): sebuah fungsi yang dipanggil halaman dengan objek constraints yang mendeskripsikan jenis stream yang diinginkan. Browser menampilkan prompt izin; jika Anda mengizinkannya, fungsi tersebut diselesaikan dengan objek MediaStream yang berisi satu atau lebih trek video. Halaman mengikat stream tersebut ke elemen <video> melalui video.srcObject = stream, umpan langsung ditampilkan di layar, dan menangkap frame kemudian hanya perlu menggambar video ke HTML5 <canvas> saat pengguna mengklik Ambil Foto. Canvas diekspor melalui canvas.toBlob('image/jpeg'), yang menjadi JPG yang dapat diunduh. Tidak ada frame yang pernah meninggalkan perangkat Anda, seluruh pipeline ada di proses browser Anda.

getUserMedia berbasis promise dikirimkan tanpa awalan di Chrome 53 (September 2016) dan Firefox 36 (Februari 2015). Safari yang tertinggal: akses webcam dari halaman web tidak tersedia di iOS hingga iOS 11 (September 2017), dan target stabil modern adalah iOS 14.5 atau lebih baru. Pada tahun 2026 API ini pada dasarnya bersifat universal, caniuse menempatkan dukungan global di atas 97%.

Mengapa HTTPS Wajib

getUserMedia dibatasi untuk «konteks aman», HTTPS, localhost di desktop, atau file:// di Firefox. Halaman yang dilayani melalui HTTP tidak dapat mengakses kamera sama sekali; panggilan ditolak dengan NotAllowedError. Ini adalah bug paling umum saat deployment untuk varian yang dihosting sendiri dari alat semacam ini, dan diterapkan secara seragam oleh setiap browser modern. Perangkat mobile bahkan lebih ketat: tidak ada pengecualian localhost di ponsel, sehingga menguji alat kamera di server dev lokal memerlukan alat tunnelling seperti ngrok atau reverse proxy dengan TLS.

Constraints, cara meminta kamera yang tepat

Objek constraints adalah bagian API yang paling kompleks. Kenop-kenop umum:

• width / height: menerima angka literal atau objek dengan min, ideal, max, exact. ideal adalah default praktis; browser mendekati sedekat mungkin tanpa menolak kamera yang tidak dapat memenuhi secara persis. exact menolak jika perangkat keras tidak dapat memenuhinya.
• facingMode: 'user' untuk kamera yang menghadap depan (selfie) atau 'environment' untuk belakang. Pada laptop yang hanya memiliki satu kamera, constraint ini diabaikan diam-diam; di ponsel, ini adalah cara paling bersih untuk memilih lensa yang tepat tanpa menghitung perangkat.
• frameRate: kebanyakan webcam mencapai maksimum 30 fps; beberapa kamera USB eksternal mencapai 60.
• deviceId: untuk memilih perangkat tertentu setelah enumerasi dengan navigator.mediaDevices.enumerateDevices(). Nuansa penting: label adalah string kosong sampai pengguna telah memberikan setidaknya satu izin kamera pada sesi ini, sehingga dropdown «pilih kamera Anda» yang berjalan sebelum pemberian izin apa pun akan menampilkan ID tanpa label. Dropdown Kamera di atas menghindari masalah ini dengan mengisi hanya setelah Start Camera berhasil.

Lampu kamera adalah sinyal kepercayaan Anda

Pada Mac dengan webcam dari tahun 2008 atau lebih baru, LED hijau di sebelah kamera terhubung ke jalur daya yang sama dengan sensor. macOS dan firmware memastikan LED menyala setiap kali sensor mendapat daya, Apple merancang ini agar bahkan malware tingkat kernel pun tidak dapat mematikan LED saat kamera merekam. iOS mengimplementasikan indikator titik oranye di bagian atas layar sejak iOS 14 (dirilis September 2020), yang digambar oleh proses sistem yang tidak dapat disembunyikan oleh aplikasi. Webcam Windows menggunakan pendekatan serupa di sebagian besar perangkat modern, meski penegakannya kurang universal, beberapa webcam USB lama dari tahun 2010 memiliki LED yang dikontrol perangkat lunak. Linux bervariasi tergantung perangkat keras.

Pelajaran: percayai LED, bukan situs web. Alat murni browser seperti ini dapat dengan tulus berjanji tidak ada yang meninggalkan perangkat Anda, dan lampu kamera memberi Anda konfirmasi independen bahwa kamera benar-benar mati ketika halaman mengatakan demikian. Bug paling umum dalam alat webcam adalah lupa memanggil stream.getTracks().forEach(t => t.stop()) saat tutup, gejalanya: lampu kamera tetap menyala setelah pengguna mengira mereka telah mematikannya. Tombol Stop Camera di halaman ini memanggil itu secara eksplisit.

Kapan Anda akan menggunakan alat webcam browser

• Foto profil cepat untuk Slack, Discord, GitHub, media sosial, tanpa memasang aplikasi webcam terpisah.
• Foto bergaya paspor / ID yang diambil di rumah untuk formulir online (perpanjangan SIM, aplikasi visa). Kisah privasi berbasis browser penting di sini justru karena mengunggah foto wajah ke layanan pihak ketiga terasa tidak nyaman.
• Pratinjau konferensi video: memeriksa pencahayaan, framing, dan tampilan latar belakang virtual sebelum bergabung ke panggilan Zoom atau Teams.
• Kehadiran sekolah dan kerja jarak jauh: ketika guru atau atasan meminta selfie cepat untuk mengkonfirmasi kehadiran.
• Foto referensi untuk seni dan desain: pose tangan, foto objek untuk model 3D, sketsa potret diri.
• Photo booth ringan di acara: menjalankan laptop dengan halaman captive sehingga tamu bisa berfoto selfie tanpa menginstal aplikasi.
• Mockup dan prototyping: desainer yang membangun alur yang menyertakan langkah «ambil selfie» menginginkan halaman uji cepat.
• Demo pendidikan: guru menunjukkan kepada siswa cara kerja Camera API web modern.

Pembeda versus Photo Booth di macOS atau aplikasi Kamera di Windows adalah tidak ada yang diinstal dan tidak ada yang diunggah, berguna di komputer kerja yang terkunci dan kios bersama di mana Anda tidak bisa menginstal perangkat lunak.

Filter: apa yang diberikan properti CSS filter kepada Anda

Canvas HTML5 dapat menerapkan sintaks filter CSS melalui properti ctx.filter. Filter yang tersedia di atas menggunakan primitif yang sama yang dapat diterapkan oleh aturan CSS apa pun: grayscale(1) (desaturasi penuh, setara proyeksi luminans), sepia(1) (nada cokelat hangat meniru foto berusia), invert(1) (negatif warna), blur(5px) (blur Gaussian), brightness(1.4) (mengalikan intensitas piksel), dan contrast(1.4) (berporos di sekitar abu-abu pertengahan). Semuanya telah dipercepat perangkat keras di setiap browser sejak Chrome 53 / Firefox 35 / Safari 9.1.

Detail halus tetapi penting: filter CSS yang diterapkan pada elemen <video> tidak merambat ke canvas. Untuk membakar filter ke dalam JPG yang disimpan, filter yang sama harus diatur pada ctx.filter sebelum drawImage. Halaman ini melakukan itu, sehingga pratinjau di layar cocok dengan file yang disimpan piksel per piksel.

Kesalahan umum dan artinya

Jika Start Camera gagal, penolakan dikembalikan sebagai DOMException dengan salah satu nama berikut:

• NotAllowedError: Anda (atau sesi sebelumnya) menolak izin, atau halaman tidak menggunakan HTTPS. Lihat menu izin situs di bilah alamat dan pastikan Kamera diatur ke Izinkan atau Tanya.
• NotFoundError: tidak ada perangkat yang cocok. Paling sering terjadi saat meminta facingMode: 'environment' dengan exact di desktop tanpa kamera belakang.
• NotReadableError: perangkat keras sedang digunakan oleh aplikasi lain. Zoom, Teams, OBS, atau tab browser lain memiliki kamera terbuka. Tutup dan coba lagi.
• OverconstrainedError: constraints tidak dapat dipenuhi. Hapus persyaratan exact atau longgarkan resolusi.
• TypeError: objek constraints kosong. Panggilan harus meminta setidaknya salah satu dari audio atau video.

Pertanyaan lainnya

Mengapa gambar saya terbalik atau miring?

Beberapa kamera Android melaporkan rotasi yang menyesatkan dalam metadata EXIF mereka. Browser biasanya menerapkan rotasi secara otomatis sebelum frame video mencapai canvas, tetapi versi Samsung Internet lama dan beberapa WebView tertanam melewatkan langkah ini. Jika tangkapan muncul miring, coba putar perangkat Anda 90° sebelum menangkap, atau gunakan alat Putar Gambar setelahnya.

Mengapa dropdown menampilkan «Kamera 1, Kamera 2» bukan nama?

Karena browser belum diberikan izin kamera. enumerateDevices() mengembalikan label (misalnya «FaceTime HD Camera») hanya setelah pengguna menyetujui akses kamera setidaknya sekali dalam sesi saat ini, sampai saat itu, hanya ID buram yang dikembalikan. Klik Start Camera sekali, izinkan akses, dan dropdown akan menyegarkan dengan nama yang benar.

Apakah lampu kamera akan tetap menyala setelah saya menutup halaman?

Tidak. Tombol Stop Camera secara eksplisit menghentikan setiap trek dalam stream, dan browser modern juga menghentikan trek saat tab disembunyikan atau halaman di-unload. Jika Anda melihat LED kamera tetap menyala setelah menutup tab, itu adalah bug yang layak dilaporkan, paling sering itu berarti halaman tidak memanggil fungsi pembersihan. Pada alat ini, mengklik Stop Camera atau menutup tab segera melepaskan perangkat keras.

Bisakah saya merekam video, bukan hanya foto diam?

Tidak pada alat ini, ini hanya untuk tangkapan foto diam. Merekam video memerlukan API MediaRecorder dan menghasilkan file dalam WebM, MP4, atau MKV tergantung browser. Merekam juga memiliki implikasi privasi tersendiri (Anda menyimpan rekaman yang dapat diidentifikasi dalam jumlah lebih besar) sehingga ini adalah kasus penggunaan terpisah yang layak ditangani dengan alat khusus tersendiri.

Apakah ada yang dikirim ke server?

Tidak. Stream video dikirim langsung dari sistem operasi ke browser; tangkapan canvas dan ekspor JPG terjadi melalui JavaScript secara lokal; galeri hidup di memori browser dan diunduh langsung ke perangkat Anda. Tidak ada tentang kamera, wajah, atau foto Anda yang meninggalkan halaman.

Alat terkait