Menu
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>
606
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.
56
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
