Javascript: Menampilkan Preview Dan List Camera Device

Irman Firmansyah

Contoh koding untuk menampilkan preview dan list camera device di Javascript

Jadi semua device camera (video input) yang ada pada client browser ditampilkan pada list, setelah dipilih salah satu tampil juga preview dari camera tersebut

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Camera Device</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>

<body>
    <div class="container">
        <h1 class="my-4">Camera Device</h1>

        <button class="btn btn-primary btn-block mb-2" id="btnMulai">Mulai</button>
        <a href="index.php" id="btnSelesai" class="btn btn-danger btn-block mb-4 d-none">Selesai</a>

        <div class="form-group mb-2 d-none" id="formKamera">
            <label for="selectKamera">Pilih Kamera</label>
            <select class="form-control" id="selectKamera"></select>
        </div>

        <div class="d-flex justify-content-center">
            <video id="video" autoplay class="mb-2" style="width: 300px; height: 300px; display: none;"></video>
        </div>
    </div>

    <script>
        // inisialisasi
        const video = document.getElementById("video");
        const deviceList = document.getElementById("selectKamera");
        const btnMulai = document.getElementById("btnMulai");
        const btnSelesai = document.getElementById("btnSelesai");
        const formKamera = document.getElementById("formKamera");

        let currentStream;

        // mengambil semua list device (video input)
        function getVideoDevices() {
            navigator.mediaDevices
                .enumerateDevices()
                .then((devices) => {
                    // bersihkan dulu semua opsi untuk select kamera
                    while (deviceList.firstChild) {
                        deviceList.removeChild(deviceList.firstChild);
                    }

                    // ambil device dengan jenis video input
                    const videoDevices = devices.filter(
                        (device) => device.kind === "videoinput"
                    );

                    // membuat option untuk select kamera
                    videoDevices.forEach((device, index) => {
                        const option = document.createElement("option");
                        option.value = device.deviceId;
                        option.text = device.label || `Camera ${index + 1}`;
                        deviceList.appendChild(option);
                    });

                    // jika ada list, tampilkan preview dari device pertama
                    if (videoDevices.length > 0) {
                        const firstDeviceId = videoDevices[0].deviceId;
                        setupWebcam(firstDeviceId);
                    }
                })
                .catch((err) => {
                    console.error("Error enumerating video devices: ", err);
                });
        }

        // setup preview kamera berdasarkan device id
        function setupWebcam(deviceId) {
            // cek device id, jika tidak tersedia maka tampilkan camera default
            const constraints = {
                video: deviceId ? {
                    deviceId: {
                        exact: deviceId
                    }
                } : true
            };
            navigator.mediaDevices
                .getUserMedia(constraints)
                .then((stream) => {
                    stopStream();
                    currentStream = stream;
                    video.srcObject = stream;
                })
                .catch((err) => {
                    console.error("Error accessing the webcam: ", err);
                });
        }

        function stopStream() {
            if (currentStream) {
                currentStream.getTracks().forEach((track) => track.stop());
            }
        }

        // button mulai saat di klik
        btnMulai.addEventListener('click', function() {
            formKamera.classList.remove("d-none");
            btnSelesai.classList.remove("d-none");
            video.style.display = "block";

            // akses camera permission
            navigator.mediaDevices.getUserMedia({
                    video: true
                })
                .then(() => {
                    // load semua list device
                    getVideoDevices();
                })
                .catch((err) => {
                    console.error("Error accessing the webcam: ", err);
                });
        });

        // set preview berdasarkan pilihan device
        deviceList.addEventListener('change', function() {
            const selectedDeviceId = deviceList.value;
            if (selectedDeviceId) {
                setupWebcam(selectedDeviceId);
            }
        });
    </script>
</body>

</html>
  • Hanya bekerja pada environment localhost dan https
  • Jika diakses dengan device Android (online), maka hanya bisa preview kamera depan saja
  • Bisa menggunakan aplikasi DroidCam untuk mengakses dengan device Android secara localhost (offline)