Ниже является частью кода HTML и JS, который пытается сфотографировать изображение из веб -камеры в некотором определенном интервале и сохранить его в виде отдельных файлов на сервере: < /p>
const player = document.getElementById('player');
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
const captureButton = document.getElementById('capture');
const constraints = {video: true,};
navigator.mediaDevices.getUserMedia(constraints)
.then((stream) => {
player.srcObject = stream;
});
setInterval(drawevery, 350);
function drawevery(){
$(document).ready(function() {
var image = canvas.toDataURL("image/png");
$.post("server.php", { pimg: image } );
});
context.drawImage(player, 0, 0, canvas.width, canvas.height);
}
< /code>
php code: < /p>
< /code>
Но это приводит только к пустым изображениям. Может ли проблема заключаться в том, что холст не полностью загружен до сохранения, и если да, то как его решить?function drawevery(){
context.drawImage(player, 0, 0, canvas.width, canvas.height);
var img = new Image();
img.onload=function(){
var image = canvas.toDataURL("image/png");
$.post("savePic.php", { pimg: image } );
}
img.src=canvas.toDataURL();
setTimeout(drawevery, 400);
}
Подробнее здесь: https://stackoverflow.com/questions/597 ... y-interval
