Mengaktifkan Kamera di Sistem Absensi QR Code Berbasis HTTP dengan Flag Chrome

Masalahnya: kamera tidak mau terbuka

Bayangkan sekolah memakai sistem absensi QR code buatan sendiri. Aplikasinya dipasang di laptop atau server lokal (misalnya dengan XAMPP atau Laragon) dan dibuka di browser lewat alamat seperti http://192.168.1.10/absensi atau http://absensi.test.

Saat halaman pemindai dibuka, kamera tidak menyala. Browser tidak menampilkan permintaan izin kamera, atau konsol menampilkan pesan seperti:

•  NotAllowedError: Only secure origins are allowed
• getUserMedia() no longer works on insecure origins
•  Cannot read properties of undefined (reading 'getUserMedia')

Kodenya tidak salah. Browser memang sengaja memblokir kamera karena halaman dibuka lewat HTTP, bukan HTTPS.

Mengapa kamera hanya mau terbuka di HTTPS

Browser modern menganggap kamera, mikrofon, dan lokasi sebagai fitur sensitif. Fitur ini hanya boleh dipakai di secure context (konteks aman), yaitu halaman yang dibuka lewat HTTPS.

Aplikasi web mengakses kamera melalui fungsi JavaScript navigator.mediaDevices.getUserMedia(). Di halaman HTTP, Chrome tidak menyediakan objek navigator.mediaDevices sama sekali, sehingga pustaka pemindai QR (seperti html5-qrcode atau instascan) langsung gagal.

Alasannya: lalu lintas HTTP tidak terenkripsi. Orang di jaringan yang sama bisa menyisipkan skrip ke halaman dan diam-diam menyalakan kamera pengguna. HTTPS mencegah penyisipan semacam itu.

Catatan penting: localhost sebenarnya dianggap aman

Ada pengecualian yang sering terlewat. Chrome menganggap http://localhost dan http://127.0.0.1 sebagai secure context, walaupun tanpa HTTPS. Jadi kalau sistem absensi dibuka persis di alamat itu, di laptop yang sama dengan servernya, kamera seharusnya sudah bisa terbuka.

Masalah biasanya muncul pada situasi berikut:

Cara membuka sistem	Kamera bisa terbuka?
http://localhost/absensi di laptop server	Ya
http://127.0.0.1/absensi di laptop server	Ya
http://192.168.1.10/absensi (IP jaringan lokal)	Tidak
http://absensi.test atau http://absensi.local (virtual host Laragon/XAMPP)	Tidak
Laptop atau HP lain membuka alamat IP server	Tidak

Jika laptop absensi di gerbang sekolah membuka server di laptop operator lewat IP, atau sistem dipasang dengan nama domain lokal, di situlah flag ini dibutuhkan.

Apa itu flag unsafely-treat-insecure-origin-as-secure

Flag ini adalah pengaturan eksperimen Chrome bernama Insecure origins treated as secure. Fungsinya: memberi tahu Chrome agar memperlakukan alamat HTTP tertentu seolah-olah HTTPS.

Beberapa hal yang perlu dipahami:

• Pengaturan ini hanya berlaku untuk alamat yang Anda daftarkan, bukan untuk semua situs.
• Yang didaftarkan adalah origin, yaitu gabungan protokol, alamat, dan port. Contoh: http://192.168.1.10:8080. Jika port berbeda, origin dianggap berbeda.
• Lalu lintas tetap tidak terenkripsi. Chrome hanya "berpura-pura" halaman itu aman agar fitur seperti kamera diizinkan.
•  Pengaturan hanya berlaku di browser dan perangkat tempat flag diaktifkan. Setiap laptop pemindai harus diatur sendiri-sendiri.
• Microsoft Edge memiliki flag yang sama di edge://flags/#unsafely-treat-insecure-origin-as-secure.

Langkah mengaktifkan flag di Chrome

Lakukan langkah ini di setiap laptop yang dipakai untuk memindai QR code.

1. Buka Google Chrome, lalu ketik di kolom alamat: chrome://flags/#unsafely-treat-insecure-origin-as-secure dan tekan Enter.
2. Chrome akan menyorot pengaturan Insecure origins treated as secure.
3.  Di kotak teks di bawahnya, ketik alamat sistem absensi lengkap dengan port bila ada. Contoh: http://192.168.1.10 atau http://absensi.test:8080
   Lebih dari satu alamat dipisahkan dengan koma, tanpa spasi: http://192.168.1.10,http://absensi.test.
   Jangan sertakan path seperti /absensi; cukup sampai nama host dan port.
4.  Ubah pilihan di sebelah kanan dari Disabled menjadi Enabled.
5.  Klik tombol Relaunch di bagian bawah layar. Chrome akan menutup dan membuka ulang semua jendela.
6.  Buka kembali halaman pemindai absensi. Chrome sekarang akan menampilkan permintaan izin kamera; klik Allow (Izinkan).

