ambil gbar

Di browser, Anda tidak bisa langsung memaksa membuka kamera hanya dengan tag <a>. Yang umum dilakukan adalah menggunakan <input type="file"> dengan atribut:

accept="image/*"
capture="environment"

Kemudian saat menu "Ambil Foto" diklik, trigger input tersebut.

HTML

<a href="#"
   class="list-group-item list-group-item-action"
   onclick="document.getElementById('cameraInput').click(); return false;">
    
    <i class="bi bi-camera me-2"></i>
    Ambil Foto

</a>

<input type="file"
       id="cameraInput"
       accept="image/*"
       capture="environment"
       style="display:none;">

---

Preview Hasil Foto

Tambahkan elemen gambar:

<img id="previewFoto"
     src="<?=$row['gambar']?>"
     class="profile-photo">

Lalu JavaScript:

<script>
document.getElementById('cameraInput')
.addEventListener('change', function(e){

    const file = e.target.files[0];

    if(file){
        document.getElementById('previewFoto').src =
            URL.createObjectURL(file);
    }

});
</script>

---

Kamera Belakang atau Depan

Kamera belakang (default Android):

capture="environment"

Kamera depan (selfie):

capture="user"

---

Catatan Penting

Perilakunya tergantung perangkat:

• Android Chrome → biasanya langsung muncul pilihan Kamera atau Galeri.
• Beberapa Android → langsung membuka kamera.
• iPhone Safari → biasanya menampilkan pilihan:
  • Take Photo
  • Photo Library

Ini normal dan tidak bisa dipaksa 100% oleh browser.

---

Jika Ingin Benar-Benar Mirip WhatsApp/Instagram

Gunakan API kamera browser:

navigator.mediaDevices.getUserMedia()

yang akan membuka kamera langsung di dalam modal Bootstrap dan menampilkan preview live. Setelah pengguna menekan tombol, foto diambil dan langsung di-upload. Ini terlihat jauh lebih profesional dan modern daripada input file biasa.

Untuk aplikasi bimbel Gardenia 1, saya merekomendasikan pendekatan kedua (kamera live dalam modal) karena pengalaman pengguna jauh lebih baik.