• 0

HTML5 sayfasında Web kamerası girişi oluşturma

1 ay önce , Okuma süresi 1 dakika.

HTML5 sayfasında Web kamerası girişi oluşturma
Uygulamamız için HTML

Web kamerası girişini alacak ve bir video etiketinde oynatacak basit bir HTML5 uygulaması (web sayfası) tasarlayacağız. Başlamak için iskele HTML öğelerini yapalım.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Webcam App</title>
</head>

<body>
<div class="container">
    <video autoplay="true" id="videoElement">
    </video>
</div>

<div class="container">
    <button id="start" onclick="startVideo()">Start</button>
    <button id="stop" onclick="stopVideo()">Stop</button>
</div>

<script>
// add code here
</script>
</body>
</html>

Basit bir HTML sayfası yaptık, kapsayıcıya sahip - uygulamayı daha iyi yön vermek  için kullanacağız. videoWeb kamerası akışını görüntülemek için kullanacağımız bir etiketi var. Ve iki düğme var startve stophangi biz başlatmak veya akışı durdurmak için kullanacaktır.

Temel CSS stilleri

Uygulamaya bazı temel stil ekleyelim. Bir styleetiket oluşturun ve içine aşağıdakileri ekleyin.

.container {
// make it smaller and centered horizontally
    margin: 0px auto;
    width: 500px;
}
video {
    width: 500px;
    height: 375px;
    background-color: #666;
}
button{ 
// make buttons look nicer
    background: #eee;
    color: #333;
    border: 0;
    padding: 10px;
}
#start{ 
// make start button a bit different
    background-color:#3498db;
    color: #fff;
}

Şimdi, web kamerası akış görüntüleme uygulamamız için güzel görünümlü bir kullanıcı arayüzüne sahip olmalıyız.

JS kodu

Ardından js kodunu ekliyoruz. Özellikle, işlevlerini tanımlar startVideo()ve stopVideo()sırasıyla başlatmak ve Eldeki akışı durur. Aşağıdakileri komut dosyası etiketine ekleyin.

    var video = document.querySelector("#videoElement");

    function startVideo(){
        // check if there is a webcam device present
        if (navigator.mediaDevices.getUserMedia) {
        // try getting the user media stream
        navigator.mediaDevices.getUserMedia({ video: true })
            .then(function (stream) {
            // we got stream, lets set the src to the stream
            video.srcObject = stream;
            })
            .catch(function (e) {
            console.log("Something went wrong! " + e);
            });
        }
    }

    function stopVideo(){
        // get the currently playing tracks and stop all the tracks.
        var stream = video.srcObject;
        var tracks = stream.getTracks();

        for (var i = 0; i < tracks.length; i++) {
            var track = tracks[i];
            track.stop();
        }

        video.srcObject = null;
    }

Başlat düğmesine tıkladığımızda, tarayıcı kullanıcıdan web kamerasını kullanma izni isteyecektir.Kullanıcı web kamerasının kullanımına izin verdiğinde çalışmaya başlayacak.Kullanıcı kullanıma izin verdiğinde, video etiketinde akışı görmemiz gerekir.

 

    #Yazılım #html