Create static/app.js

static/app.js

@@ -0,0 +1,71 @@
+// 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);
+};