Capture image from webcam and convert to base64 in javascript

Question

I need to capture an image from a web camera and convert to base64. Should be able to capture multiple frames and concatenate them and again convert to base 64. This code works well for capturing but converting it to base64 seems to be an issue.

<html>
<body>
<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>
<script>
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!");
    });
}

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);  
canvas.toBlob() = (blob) => {
      const img = new Image();
      img.src = window.URL.createObjectUrl(blob);
    };

}
document.getElementById("printresult").innerHTML = resultb64;
</script>
</body>
</html>

look at this [link](https://stackoverflow.com/questions/246801/how-can-you-encode-a-string-to-base64-in-javascript) — Jack, Apr 11 '20 at 09:05

mr. pc_coder · Answer 1 · 2020-04-11T09:22:42.657

https://jsfiddle.net/qfaeb3tL/1/

canvas.toDataURL() gives u base64 string

 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);  
    document.getElementById("printresult").innerHTML = canvas.toDataURL(); 
 }
  document.getElementById("printresult").innerHTML = resultb64;

gives you base64 string. I created fiddle example.

score 1 · Answer 2 · answered Apr 11 '20 at 09:13

You can use canvas.toDataURL() method and edit capture function to:

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);  

  document.getElementById("printresult").innerHTML = canvas.toDataURL();
}

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!");
    });
}

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);  
  
  document.getElementById("printresult").innerHTML = canvas.toDataURL();
}

<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>

Capture image from webcam and convert to base64 in javascript

2 Answers2