web-antrean/HTTPS_SETUP.md

Setup HTTPS untuk Development

Aplikasi ini sudah dikonfigurasi untuk menggunakan HTTPS di development mode agar fitur kamera bisa berfungsi.

Cara Menggunakan

1. Jalankan aplikasi dengan HTTPS:

   npm run dev:https
   

   atau

   npm run dev
   

2. Akses aplikasi:

   • Dari komputer: https://localhost:3001
   • Dari HP (dalam jaringan yang sama): https://[IP-KOMPUTER]:3001
     • Contoh: https://10.10.150.175:3001

Peringatan Keamanan Browser

Karena menggunakan self-signed certificate, browser akan menampilkan peringatan keamanan:

Chrome/Edge:

1. Klik "Advanced" atau "Lanjutkan ke localhost (tidak aman)"
2. Klik "Proceed to localhost (unsafe)"

Firefox:

1. Klik "Advanced"
2. Klik "Accept the Risk and Continue"

Safari (Mac):

1. Klik "Show Details"
2. Klik "visit this website"
3. Klik "Visit Website" di dialog konfirmasi

Mobile (HP):

• Android Chrome: Klik "Advanced" → "Proceed to [IP] (unsafe)"
• iOS Safari: Klik "Advanced" → "Proceed to [IP]"

Catatan Penting

• ✅ Setelah menerima certificate, browser akan mengingatnya untuk kunjungan selanjutnya
• ✅ HTTPS diperlukan untuk akses kamera di browser modern
• ✅ Pastikan HP dan komputer dalam jaringan yang sama (WiFi yang sama)
• ✅ Gunakan IP komputer Anda, bukan localhost saat akses dari HP

Troubleshooting

Kamera masih tidak muncul?

1. Pastikan sudah menggunakan https:// bukan http://
2. Cek izin kamera di browser settings
3. Pastikan tidak ada aplikasi lain yang menggunakan kamera
4. Restart browser setelah setup HTTPS pertama kali

Tidak bisa akses dari HP?

1. Pastikan firewall tidak memblokir port 3001
2. Pastikan HP dan komputer dalam WiFi yang sama
3. Cek IP komputer dengan ipconfig (Windows) atau ifconfig (Mac/Linux)