JSFiddle - React, Tailwind, and code Playground

HTML

<center> 
<body>
<div id="container">
<video width="200" height="200" autoplay="true" id="video">
</video>
</div>
<button onclick="capture()">Capture</button>  <br> </br>
<canvas id="canvas" style="overflow:auto"></canvas>
<br></br>
<p> Image Converted to String: </p>
<p id="printresult"></p>
</center>

JavaScript

var video = document.querySelector("#video");
 if (navigator.mediaDevices.getUserMedia) {
      navigator.mediaDevices.getUserMedia({ video: true })
        .then(function (stream) {
          video.srcObject = stream;
        })
        .catch(function (err0r) {
          console.log("Something went wrong!");
        });
 }
 var resultb64="";
 function capture() {        
    var canvas = document.getElementById('canvas');     
    var video = document.getElementById('video');
    canvas.width = 200;
    canvas.height = 200;
    canvas.getContext('2d').drawImage(video, 0, 0, 200,200);  
    resultb64=canvas.toDataURL();
    document.getElementById("printresult").innerHTML = canvas.toDataURL();
 }
  document.getElementById("printresult").innerHTML = resultb64;