Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Capture image from webcam and convert to base64 in javascript

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>
like image 606
Jithin Sunny Avatar asked Jan 25 '23 04:01

Jithin Sunny


2 Answers

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.

like image 56
mr. pc_coder Avatar answered Jan 31 '23 04:01

mr. pc_coder


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>
like image 27
Tân Avatar answered Jan 31 '23 03:01

Tân