Send Imageobject From Webcam By Ajax To Flask Server
I want to take the snapshot form webcam and send it by ajax to the Flask server I have the upload.html taking the snapshot from webcam and and send it through ajax, but I do not kn
Solution 1:
Use navigator.mediaDevices.getUserMedia(), .then() and .catch()
<!DOCTYPE html><html><head></head><bodyonload="init();"><h1>Take a snapshot of the current video stream</h1> Click on the Start WebCam button.
<p><buttononclick="startWebcam();">Start WebCam</button><buttontype="submit"id="dl-btn"href="#"download="participant.jpeg"onclick="snapshot();">Take Snapshot</button></p><videoonclick="snapshot();"width=400height=400id="video"controlsautoplay></video><p>
Screenshots :
<p><canvasid="myCanvas"width="400"height="350"></canvas></p><script>//--------------------// GET USER MEDIA CODE//--------------------var video;
var webcamStream;
functionstartWebcam() {
if (navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia(
// constraints
{
video: true,
audio: false
}).then(
// successCallbackfunction(localMediaStream) {
console.log(webcamStream);
video.src = window.URL.createObjectURL(localMediaStream);
webcamStream = localMediaStream;
})
.catch(
// errorCallbackfunction(err) {
console.log("The following error occured: " + err);
})
} else {
console.log("getUserMedia not supported");
}
}
//---------------------// TAKE A SNAPSHOT CODE//---------------------var canvas, ctx;
functioninit() {
video = document.querySelector('video');
// Get the canvas and obtain a context for// drawing in it
canvas = document.getElementById("myCanvas");
context = canvas.getContext('2d');
}
functionsnapshot() {
// Draws current image from the video element into the canvasconsole.log(webcamStream);
context.drawImage(video, 0, 0, canvas.width, canvas.height);
webcamStream.getTracks().forEach(function(track) {
track.stop();
});
var dataURL = canvas.toDataURL('image/jpeg', 1.0);
document.querySelector('#dl-btn').href = dataURL;
console.log(dataURL)
}
</script></body></html>plnkr https://plnkr.co/edit/vuPJRvYZNXLC7rjzKvpj?p=catalogue
Post a Comment for "Send Imageobject From Webcam By Ajax To Flask Server"