Code Copy

<div class="card">
    <h1>Ambil Foto dari Kamera — Mobile Friendly</h1>
    <p class="small">Gunakan tombol di bawah. Pada perangkat mobile Anda dapat memilih kamera belakang atau depan.</p>

    <!-- Pilihan kamera -->
    <div style="margin-bottom:8px;">
        <label for="cameraSelect">Pilih Kamera:</label>
        <select id="cameraSelect"></select>
    </div>

    <!-- Video / preview -->
    <div class="row">
        <div class="col-6">
            <video id="video" playsinline autoplay></video>
        </div>
        <div class="col-6">
            <p style="margin:0">Preview hasil:</p>
            <img id="preview" src="" alt="preview" />
        </div>
    </div>

    <!-- Controls -->
    <div class="controls">
        <button id="captureBtn" class="btn-primary">Ambil Foto</button>
        <button id="uploadBtn" class="btn-primary" style="display:none">Upload Sekarang</button>
        <button id="switchBtn">Ganti Kamera</button>
        <input id="fileInput" type="file" accept="image/*" />
        <button id="clearBtn" class="btn-danger">Hapus Preview</button>
    </div>

    <p class="small">Kompresi & resize: gambar diresize sebelum dikirim agar hemat kuota. Jika browser tidak mendukung kamera, gunakan tombol <em>file</em>.</p>

    <div id="status" class="small"></div>
</div>