+- Javascript-forum (https://javascript-forum.de)
+-- Forum: Entwicklung (https://javascript-forum.de/forumdisplay.php?fid=4)
+--- Forum: Javascript (https://javascript-forum.de/forumdisplay.php?fid=6)
+--- Thema: wiederholtes ctx.drawImage belastet browser (/showthread.php?tid=2607)
wiederholtes ctx.drawImage belastet browser - jumbo125 - 03.10.2023
Hallo zusammen
Ich nutzte go2rtc um meine Webcams für den Browser zugänglich zu machen. Dies funktioniert auch sehr gut.
Die Darstellung erfolgt auf meinem Tablet mit 8GB Ram.
Leider bleibt das Video hier öfters hängen, aber ohne irgendeine Fehlermeldung.
Nach langem suchen glaube ich, das es am Android tablet und der Webview liegt, welche die Browser Daten rendert.
Als lösung habe ich ein Script programmiert, welches folgendermaßen funktioniert:
1. es erstellt ein Bild vom Camera-Bild welches NUR die Uhrzeit darstellt. (Das Bild ist nur 40px x 80 px) groß. Es wird in ein js canvas-element gespeichert
2. Danach wird ein neues Bild erstellt. wieder nur von der Uhrzeit, aber 2sekunden später. Es wird wieder in ein js canvas-element erstellt
3. Danach werden die zwei Canvas mit pixelmatch verglichen
4. falls es sich um das gleiche bild handelt, ist es leider steckengebleiben und das video wird einfach neu geladen(die seite wird einfach neugeladen)
code teile:
Javascript:
Code:
var ctx = canvas1.getContext('2d');
ctx.drawImage( video, start_x, start_y, canvas1.width, canvas1.height, 0, 0 , canvas1.width, canvas1.height );Javascript:
Code:
var ctx = canvas2.getContext('2d');
ctx.drawImage( video, start_x, start_y, canvas2.width, canvas2.height, 0, 0 , canvas2.width, canvas2.height );Javascript:
Code:
var same_pic = pixelmatch(canvas1_img_data.data, canvas2_img_data.data, diff_data.data, crop_img_width, crop_img_height, {threshold: 0.1});
//create image with differenze for debugging
diffContext.putImageData(diff_data, 0, 0);Das funktioniert auch super.
Immer wieder wenn ich auf das Tablet schaue, läuft das Video flüssig.
Das Problem:
Das Tablet zeigt nach einiger Zeit "Die App reagiert nicht mehr."
Nebenbei muss ich erwähnen, dass der Browser voll reagiert. Nun habe ich in einem Android Forum das Problem geschildert, mit der Info, dass der Browser voll funktionsfähig trotz fehlermeldung ist. Daher liegt der Fehler an der Webview
FAZIT:
Durch das wiederholte erstellen und vergleichen dürfte die Webview, welche das Material rendert nicht klar kommen.
Meine Frage:
ist dies wirklich sehr brwoser belastend? wie kann ich es optimieren?
macht es sinn, diecanvas immer wieder zu löschen? oder ist das unnötig, da sie immer wieder neu befüllt werden?