JSFiddle - React, Tailwind, and code Playground

by morphcast

HTML

<script src="https://ai-sdk.morphcast.com/v1.14/ai-sdk.js"></script>
<p>Snippet for identity check between web-camera stream and a user's photo, using MorphCast SDK. </p>
<p>See JavaScipt code and console log. This is the user's photo:</p>
<img id='pic' width=640 />
<div id='txt' style="font-size:180%">Verification in progress...</div>

JavaScript

const RECOGNIZED = "recognized";
const NUM_SAMPLE = 3;


    const imgUrl = "https://c4.wallpaperflare.com/wallpaper/625/37/190/celebrity-dr-house-hugh-laurie-actors-1366x768-people-actors-hd-art-wallpaper-thumb.jpg";

		document.getElementById('pic').src = imgUrl;

    getImageData(imgUrl).then((getImgData) => {
        return new CameraWrapper(CY.getUserMediaCameraFactory().createCamera({video: document.getElementById('video')}), getImgData)
    }).then((source) => {
        CY.loader()
        		//.licenseKey("insert-here-your-license-key")
            .addModule(CY.modules().FACE_IDENTITY.name, {customConfig: config()})
            .source(source)
            .load()
            .then(({start, getModule}) => {

                start().then(() => {

                    getModule(CY.modules().FACE_IDENTITY.name).deleteSerializedData(); // Remove previous IDs from HTML5 local storage
                    new Recognizer().start().then((id) => {
                        console.log(' ID ACQUIRED ');
                        source.switchToStream();
                        window.addEventListener(CY.modules().FACE_IDENTITY.eventName, (e) => {
                            if (e.detail.message.event === RECOGNIZED && id === e.detail.message.user_name) {
                                console.log(' SAME PERSON ');
    														document.getElementById('txt').innerHTML = "PERSON OF THE PHOTO DETECTED";
                            } else if (e.detail.message.event === RECOGNIZED) {
                                console.log(' DIFFERENT PERSON ');
                                document.getElementById('txt').innerHTML = "DIFFERENT PERSON DETECTED";
                            }
                        });
                    });
                });
            });
    });

    class Recognizer {
        constructor() {
            this._lastID = null;
            this._counter = 0;
            this._start = false;
            const listener = (e) => this._onId(e);
   ...