MC Face Login Plugin

gistfile1.txt

// ==UserScript==
// @name         MC Face Detection Plugin
// @namespace    https://example.com/
// @version      2024-04-24
// @description  Mycos Face Detection Plugin demo
// @author       You
// @match        https://dj.mycostech.com/manage
// @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Your code here...
    const detectButton = document.createElement('div');
    const body = document.getElementsByTagName('body')[0];
    detectButton.id = 'face-detect-fab';
    detectButton.style.cssText = `
       display: flex;
       cursor: pointer;
       align-items: center;
       justify-content: center;
       position: absolute;
       font-size: 36px;
       top: 50px;
       right: 50px;
       width: 60px;
       height: 60px;
       background-color: #f78d5b;
       border-radius: 50px;`
    detectButton.innerHTML = '<span>C</span>'
    body.appendChild(detectButton);
    var cameraPopup = document.createElement('div');
    cameraPopup.style.cssText = `
       position: absolute;
       background-color: #000;
       color: #fff;
       top: 200px;
       left: 300px;
       width: 700px;
       height: 600px;
       display: none;`
    cameraPopup.innerHTML = `
        <div>
            <video id="video" width="640" height="480" autoplay></video>
        </div>
        <div>
            <button type="button" id="snap">Snap and detect image</button>
        </div>
        <div>
            <h2 id="detectResult"></h2>
        </div>
    `
    detectButton.addEventListener('click', function() {
        const nextDisplay = cameraPopup.style.display === 'none' ? 'block' : 'none';
        cameraPopup.style.display = nextDisplay;
    });
    body.appendChild(cameraPopup);
    const video = document.getElementById('video');
    const snapButton = document.getElementById('snap');
    const constraints = { video: true };
    navigator.mediaDevices.getUserMedia(constraints)
        .then(function(stream) {
        video.srcObject = stream;
    })
        .catch(function(error) {
        console.error('Error accessing the camera: ', error);
    });

    function captureFrame() {
        // Creating a temporary canvas element to draw the frame
        const tempCanvas = document.createElement('canvas');
        tempCanvas.width = video.videoWidth;
        tempCanvas.height = video.videoHeight;
        const tempCtx = tempCanvas.getContext('2d');
        tempCtx.drawImage(video, 0, 0, tempCanvas.width, tempCanvas.height);

        // Getting the data URL representation of the captured frame
        const dataURL = tempCanvas.toDataURL('image/png');

        sendImageDataToDetectAPI(dataURL)
    }

    // Event listener for the snap button
    snapButton.addEventListener('click', function() {
        captureFrame();
    });

    async function sendImageDataToDetectAPI(imageDataURL) {
        const payload = {
            image: imageDataURL.split(',')[1]
        }
        const detectResultText = document.getElementById('detectResult')

        try {
            detectResultText.innerHTML = 'Processing...'
            const response = await fetch('https://primrose-mycos.southeastasia.cloudapp.azure.com/faces/detect', {
                method: 'POST',
                headers: {
                    'Content-type': 'application/json'
                },
                body: JSON.stringify(payload)
            })

            const result = await response.json()
            if (result.success) {
                detectResultText.innerHTML = result.matched.name
            } else {
                detectResultText.innerHTML = result.detail
            }
        } catch (err) {
            console.log(err)
            alert(err.message)
        }
    }
})();