Setelah itu, Chrome menampilkan peringatan kecil bahwa Anda memakai flag eksperimen. Peringatan itu normal.

Alternatif: menjalankan Chrome lewat command line

Cara ini berguna bila Anda ingin membuat shortcut khusus "Chrome Absensi" tanpa mengubah profil Chrome utama. Versi command line wajib disertai --user-data-dir; tanpa itu, flag diabaikan.

Contoh di Windows (buat shortcut baru, isi kolom Target):

"C:\Program Files\Google\Chrome\Application\chrome.exe" --unsafely-treat-insecure-origin-as-secure=http://192.168.1.10 --user-data-dir=C:\ChromeAbsensi

Contoh di Linux:

google-chrome --unsafely-treat-insecure-origin-as-secure=http://192.168.1.10 --user-data-dir=/tmp/chrome-absensi

Shortcut ini membuka Chrome dengan profil terpisah, tanpa ekstensi dan login akun. Profil utama tetap aman dan tidak terpengaruh.

Risiko dan batasan

Kata "unsafely" (tidak aman) pada nama flag bukan hiasan. Gunakan dengan sadar:

•  Hanya untuk jaringan lokal yang dipercaya. Jangan daftarkan alamat situs di internet. Data absensi dan gambar kamera tetap dikirim tanpa enkripsi.
• Bersifat sementara. Flag eksperimen bisa berubah atau dihapus di versi Chrome mendatang. Pembaruan Chrome juga bisa mereset pengaturan.
•  Harus diatur per perangkat. Tidak ada cara memasangnya dari server; setiap laptop pemindai perlu diatur manual.
•  Repot untuk HP. Flag ini bisa juga ditemukan di Chrome Android, tetapi harus diatur satu per satu di setiap HP dan tidak tersedia di iPhone. Untuk pemindaian lewat banyak HP siswa atau guru, HTTPS jauh lebih praktis.
•   Jangan dipakai di laptop pribadi untuk browsing sehari-hari. Lebih aman memakai shortcut profil terpisah seperti contoh command line di atas.

Solusi jangka panjang: pasang HTTPS di server lokal

Flag Chrome cocok sebagai jalan pintas. Untuk sistem yang dipakai setiap hari oleh banyak perangkat, lebih baik server absensi memakai HTTPS.

Pilihan	Cocok untuk	Catatan
SSL bawaan Laragon (menu SSL > Enabled)	Server di satu laptop dengan nama .test	Mudah; perangkat lain perlu memasang sertifikat Laragon agar dipercaya
mkcert	Jaringan sekolah dengan beberapa laptop	Buat sertifikat lokal, lalu pasang sertifikat induk (root CA) di tiap perangkat
Hosting online dengan HTTPS gratis (misalnya Cloudflare atau Let's Encrypt)	Sistem diakses dari mana saja, termasuk HP	Tidak perlu pengaturan di perangkat; butuh internet

Dengan HTTPS, kamera langsung bisa dipakai di laptop maupun HP tanpa mengubah pengaturan browser apa pun.

Jika kamera masih belum terbuka

Gejala	Kemungkinan penyebab	Solusi
Tetap muncul "Only secure origins are allowed"	Alamat yang didaftarkan tidak persis sama (beda port, ada path, ada spasi)	Salin origin dari kolom alamat, hapus path, pisahkan dengan koma tanpa spasi
Flag sudah aktif tapi tidak berpengaruh	Chrome belum dibuka ulang	Klik Relaunch atau tutup semua jendela Chrome
Versi command line tidak berpengaruh	Lupa menambahkan --user-data-dir atau Chrome lama masih berjalan	Tambahkan parameter itu dan tutup Chrome sepenuhnya sebelum menjalankan shortcut
Izin kamera tidak muncul	Izin sebelumnya diblokir	Klik ikon di kiri kolom alamat, ubah izin Kamera menjadi Izinkan, muat ulang halaman
Kamera hitam atau "device in use"	Kamera dipakai aplikasi lain (Zoom, WhatsApp, aplikasi kamera)	Tutup aplikasi lain lalu muat ulang halaman

Kesimpulan

Kamera gagal terbuka karena Chrome hanya mengizinkan akses kamera di secure context (HTTPS, localhost, atau 127.0.0.1). Flag chrome://flags/#unsafely-treat-insecure-origin-as-secure adalah jalan pintas cepat agar sistem absensi QR code di jaringan lokal bisa memakai kamera, cukup dengan mendaftarkan alamatnya dan membuka ulang Chrome. Untuk pemakaian rutin di banyak perangkat, pasang HTTPS di server agar lebih aman dan tidak perlu mengatur tiap laptop.