İçerikler
Çoğunuzun bildiği gibi sınav merkezlerinden yapılan başvurularda bir webcam kullanılarak anlık olarak fotoğrafınız çekilip sisteme yüklenerek işleminiz gerçekleştirilmektedir.Bu derste de bu işlemin JavaScript ve HTML5 ile nasıl gerçekleştirildiğinden bahsedeceğim.
Bir Web kamerasından görüntü sağlayabilmek ve sağlanan bu görüntüyü kayıt edilebilir duruma getirmek için GetUserMedia() metodunu kullanacağız. Bu metotla elde edilen görüntüyü işleyerek fotoğrafın çekilmesini sağlayacağız. JavaScript ile elde edilen görüntüyü de anlık olarak sunabilmek içinde HTML5’ten faydalanacağız.
HTML Bölümünün Oluşturulması
Bu bölümde, JavaScript ile elde edilen görüntünün işlenmesini sağlayacağız. Elde edilen görüntünün gösterilmesi, görüntüden bir kesit alınması yani fotoğrafının çekilmesi ve çekilen fotoğrafın gösterileceği alanları HTML ile oluşturuyoruz.
<!-- Hata durumunda mesaj burada yer alacak -->
<p><span id="hataMesajı"></span></p>
<!-- Web Kamerasından alınan görüntü burada yer alacak -->
<div class="video-wrap">
<video id="video" playsinline autoplay></video>
</div>
<!-- Fotoğraf çekmek için buton oluşturuyoruz -->
<div class="controller">
<button id="fotocek">Fotoğraf Çek</button>
</div>
<!-- Çekilen fotoğrafı gösteriyoruz -->
<canvas id="canvas" width="640" height="480"></canvas>
İşlemleri sağlayacağımız HTML alanlarını oluşturduktan sonra JavaScript kodlarına geçelim. JavaScript kodlarında, görüntüyü işleyip, HTML alanındaki gerekli yerlere uygulayacağız.
JAVASCRİPT Bölümünün Oluşturulması
Bu bölümde gerekli tanımlamalar yapılarak web kamerasına erişiyoruz ve HTML alanına bunu anlık olarak yansıtıyoruz. Ardından fotoğrafı çekmek üzere butona tıklatıldığında görüntüyü işleyip, belirlenen HTML alanına görüntüyü aktarıyoruz.
// HTML alanlarını değişkenlere atıyoruz.
const video = document.getElementById('video');
const canvas = document.getElementById('canvas');
const snap = document.getElementById("fotocek");
const hata = document.querySelector('span#hataMesajı');
// Görüntü ve ses için özellik belirten değişkeni tanımlıyoruz.
const ozellikler = {
audio: true,
video: {
width: 1280, height: 720
}
};
// web kamerasına erişiyoruz.
async function init() {
try {
const stream = await navigator.mediaDevices.getUserMedia(ozellikler);
handleSuccess(stream);
} catch (e) {
hata.innerHTML = `navigator.getUserMedia error:${e.toString()}`;
}
}
// Kameraya eriştiğimizde işlemi sağlıyoruz.
function handleSuccess(stream) {
window.stream = stream;
video.srcObject = stream;
}
init();
// Fotoğrafı çekiyoruz.
var context = canvas.getContext('2d');
snap.addEventListener("click", function() {
context.drawImage(video, 0, 0, 640, 480);
});
GetUserMedia kullanılarak, bilgisayarda yer alan web kamerasını kullanarak tarayıcı üzerinden erişim sağlayabilirsiniz. Web kamerasına eriştiğinizde elde edilen videoyu izleyebilir, kaydedebilir yada indirebilirsiniz. Bu konudaki tercih size kalmış. Web kamerasına erişip herhangi bir işlem sağlamak için bir eklenti yada yazılıma ihtiyaç yoktur. Örnekte ki gibi kolayca erişim sağlayabilirsiniz.
