Devam Et
Logo
Blog

JavaScript ile Kamera Erişimi

Geliştirdiğiniz bir web projesinde bilgisayarın veya mobil cihazların kamerasına erişmeniz gerekiyor ve bunu nasıl yapacağınızı bilmiyorsanız bu makalemiz tam sizin için. 

Günümüz teknoloji dünyasında artık hemen hemen herşey bilgisayar ve mobil cihazlar üzerinden yapılabiliyor. Bazen de bu cihazlardaki web veya mobil uygulamalar üzerinden fotoğraf çekmek için cihazın dahili kamerasına erişmek gerekiyor. Peki bir web uygulamasında bunu nasıl yapabiliriz ? 

Öncelikle şunu belirtmem gerekirki bunu PHP, .NET ve benzeri server side yani sunucu üzerinde çalışan diller ile yapamazsınız. Çünkü cihazın dahili kamerasına erişebilmeniz için client side yani cihaz üzerinde çalışan bir programlama dili ile yapabilirsiniz. Bu da bizim makale konumuz olan JavaScript oluyor. 

Neyse çok lak lak yaptık. Hadi biraz kodlayalım. 

Yapacağımız basit uygulamada bilgisayarın dahili kamerasına erişerek anlık görüntüyü sayfa üzerinde göstereğiz. Ayrıca bir buton yardımıyla da bu görüntüden istediğimiz bir görüntüyü fotoğraf olarak çekeceğiz.

Öncelikle kameranın anlık görüntüsünü ve çekeceğimiz fotoğrafı göstereceğimiz elemanları ekleyelim.

<video id="video" width="640" height="480" autoplay></video>
<button id="cek">Snap Photo</button>
<canvas id="canvas" width="640" height="480"></canvas>

Şimdi anlık video görüntüsünü alacağımız JavaScript kodlarımızı yazalım.

var video = document.getElementById('video');

      // Kameraya erişim sağlıyoruz
      if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
            video.srcObject = stream;
            video.play();
        });
      } else if(navigator.getUserMedia) { // Standard
        navigator.getUserMedia({ video: true }, function(stream) {
            video.src = stream;
            video.play();
        }, errBack);
      } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
        navigator.webkitGetUserMedia({ video: true }, function(stream){
            video.src = window.webkitURL.createObjectURL(stream);
            video.play();
        }, errBack);
      } else if(navigator.mozGetUserMedia) { // Mozilla-prefixed
        navigator.mozGetUserMedia({ video: true }, function(stream){
            video.srcObject = stream;
            video.play();
        }, errBack);
      }

Bu kodlarımız yardımıyla kameranın anlık erişimini alıp video taglarımızdaki alana gönderdik. 

Şimdi de butonumuza fotoğraf çekme olayını dahil edelim. 

// Ekran görüntüsünü almamız için gerekli elemanlar
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      var video = document.getElementById('video');

      // Butona tıklandığında resmi canvasa aktarıyoruz
      document.getElementById("cek").addEventListener("click", function() {
      	context.drawImage(video, 0, 0, 640, 480);
      });

Eveettt böylece kodlarımızı tamamladık. Artık kodlarımızı deneyebilirsiniz. İsterseniz aşağıdaki butona tıklayarak demo'yu inceleyebilirsiniz. 

DEMO'YU İNCELE

Kaynak : https://davidwalsh.name/

Author

Muhammed Yusuf TAŞKESENLİGİL

Hakkında: Hakkında: 2015 Haziran ayında KTÜ Bilgisayar Mühendisliği bölümünden mezun oldum. Yaklaşık 4 yıldır web teknolojileri üzerinde çalışıyorum. HTML, CSS, JavaScript ve PHP alanlarında proje geliştiriyorum. Teknolojiyi seven ve hayatının her alanında kullanan biriyim.

JavaScript Dinamik Coming Soon (Geri Sayım Sayacı) Eklentisi Önceki Yazı
Farklı Sekmeye Geçince Title Değiştirme Sonraki Yazı

0 Yorum

    Henüz hiç yorum eklenmemiş!

Bir Yorumda Sen Bırak