JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <head runat="server">
        <title>Demo</title>
        <style>
            #video {
                border: 1px solid #999;
                width: 50%;
                max-width: 860px;
            }
    
            .error {
                color: red;
            }
             #photo {
                width: 51%;
                    border: 4px solid green;
                    padding: 4px;
                }
            .warn {
                color: orange;
            }
    
            .info {
                color: darkgreen;
            }
        </style>
         <!-- Include from the CDN -->
     
    </head>
    
    <body>
        <h1>recording</h1>
        <form id="form1" runat="server">
            <div>
                <p>
                    This example shows you the contents of the selected part of your display.
            Click the Start Capture button to begin.
       
                </p>
    
                <p>
                    <input type="button" id="start" value="Start Capture" />&nbsp;
            <input type="button" id="stop" value="Stop Capture" />
                </p>
                <p>
                    <a></a>
                </p>
    
                <div id="photo">
                    <video id="video" autoplay="autoplay"></video>
                    <hr>
                    <a onclick="takeshot()">
                        Take Screenshot
                    </a>
                </div>
                
                <br />
                <h1>Screenshot:</h1>
                <div id="output"></div>
                
                <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
                <script>
                    const videoElem = document.getElementById("video");
                    const startElem = document.getElementById("start");
                    const stopElem = document.getElementById("stop");
    
                    // Options for...