JSFiddle - React, Tailwind, and code Playground

HTML

<div class="content">
    <video id="video" autoplay></video>
    <canvas id="canvas" width="640" height="480"></canvas>
    <button id="snap">Capture</button>
    <button type="reset" id="new">New</button>
    <button id="upload">Upload</button>
    <div id="userId" display="hidden" value="1234"></div>
</div>

JavaScript

// Upload image to sever 
        document.getElementById("upload").addEventListener("click", function(){
            var dataUrl = canvas.toDataURL("image/jpg", 0.95);
            var userId = document.getElementById('userId').getAttribute('value');                           
            alert(userId); 
            $("#uploading").show();
            $.ajax({
              type: "POST",
              url: "camsave.php",
              data: { 
                 photo: dataUrl,
                  userId: userId
              }
            }).done(function(msg) {
                console.log('saved');
                $("#uploading").hide();
                $("#uploaded").show();
            });
        }, false);