Rolf B: Bild aus Kamera laden

Beitrag lesen

SELF-Forum

Bild aus Kamera laden

Rolf B
– Informationen zu den Bewertungsregeln

Hallo worst_case,

da es deine persönliche Seite ist, mit der vermutlich niemand sonst konfrontiert wird als Du, unterlasse ich jetzt mal die Liste der Punkte, die man gegen dein HTML vorbringen könnte. Nur so viel:

  • HTML 4 ist out. Heute nimmt man HTML 5, und die Doctype-Angabe dazu sieht so aus:

    <!doctype html>

    fertig.

  • Man muss nicht alles absolut positionieren. Das erschwert das Design erheblich. Schau Dir Flexbox und Grid an. Das gilt auch für deine Button-„Tabelle“ - das geht auch als Grid.

  • Eine Image-Map ist ebenfalls eine knifflige Sache, vor allem, weil die Area-Angaben in px sind. Wenn das Hintergrundbild der Kamerasteuerung abstrakt ist (also kein verschörkeltes Foto), könntest Du überlegen, es mit SVG neu zu zeichnen, als inline-SVG zu verwenden und die Maus-Events direkt auf die SVG-Pfade zu legen.

Eventregistrierungen mit on-Attributen sind möglich, machen das HTML aber schwerer lesbar. Beschäftige Dich mit unobtrusive Javascript - in diesem Einleitungsartikel findet Du die Links zu addEventListener und Co.

Den globalen XMLHttpRequest verwendest Du nicht. Der kann weg.

Dein Ablauf ist also:

  • Das load Event auf dem Body ruft uhrzeit_stellen() auf. Dort wird das src Attribut des camimage gesetzt und ein 1s timer gestellt, der bild_neuladen aufruft. Die URL, die Du da setzt, sieht mir aber nicht nach einer Bild-URL aus, sondern nach einer Steuer-URL. Hier wäre ein XMLHttpRequest wohl sinnvoller.

  • In bild_neuladen wird der Timer beendet - was nicht nötig ist. Das brauchst Du nur, um einen noch nicht abgelaufenen Timer zu unterbrechen. Dann baust Du eine neue URL und setzt sie für Image-Objekt und <img> Element. D.h. jetzt laufen zwei Requests auf die gleiche Ressource parallel los. Das scheint mir nicht geschickt zu sein. Das passiert aber nur beim ersten Mal, danach wird jeweils der preload-Source in den img Source übertragen.

Soll der load-Handler dafür sorgen, dass es zu einem "Dauerfeuer" von Nachladevorgängen kommt? Bist Du sicher, dass der load-Handler auch bei unveränderter URL und unverändertem Kamerabild gerufen wird? Das könnte man auf einem iPhone „beweisen“, indem man irgendwo den aktuellen Timestamp auf die Seite einbaut und bei jedem bild_neuladen Aufruf aktualisiert. Denn wenn deine load-Schleife einmal abbricht, ist der Zyklus unterbrochen. Und ein Mobilgerät kann sich bei sowas durchaus anders verhalten als ein Desktop-Browser, um Ressourcen zu sparen.

Eine Alternative zum load-Handler wäre ein setInterval-Aufruf, der bild_neuladen bspw. alle 500ms aufruft. Diese Zeit musst Du für deine Bedingungen passend wählen. Das Image-Objekt hat eine Eigenschaft "complete", die true ist, wenn das Bild fertig geladen ist. Damit könntest Du pro Intervall prüfen, ob das neue Bild schon da ist. Wenn nicht, überspringst Du einen Updatezyklus.

Rolf

--
sumpsi - posui - obstruxi
Beitrag melden
–
Informationen zu den Bewertungsregeln