Question

我正在为一个机器人的仪表板工作，该仪表板上有一个<img>标签，用于从该机器人上加载网络摄像头。我需要制作一个状态指示器（一个<p>标记），如果成功加载了网络摄像头，则显示为联机或活动状态；如果无法加载网络摄像头，则显示为断开状态或不可用。

这是我无法使用的代码（注释）：

<div class="topLineView">
        <div class="leftBoxes">
            <div class="firstPersonViewDiv" onload="updateImage();">

                <!-- Old Robot Webcam System
                <img src="http://10.2.54.2:5800/" alt="robot-camera"></img>
                <img id="robot-video" src="http://dreamicus.com/data/image/image-06.jpg" class="firstPersonViewImg" onerror="this.src="2609.jpg" alt="robot-camera"></img>
                -->
                <!-- <script>
                    window.onload = function () {
                        var imageNr = 0;
                        var webcam;

                        function startStream() {
                            webcam = document.getElementById("robot-video");

                            setInterval(renewStream, 2000);
                        }

                        function renewStream() {
                            webcam.src = "http://10.26.9.2:1181/?action=stream" + (++imageNr);
                        }
                    }
                </script> -->
                <img id="robot-video" src="http://10.26.9.2:1181/?action=stream" style="color: red; font-size: 30px; font-weight: bold; padding-top: 20px; width: 500px; height: 380px;" class="firstPersonViewImg" alt="Could not connect to robot webcam. Attempting to connect every two seconds...                                           ">
                <!-- Old Robot Video Refresh System
                <script>
                  window.onload = function() {
                    var image = document.getElementById("robot-video");

                    function updateImage(){
                      image.src = image.src.split("?")[0] + "?" + new Date().getTime();
                    }
                    setInterval(updateImage, 500);
                  }
                </script>
                -->
            </div>
        </div>

Answer 1

尝试一下

let errSimulation=0;

function freshImageUrl() {  
  errSimulation++; if(!(errSimulation%4)) return "zz"; // remove this line

  var baseUrl="http://lorempixel.com/400/200?action=stream&";  
  return `${baseUrl}v=${+new Date}`;  // e.g.  http://...v=1549616957345
}

function refresh(pauseTime) {   
    setTimeout(()=> {
      document.querySelector(".status").innerText="Active";
      document.querySelector("#robot-video").src=freshImageUrl();      
    },pauseTime);
}

function loadErr(e) {   
    document.querySelector(".status").innerText="Unavailable"
    document.querySelector("#robot-video").alt = "Could not connect to robot webcam. Attempting to connect every two seconds...";
    refresh(2000);
}

setTimeout(refresh, 1000);

<div class="topLineView">
    <p class="status">Conneting...</p>
    <div class="leftBoxes">
        <div class="firstPersonViewDiv" onload="updateImage();">

            <img onerror="loadErr()" onload="refresh(1000)" id="robot-video" style="color: red; font-size: 30px; font-weight: bold; padding-top: 20px; width: 500px; height: 380px;" class="firstPersonViewImg">

        </div>
    </div> 
</div>

freshImageUrl（）包含baseUrl（应将其更改为：http://10.26.9.2:1181/?action=stream&），并使用附加参数“ v = unixTimestamp”生成指向图像的链接，这将阻止浏览器缓存图像并始终重新加载该图像。 pauseTime中的refresh表示在下一次加载图像之前需要额外等待（以毫秒为单位）。

如何根据是否加载图像来更改段落的内容？

1 个答案: