HTML ve JavaScript ile Webcam (Kamera) Kullanımı

Merhabalar, bu makalemde nasıl JavaScript ile kamera erişimi yapabileceğinizden. Ayrıca bu yöntem ile mikrofona da erişim sağlayabileceksiniz. Makale sonunda anlattığım bilgilerin kullanıldığı basit bir örnek görebilirsiniz.

Hangi Projelerde Kullanılabilir?

Bu makalede anlattığım bilgileri görüntülü konuşma, yapay zeka uygulamaları, kamera ile fotoğraf çekme, kamera ile video kaydı alma gibi web ortamında kamerayla yapılabilecek her şeyi yapabilirsiniz.

HTML

Öncelikle JavaScript ile aldığımız kamera görüntüsünü ekranda görebilmek için bir HTML etiketi oluşturmamız gerekiyor. Bu projede kameradan gelen görüntüyü direkt olarak video etiketinde gönderip gösterimini yapacağız. Aşağıdaki örnek bir HTML kodu görebilirsiniz.

Bu HTML kodundaki id özelliğinin değerini JavaScript tarafında video etiketine erişmek için kullanacağız.

JavaScript ile Kamera Erişimi

JavaScript tarafında ilk yapmamız gereken HTML kodunda yazdığımız video etiketine erişmek olacaktır. Bunun için JavaScript’in document.querySelector() özelliğini kullanacağız.

const videoElement = document.querySelector("#webcam");

Yukarıdaki kod ile video etiketini seçebiliyoruz. Burada önemli olan nokta HTML tarafında etiketin id özelliğine yazdığımız değerin JavaScript’teki değer ile aynı olması. Biz HTML tarafında webcam yazmıştık o yüzden etiketi seçerken o değeri yazdık.

Bir sonraki adımımız tarayıcıdan kamera izni alıp gelen görüntüyü video etiketine aktarmak. Örnek kodu aşağıda inceleyebilirsiniz.

if (navigator.mediaDevices.getUserMedia) {
    navigator.mediaDevices.getUserMedia({
        audio: true,
        video: {
            width: 1920,
            height: 1080,
        },
    }).then(function (stream) {
        videoElement.srcObject = stream;
    }).catch(function (err) {
        console.log("HATA!", err);
    });
}

Yukarıdaki kodu da yazıp sayfayı çalıştırdığınızda tarayıcınız kamera erişimi için izin isteyecektir. İzin verildiği takdirde kamera görüntüsünü alıp video etiketine aktaracak. Bu şekilde JavaScript ile kamera erişimi sağlayabilir projelerinizde kullanabilirsiniz.

navigator.mediaDevices.getUserMedia() fonksiyonunun içine yazdığımız objenin değerleri ile gelen verinin özelliklerini belirleyebilirsiniz.

audio: true bölümü mikrofonun sesini alıp almayacağını belirliyor. Eğer mikrofonun sesini almak istemiyorsanız false yapabilirsiniz.

video özelliği içindeki width ve height değerleri de gelen görüntünün çözünürlüğünü belirliyor. Eğer varsayılan çözünürlükte gelmesini istiyorsanız video: true yapabilirsiniz.

Tüm işlemleri doğru yaptıysanız aşağıdaki gibi bir görüntü elde edeceksiniz.

Video etiketinin görünümünü CSS ile biraz daha düzenleyerek daha güzel bir görünüm elde edebilirsiniz. Sizin için basit bir örnek hazırladım. Örneğe ulaşmak için buraya tıklayabilirsiniz.

Detaylı bilgi için;

https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia