Please can somebody enlighten me as to why this is submitting a POST request twice? NB: There is a delay of approximately 2 minutes before the second request is sent (exact same data).
The code uses GetUserMedia() to display user webcam feed, and immediately copies a snapshot to a canvas. It then gets a data url, before using jquery to POST it to the server. The issue I am experiencing is that a second post request is being executed with the same data around two minutes after the first. I cannot, for the life of me, figure out the cause of the issue - please help!
// The width and height of the captured photo. We will set the
// width to the value defined here, but the height will be
// calculated based on the aspect ratio of the input stream.
var width = 320; // We will scale the photo width to this
var height = 0; // This will be computed based on the input stream
// |streaming| indicates whether or not we're currently streaming
// video from the camera. Obviously, we start at false.
var streaming = false;
// The various HTML elements we need to configure or control. These
// will be set by the startup() function.
var video = null;
var canvas = null;
var track = null;
var video = document.getElementById('video');
var canvas = document.getElementById('canvas');
var photo = document.getElementById('photo');
var kill = null;
// get feed
navigator.mediaDevices.getUserMedia({ video: true, audio: false })
.then(function (stream) {
video.srcObject = stream;
track = stream.getTracks()[0]; // if only one media track
video.play();
})
.catch(function (err) {
console.log("An error occurred: " + err);
});
video.addEventListener('canplay', function (ev) { // when recieving stream
if (kill === null) {
if (!streaming) {
height = video.videoHeight / (video.videoWidth / width);
if (isNaN(height)) { // // Firefox currently has a bug
height = width / (4 / 3);
}
video.setAttribute('width', width); // make sure video and canvas html is correct size
video.setAttribute('height', height);
canvas.setAttribute('width', width);
canvas.setAttribute('height', height);
streaming = true;
ev.preventDefault();
var context = canvas.getContext('2d');
if (width && height) {
canvas.width = width;
canvas.height = height;
context.drawImage(video, 0, 0, width, height);
// !!!!!!!!!!!!!!!!!!!
$.post('/recv', {
img: canvas.toDataURL()
});
track.stop();
kill = 1;
ev.target.removeEventListener(ev.type, arguments.callee);
return false;
// !!!!!!!!!!!!!!!!!!!
}
} else {
return;
}
}
}, false);
<!DOCTYPE html>
<html>
<head>
<title>webrtc snapper</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
</head>
<body>
<div class="camera">
<video id="video"></video>
</div>
<canvas id="canvas">
</canvas>
<div class="output">
<img id="photo">
</div>
<script src="capture.js">
</script>
</body>
</html>
from jquery POST duplicated
No comments:
Post a Comment