用Javascript更新网络摄像头图像

时间:2020-03-10 15:42:30

标签: javascript html image refresh

我对此有严重的脑痛。我有一个网络摄像头,我每5秒钟拍摄一次图像。我已阅读所有评论,并且可以成功显示网络摄像头中的图像,但无法更新该图像。我已经阅读了类似的文章,并尝试了一切。 我想念什么吗?

这就是我所拥有的:

<!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>

0 个答案:

没有答案