I am having major brain ache on this one. I have a webcam that i snap an image from every 5 seconds. I have read all of the comments and I can successfully display an image from the webcam but cannot get the image to update. I have read the similar posts and tried everything. Am i missing something?
This is what I have:
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Webcam</title>
<script type="text/javascript">
var x = 0;
function init() {
window.onmessage = (event) => {
if (event.data) {
var ImageURL = document.getElementById("webcam1");
ImageURL.src = event.data;
Clear();
function Clear() {
document.getElementById("Load").style.display = "None";
document.getElementById("Test").innerHTML = "Clearing";
setInterval(UpdateImage, 20000);
function UpdateImage() {
x = x + 1;
var temp = ImageURL.src;
UpdatedImageURL.src = temp + "?=t" + new Date().getTime();
var UpdatedImageURL = document.getElementById("webcam1");
document.getElementById("Test").innerHTML =
"Updating .... " + x;
}
}
}
}
}
</script>
</head>
<body onload="init();">
<p id="Load">Loading ....</p>
<p id="Test">Starting ....</p>
<img id="webcam1" alt=" " width="700" height="450" />
</body>
</html>
