Search code examples
javascripthtmlimagerefreshsrc

Refresh a generated image

I am fairly unfamiliar with web technology.

A software that embeds a web server output a dynamic image on the local host:

<img src="http://localhost:8000/" alt="http://localhost:8000/" class="transparent shrinkToFit" width="419" height="428">

This image is updated regularly by the software. I am trying to display this update in the web browser. There are several related posts and I have tried two solutions but so far with no luck.

Below are two attempts inspired by existing code and both fail. The problem seems to be related to some caching effect but I am not sure how to work around this.

Thanks in advance,

Trad

   <html>
  <head>
    <title></title>
    <meta content="">
    <style></style>
    <!doctype html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link rel="stylesheet" href="rsc/stylesheet.css" type="text/css" charset="utf-8" />
<!--        <script>
                    setInterval(function() {
                        var url = "http://localhost:8000";//document.getElementById("url").value;
                        var xhr = new XMLHttpRequest();
                        xhr.open("GET",url);
                        xhr.responseType = "blob";
                        xhr.onreadystatechange = function() {
                        if (xhr.readyState == xhr.DONE && xhr.status == 200 ) { // xhr.readyState == xhr.DONE &&
                            // Render the downloaded image
                            var myblob = xhr.response;
                            var image = document.getElementById("ImageMusic");

                            image.addEventListener("load", function (evt) {
                URL.revokeObjectURL(evt.target.src);
                            });
            image.src = URL.createObjectURL(myblob);
                        }
                    }
                    xhr.send(null);
                    }, 100);



        </script>
-->
                <script>
                    setInterval(function() {
                        var myImageElement = document.getElementById('ImageMusic');
                        myImageElement.src = 'http://localhost:8000?rand=' + Math.random();
                    }, 100);
                </script>
        <script src="https://aframe.io/releases/0.3.0/aframe.min.js"></script>
  </head>
  <body>

        <a-scene>
            <a-assets>
                <img id="ImageMusic" src="http://localhost:8000" />
            </a-assets>
            <a-image position="1 1 -4" width="4" height="4" src="#ImageMusic"></a-image>
        </a-scene>
  </body>
</html>
Solution

  • It is not possible to use a web page as an image or texture.

    In the context of A-Frame, you cannot use I-Frames as an image or texture either, it is not possible in the browser.