Close

Webpage Testing portal

A project log for FaceLock: A Facial Recognition Door Lock

An ESP32 based IoT project.

xli89xli89 06/10/2020 at 21:210 Comments

To give the user the ability to see who is at the door and the ability to do some manual controls, a web page that displays the camera capture was made. For now, it only has a video stream and two buttons, one for manually beginning the face-recognition entry, and the other one for simply manually opening the lock. 

This web page serves as a WebSocket client that communicates with the WebSocket request handler in the tornado server. Upon receiving a message sent from the tornado server, which is the flag of receiving an image from the POST request, the source of the image will be refreshed to show the new frame. By doing this, a continuous video stream can be created from individual images. The two buttons are both scripted to send a flag to the tornado server so that the GET request from the client end will receive the change and perform certain action based on flag value.

var ws = new WebSocket("ws://*****************/ws");
        var button = document.getElementById("click");
        var state = 0;

        ws.onopen = function() {
        ws.send("Hello, world");
        console.log("HI");
        };

        ws.onmessage = function(evt) 
        {
            var image = document.getElementById('img');
            image.src = "image.jpg";
        };

        button.onclick = function(){
            ws.send(JSON.stringify(1));
        };
        entry.onclick = function(){
            ws.send(JSON.stringify(2));
        }


Discussions