Question

我正在设置我的家庭网页，我希望从7台摄像机获得实时信息。对于其中的6个我必须使用刷新的jpeg，因为我能得到的只是当前视图或rtsp提要的快照。对于最后一个，我使用iframe，因为我可以获得一个不断刷新的网页。

因此，这是我用来刷新快照的脚本

<script>
var imageObj = new Image();
imageObj.onload = function() {
    drawOnCanvas();
    setTimeout(timedRefresh, 100);
  }
  // set src AFTER assigning load
imageObj.src = "http://192.168.2.136/snap.jpeg?" + Math.random();

function timedRefresh() {
  imageObj.src = "http://192.168.2.136/snap.jpeg?" + Math.random();
  //drawOnCanvas(); //flicker remover
}

function drawOnCanvas() {
  var canvas = document.getElementById("canvas1");
  var ctx = canvas.getContext("2d");
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.drawImage(imageObj, 0, 0, canvas.width, canvas.height);
}
</script>

它工作顺利但是当我添加第二个画布时，创建一个新脚本，而不是之前我将id更改为＆＃34; canvasX＆＃34;和目标IP到另一台摄像机

<script>
var imageObj = new Image();
imageObj.onload = function() {
    drawOnCanvas();
    setTimeout(timedRefresh, 100);
  }
  // set src AFTER assigning load
imageObj.src = "http://192.168.2.122/snap.jpeg?" + Math.random();

function timedRefresh() {
  imageObj.src = "http://192.168.2.122/snap.jpeg?" + Math.random();
  //drawOnCanvas(); //flicker remover
}

function drawOnCanvas() {
  var canvas = document.getElementById("canvas2");
  var ctx = canvas.getContext("2d");
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.drawImage(imageObj, 0, 0, canvas.width, canvas.height);
}
</script>

我试图在正文部分使用此代码渲染两个画布

<canvas id="canvas1" width="1080" height="608"> </canvas>
<canvas id="canvas2" width="1080" height="608"> </canvas>
<canvas id="canvas3... etc

只渲染最后一个画布，而其他所有画布都不会渲染。

所有的Feed应该是一个在另一个上面，所以当我滚动（这是智能手机专注）时，我可以看到所有的流;这就是为什么没有间距，或者由于大多数家用设备的1080x1920。我在RaspberryPi 3上的apache服务器上托管。

HTML页面，多次刷新＆＃34;在画布上绘制＆＃34;来自IPcamera快照

0 个答案: