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>
2 answers
solution1
7 2020-04-11 09:11:38
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.
solution2
1 2020-04-11 09:13:40
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Convert local image to base64 javascript
convert base64 string to image with javascript
How to convert an image to base64 in JavaScript
Convert image to base64 javascript on firefox
convert base64 to image in javascript/jquery
Javascript Convert an URL to a BASE64 Image
convert image to base64 using javascript
Convert Base64 to image file with javascript
Convert a Base64 into an image in javascript
Convert image to base64 from url
Related Tags