I would like to capture frames from the video which is being recorded using webcam and send the frames as base64 format encoded image or just as a jpg image every 10 seconds to the server.
I wrote the code to use the webcam, as well as i know to click or capture an image but how do i send a frame to the server every x seconds?
P.S- webcam will be online 24*7 and should send frame every x seconds
Here is my code:
<!DOCTYPE html>
<html>
<head>
<title> Webcam Trial </title>
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
#container {
margin: 0px auto;
width: 599px;
height: 600px;
border: 10px #333 solid;
}
#videoElement {
width: 599px;
height: 600px;
background-color: #cc22cc;
}
</style>
</head>
<body>
<div class="topnav">
<a class="active" href="#home">Video Demo</a>
</div>
<div>
<h2>Video demo</h2>
</div>
<div id="container">
<video autoplay="true" id="videoElement">
</video>
</div>
<script>
var video = document.querySelector("#videoElement");
if (navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({video: true})
.then(function(stream) {
video.srcObject = stream;
})
.catch(function(err0r) {
console.log("Something went wrong!");
});
}
</script>
</body>
</html>
Please help me out with this.
Edited JS part (Used Philip's answer, Still unable to make it work):
<script>
var video = document.querySelector("#videoElement");
if (navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({video: true})
.then(function(stream) {
video.srcObject = stream;
})
.catch(function(error) {
console.log("Something went wrong!");
});
}
const cnv = document.createElement('canvas'),
ctx = cnv.getContext('2d');
ctx.drawImage(video,50,50);
let data = cnv.toDataUrl();
x=10000;
function every (x) {
let last = new Date().getTime();
(function loop () {
const now = new Date().getTime(),
delta = now - last;
if (delta >= x) {
//capture video
last = now;
}
window.requestAnimationFrame(loop);
})();
}
I would like to capture frames from the video which is being recorded using webcam and send the frames as base64 format encoded image or just as a jpg image every 10 seconds to the server.
I wrote the code to use the webcam, as well as i know to click or capture an image but how do i send a frame to the server every x seconds?
P.S- webcam will be online 24*7 and should send frame every x seconds
Here is my code:
<!DOCTYPE html>
<html>
<head>
<title> Webcam Trial </title>
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
#container {
margin: 0px auto;
width: 599px;
height: 600px;
border: 10px #333 solid;
}
#videoElement {
width: 599px;
height: 600px;
background-color: #cc22cc;
}
</style>
</head>
<body>
<div class="topnav">
<a class="active" href="#home">Video Demo</a>
</div>
<div>
<h2>Video demo</h2>
</div>
<div id="container">
<video autoplay="true" id="videoElement">
</video>
</div>
<script>
var video = document.querySelector("#videoElement");
if (navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({video: true})
.then(function(stream) {
video.srcObject = stream;
})
.catch(function(err0r) {
console.log("Something went wrong!");
});
}
</script>
</body>
</html>
Please help me out with this.
Edited JS part (Used Philip's answer, Still unable to make it work):
<script>
var video = document.querySelector("#videoElement");
if (navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({video: true})
.then(function(stream) {
video.srcObject = stream;
})
.catch(function(error) {
console.log("Something went wrong!");
});
}
const cnv = document.createElement('canvas'),
ctx = cnv.getContext('2d');
ctx.drawImage(video,50,50);
let data = cnv.toDataUrl();
x=10000;
function every (x) {
let last = new Date().getTime();
(function loop () {
const now = new Date().getTime(),
delta = now - last;
if (delta >= x) {
//capture video
last = now;
}
window.requestAnimationFrame(loop);
})();
}
1 Answer
Reset to default 6To capture a single frame, you need a <canvas> element and use its Context2d.drawImage()1 method like so:
const cnv = document.createElement('canvas'),
ctx = cnv.getContext('2d');
ctx.drawImage(video, 0,0);
//2
let data = cnv.toDataURL('image/png');
To make that happen every x seconds you need a kind of interval3, may be like that:
function every (x) {
let last = new Date().getTime();
(function loop () {
const now = new Date().getTime(),
delta = now - last;
if (delta >= x) {
//capture video
last = now;
}
window.requestAnimationFrame(loop);
})();
}
1 draw image
2 toDataUrl()
3 requestAnimationFrame