// 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['emo'] score.innerHTML = data['res'] }); // 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); };