static/app.js

// establishing connection between client and server by getting the url.
var socket = io.connect(window.location.protocol + '//' + document.domain + ':' + location.port, {
    transports: ['websocket']
});
// once connected sending out printing out connected 
socket.on('connect', function () {
    console.log("Connected...!", socket.connected)
});

// print results
var result = document.getElementById('name')
var score = document.getElementById('score')
socket.on('result',(data) =>{
    //console.log(data);
    result.innerHTML = data['name']
    score.innerHTML = data['score']
});

// global varibales for video and output.
var video = document.getElementById('videoElement');
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var send_data;
// set video dimentions.
video.width = 400;
video.height = 300;
// rate of sending image
const FPS = 10;
// function for sending the webcam input
function send() {
    width = video.width;
    height = video.height;
    context.drawImage(video, 0, 0, width, height);
    var data = canvas.toDataURL('image/jpeg', 0.5);
    context.clearRect(0, 0, width, height);
    socket.emit('image', data);
};
// funtion to start webcam on client side
function start_camera() {
    send_data = setInterval(send, 1000 / FPS)
    let devices = navigator.mediaDevices
    if (!devices || !devices.getUserMedia) {
        console.log("getUserMedia() not supported.");
        return;
    }
    devices.getUserMedia({
        video: true
    })
        .then(function (vidstream) {
            if ("srcObject" in video) {
                video.srcObject = vidstream;

            } else {
                video.src = window.src = window.URL.createObjectURL(vidstream);

            }
            video.onloadeddata = function (e) {
                video.play();
            };
            
        })
        .catch(function (e) {
            console.log(e.name + ": " + e.massage);
        });
};
// stopping camera input and sending data.
function stop_camera() {
    video.srcObject.getTracks()[0].stop();
    video.srcObject = null;
    clearInterval(send_data);
};