HTML-5 Camera API

29 Eylül 2014
Posted by Çağatay Yıldız
2113 Views

HTML-5 günümüz yazılım dünyasına getirdiği yenilikler ve katmış olduğu bakış açısıyla bir devrim niteliğinde. Özellikle mobil piyasanın gelişmesi bu etkiyi daha da arttırdı. Bloğumuzda HTML-5 ve ileri HTML-5 uygulamarına bundan sonra çok daha fazla yer vereceğiz. Bu yazımızda HTML-5 Camera API teknolojisi kullanarak browser tabanlı kameraya erişim sağlanacak.   HTML-5 uygulamarının sıkıntısı kimi browserların(özellikle IE) destek konusunda hala yetersiz olması. HTML-5 Camera API masaüstünde Google Chrome üzerinden test edeceğiz. Mobil platformlarda HTML-5 desteği özellikle cihaz müdahalelerinde daha fazla bulunmakta. Kamera görüntümüzü görmek için HTML-5 ile birlikte gelen video tag yararlanacağız. Body taglerinin arasına görüntümün yayınlanacağı video tag i ekledim. Yazacağım js ile buraya source vereceğim

 <video id="video" width="640" height="480" autoplay></video>

Şimdi sıra geldi cihaz üzerinden görüntüyü almaya. Aşağıdaki js kodu her ne kadar karmaşık gelse de basit bir algoritması var.

    window.addEventListener("DOMContentLoaded", function () {

            video = document.getElementById("video"),
            videoObj = { "video": true },
            errBack = function (error) {
                console.log("Video oynatmada hata! hata kodu: ", error.code);
            };
       

        // Kamera görüntüsünün video ya source olarak veriyoruz
        if (navigator.getUserMedia) { // Standard
            navigator.getUserMedia(videoObj, function (stream) {
                video.src = stream;
                video.play();
            }, errBack);
        } else if (navigator.webkitGetUserMedia) { // WebKit-prefixed
            navigator.webkitGetUserMedia(videoObj, function (stream) {
                video.src = window.webkitURL.createObjectURL(stream);
                video.play();
            }, errBack);
        }
    }, false);

Öncelikle addEventListener ile Content dolduğu an video tag imi id üzerinden yakaladım. Herhangi bir hata durumunda göründüğü üzerine console a hata yı kodu ile birlikte yazdırıyorum. Daha sonra aynı metot içerisindeki if blokları dikkat çekmekte. Eğer tarayıcınız getUserMedia desteği var ise ilk if bloğundan video nun source stream verecektir eğer yoksa bir webkitGetUserMedia ile bir gömme işlemi gerçekleştirecek. Eğer tarayıcınız FireFox ise ekstradan aşağıdaki kod bloğunu eklemeniz yeterlidir

else if(navigator.mozGetUserMedia) { // Firefox-prefixed
		navigator.mozGetUserMedia(videoObj, function(stream){
			video.src = window.URL.createObjectURL(stream);
			video.play();
		}, errBack);
	}

Projemizi Google Chrome ile çalıştırdığımızda browser bizden bir izin isteyecektir. İzin ekran görüntüsü aşağıdaki şekildedir.html-5-cam

İzin verdikten sonra ekran görüntünüzü browser üzerinde görebilirsiniz. Eğer bu ekran görüntüsünü bir buton aracılığıyla yakalayıp canvas a aktarmak isterseniz ise js bloğunda canvası yakalayıp video yu basmanız yeterli. Bunun için html e bir adet buton ve canvas ekliyoruz

    <button id="snap">Snap Photo</button>
    <canvas id="canvas" width="640" height="480"></canvas>

Daha sonra addEventListener metodumun içerisine aşağıdaki js kodunu yazıyorum.

        document.getElementById("snap").addEventListener("click", function () {
            context.drawImage(video, 0, 0, 640, 480);
        });

bu işleme image canvas a convert etme de denilebilir. Bilindiği üzere bu özellik de canvas la beraber gelen HTML-5 özelliklerinden biridir. Böylelikle bilgisayarın veya telefonun tarayıcı üzerinden kamerasını yakalayıp ekran görüntüsünü kaydedebildik. Bu özelliklerin gelişmesi son zamanlarda gelişen hybrid programlama ya ciddi katkılar sağlamakta.

Kaynak: http://davidwalsh.name/browser-camera
http://davidwalsh.name/convert-canvas-image