Mit HTML5, webrtc und einer Webcam die Website-Helligkeit anpassen
Kommentare

Dank Jos Dirksens HTML5 Background Changer passen sich Websites den Lichtverhältnissen an: Ist es sehr hell, werden die Kontraste hochgeschraubt und wird es dunkel, liegen die Farbwerte für Hintergrund

Dank Jos Dirksens HTML5 Background Changer passen sich Websites den Lichtverhältnissen an: Ist es sehr hell, werden die Kontraste hochgeschraubt und wird es dunkel, liegen die Farbwerte für Hintergrund und Schrift näher beieinander. Wer das ausprobieren möchte, kann einfach die Demo-Website aufsuchen oder sich das Video ansehen:

sorry, your browser does not support iframes

Um dies auf der eignen Website umzusetzen, müsst Ihr vier Schritte beachten: Zunächst muss der Gast dem Browser Zugriff auf seine Webcam erlauben. Im Chrome-Browser wird dies über die Chrome-Flags am Punkt „Medienquellen-API für &#60video&#62-Elemente aktivieren“ bewerkstelligt. Derzeit scheint ausschließlich der Chrome-Browser diese Schnittstelle verwenden zu können.

Im zweiten Schritt macht Ihr in kurzen Intervallen mit diesem API ein Foto vom Raum des Gasts und ermittelt darüber die Helligkeit der dortigen Umgebung. Dies bewerkstelligt Ihr, indem ihr den Videostream in einem &#60video&#62-Element ablegt, einen Ausschnitt davon in ein Canvas-Element überführt und dieses in Schritt 3 auswertet.

Diese Auswertung geschieht Pixel für Pixel und abschließend gibt es einen Mittelwert für die Helligkeit. Wenn dieser bestimmte Schwellenwerte über- oder unterschreitet, wird das CSS entsprechend umgestaltet, und die Seite passt ihren Kontrast an.

Als Machbarkeitsstudie ist Dirksens Projekt sicherlich sehr interessant und zeigt, wie dynamisch das Web mit HTML5 tatsächlich wird. Auf der anderen Seite ist fraglich, ob die Gäste einer Website sich beim Surfen die ganze Zeit beobachten lassen wollen – immerhin muss man eine (noch?) globale Einstellung im Browser ändern, die genau dies ermöglicht.

Zum Code gelangt Ihr über den Original-Post zum Luminance Changer.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -