index.html

<!DOCTYPE html>
<html>
    
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Miniplay</title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans&amp;display=swap">

    <link href="style.css" rel="stylesheet">
    
</head>


  <body>
    <text><b>Miniplayer👩‍💻👩‍💻</b></text>
    
    <div class="grid-container">
        <div class="grid-item">
        <h2> Share Screen</h2>
        <p><button id="start">Start Capture</button>&nbsp;<button id="stop" style="margin: 0 0 0 10px;">Stop Capture</button></p>
        <p style="font-size: 16px;">Click the Start Capture button to begin.<br>
        </p>
            <pre class="logs" id="log"></pre> 
        </div>    
        
        <div class="grid-item" style="width: 420px;"> 
            <h2><strong>Stream Capture: </strong></h2>
            

        <!--<video id="videoElement" controls style="box-shadow: inset; width: 300px; height:300px;" >
            <source src="sample.mp4" type="video/mp4">
        </video>-->
        <video id="video" autoplay style="width: 400px; height: 300px; box-shadow: inset;"> </video>
        
            <div style="color: black; float: right;">
                <button id="pipButtonElement" style= "display: none; size: 70px;" type="button"class="button">
                    Enter view mode
                </button>
            </div>
            

        </div>
        <script src="script.js"> </script>
 
</div>

</body>
</html>