rtc

navigator.getUserMedia = navigator.webkitGetUserMedia || navigator.getUserMedia;
window.URL = window.URL || window.webkitURL;

var app = document.getElementById('wrapper');
var video = document.getElementById('screen');
var canvas = document.getElementById('photo');
var gallery = document.getElementById('main-photo');
document.getElementById("start").hidden = false;

function gotStream(stream) {
    if (window.URL) {
        video.src = window.URL.createObjectURL(stream);
    } else {
        video.src = stream; // Opera.
    }

    video.onerror = function(e) {
        stream.stop();
    };

    stream.onended = noStream;

    video.onloadedmetadata = function(e) { // Not firing in Chrome. See
        // crbug.com/110938.
        document.getElementById('text-msg').hidden = true;
        document.getElementById('wrapper').hidden = false;
        document.getElementById("cap").hidden = false;
        document.getElementById("goto").hidden = false;
        document.getElementById("start").hidden = true;
        document.getElementById("stop").hidden = false;
    };

    // Since video.onloadedmetadata isn't firing for getUserMedia video, we have
    // to fake it.
    setTimeout(function() {
        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;
        document.getElementById('text-msg').hidden = true;
        document.getElementById('wrapper').hidden = false;
        document.getElementById("cap").hidden = false;
        document.getElementById("goto").hidden = false;
        document.getElementById("start").hidden = true;
        document.getElementById("stop").hidden = false;
    }, 50);
}

function noStream(e) {
    var msg = 'Camera has stoped or click agian access to use camera';
    if (e.code == 1) {
        msg = 'User denied access to use camera.';
    }
    document.getElementById('error').textContent = msg;
}

function capture() {

    var photo = document.getElementById('photo'), context = photo.getContext('2d');
    photo.width = video.clientWidth;
    photo.height = video.clientHeight;
    context.drawImage(video, 0, 0, photo.width, photo.height);
    var img = document.createElement('img');
    img.src = canvas.toDataURL('image/png');
    gallery.appendChild(img);

}

function onStop() {
    video.src = " ";
    document.getElementById('text-msg').hidden = false;
    document.getElementById('wrapper').hidden = true;
    document.getElementById("cap").hidden = true;
    document.getElementById("goto").hidden = true;
    document.getElementById("stop").hidden = true;
    document.getElementById("start").hidden = false;

}

function onStart(el) {
    if (!navigator.getUserMedia) {
        document.getElementById('error').innerHTML = 'Sorry. <code>navigator.getUserMedia()</code> is not available.';
        return;
    } else {

        navigator.getUserMedia({
            video : true
        }, gotStream, noStream);
    }

}