Skip to content

Using Socket.io

For applications that require a frequent evaluation of imagery for facial detection, or when the use of an event-based model is desirable, the same processing available within the REST operations of the SETI API can be obtained through the use of an HTTP Web Socket connection.

Creating a socket connection

SETI API Web Sockets are presented at the root of the API endpoint https://facesdk.app.getsmarteye.mobi Connections to this endpoint can be immediately elevated to a websocket connection using standard interfaces.

Note: If your Socket client does not use the default '/socket.io' path. You may need to configure it specifically

Websocket Events

Once connected, an internal connect event is triggered within the API. If the connection is succesfully elevated, the SETI API will respond immediately with a client-facing Connected event:

connect

{"Message":"Connected"}

image & response_back

To begin processing images, the web socket client can present URL Data for JPEG images by emitting an image event. When the SETI API receives this event, it will process the obtained image and emit a response_back event to the client. The object returned will contain the number of faces detected along with a Message value that reflects the nature of the response. Currently the LIVENESS message is the only client facing message that can be delivered via this event.

{
    "Message":"LIVENESS",
    "Faces":1
}

Websocket Example

This example shows how an HTML capture source can be used with the web socket endpoint for realtime measurement of viewers

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.0/socket.io.js'></script>
</head>
<body>
    <script type="text/javascript">
        function setupClient() {
            window.fsdk_url = 'https://facesdk.app.getsmarteye.mobi'
            if(window.socket){
                window.socket.disconnect();
            }
            window.socket = io.connect(window.fsdk_url, {
                path:'/scoket.io',
                withCredentials: true,
                transportOptions: {
                    polling: {
                        extraHeaders: {
                            'x-api-kay': 'api-key-value'
                        },
                    },
                }
            });
            window.socket.on('connect', function () {
                console.log("Connected...!", socket.connected)
            });
            window.socket.on('response_back', function (msg) {
                var data=JSON.parse(msg)
                connectionStatus.innerHTML="<span style=\"color:"+(window.socket.connected?'#02dc60':'red')+";\">"+window.socket.id+"</span";
                messageStatus.innerHTML="<span>"+data.Message+"</span";
                faces.innerHTML="<span>"+data.Faces+"</span";
            });
        }
    </script>
    <div class="bg">
        <div id="container" style="display:flex; flex-wrap: nowrap; ">
            <video autoplay playsinline id="videoElement"></video>
        </div>

        <div class='wrapper'>
            <div><span>Connection: </span><span id="connectionStatus"></span></div>
            <div><span>State: </span><span id="messageStatus"></span></div>
            <div><span>Faces: </span><span id="faces" style="color:#02dc60"></span></div>
        </div>
        <canvas id="canvas" style="display: none;" width="384" height="384"></canvas>

        <script type="text/javascript" charset="utf-8">
            setupClient();
            //Get the image
            var canvas = document.getElementById('canvas');
            var context = canvas.getContext('2d');
            const video = document.querySelector("#videoElement");
            var statusBox = document.getElementById('status');
            var statusBox2 = document.getElementById('status2');

            video.width = 384; //Minimum recommended capture size for recognition
            video.height = 384;

            //Activate the camera
            if (navigator.mediaDevices.getUserMedia) {
                navigator.mediaDevices.getUserMedia({ video: true })
                    .then(function (stream) {
                        video.srcObject = stream;
                        video.play();
                    })
                    .catch(function (err0r) {

                    });
            }

            //Start streaming images at given FPS (example two frames a second)
            const FPS = 2;
            setInterval(() => {
                if (window.socket) {
                    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);
                    window.socket.emit('image', data,);
                }
            }, 1000 / FPS);
        </script>
    </div>
</body>
</html>