Ich richte meine Home-Website, wo ich Live-Feed von meinen 7 Kameras haben wollen. Für 6 von ihnen muss ich ein erfrischendes JPEG verwenden, da alles, was ich bekommen kann, ist ein Schnappschuss der aktuellen Ansicht oder ein rtsp feed. Für den letzten benutze ich einen iframe, da ich eine konstante erneuernde Webseite erhalten kann.HTML-Seite, mehrere erfrischende "Draw auf Canvas" von IPcamera Snapshots
Also, das ist das Skript, das ich verwende, um den Schnappschuss zu aktualisieren
<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>
Es funktioniert reibungslos, aber wenn ich hinzufügen, eine zweite Leinwand, ein neues Skript afther vorherigen schaffen, in dem ich die ID ändern „canvasX "und die Ziel-IP auf eine andere Kamera
<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>
und ich versuche, sowohl Leinwand zu machen mit diesem Code in dem Körperabschnitt
<canvas id="canvas1" width="1080" height="608"> </canvas>
<canvas id="canvas2" width="1080" height="608"> </canvas>
<canvas id="canvas3... etc
nur die letzte Leinwand wird gerendert und alle anderen werden einfach nicht gerendert.
Alle Feeds sollten übereinander liegen, also wenn ich scrolle (das ist Smartphone fokussiert), kann ich alle Streams sehen; Aus diesem Grund gibt es keinen Abstand oder sonst, aufgrund der 1080x1920 der meisten Heimgeräte. Ich hosting auf einem Apache-Server auf einem RaspberryPi 3.
Haben Sie in Ihrem Code zweimal Methoden wie timedRefresh definiert? Wenn Sie Code mit