JavaScript & jQuery

Photobooth.js: HTML5-Webcam für die eigene Website

3. Dezember 2012
von

Wolfram Hempel baut eigentlich Apps für Investmentbanken und andere Unternehmen des Finanzsektors. Apps, die diesen Unternehmen unter anderem das Anbieten von Aktienhandel über das Internet ermöglichen. Um stets auf der Höhe der Technik zu agieren, beschäftigt sich Hempel intensiv mit HTML 5. Wie er in seinem Blog schreibt, hat es ihm in letzter Zeit besonders der Webcam-Support angetan. Kurzerhand baute er eine JavaScript-Lösung, die klein, schnell und funktional ist und dabei noch von jedermann kostenlos eingesetzt werden kann.

HTML5-Webcam: Flexibles Widget erlaubt Selbstportraits via Browserfenster

Das schlanke JavaScript-Tool Photobooth.js steht in zwei Geschmacksrichtungen bereit. Einmal kann es, auf jQuery aufsetzend genutzt werden, was sicherlich in Umgebungen, in denen jQuery ohnehin eingebunden ist, sinnvoll ist. Zum anderen steht es jedoch auch völlig ohne Abhängigkeiten bereit. In letztgenannter Variante ist die Handhabung mit etwas mehr Schreibaufwand verbunden, funktional bestehen keine Unterschiede.

Das Tool funktioniert in allen Browsern, die .getUserMedia unterstützen. Allen voran bietet das Googles Chrome seit Version 21 und Opera seit Version 12. Im Firefox, der ab Version 17 ebenfalls dazu in der Lage ist, läuft Photobooth nach Hempels Aussage nicht so performant. Verbesserungen sind in Arbeit. Safari- und IE-Nutzer schauen in die allseits bekannte Röhre.

Verschiedene konfigurierbare Funktionen erlauben es, Photobooth sehr genau der eigenen Bedürfnislage anzupassen. Hierzu gehören auch Basics, wie die Einstellungen, in welcher Breite und Höhe in Pixeln sich Photobooth zeigen soll. In Firefox ist die rechtsseitig angeordnete Toolbar, mit der sich Sättigung, Helligkeit und Kontrast justieren lassen, aus Performancegründen standardmäßig deaktiviert. Mittels einer manuell anzuwendenden Funktion kann die Toolbar erzwungen werden.

Ruft man eine Website, die mit Photobooth ausgestattet ist, auf, fragt eine Systemmeldung des Browsers nach, ob man der Website den Zugriff auf die Webcam erlauben will. Naheliegenderweise funktioniert Photobooth nicht, wenn man die Genehmigung nicht erteilt. Erteilt man die Erlaubnis, wird ohne Umschweife das Live-Bild der Webcam innerhalb des Widgets angezeigt.

Hier besteht nun die Möglichkeit, mit Farb- und Helligkeitswerten zu spielen, sowie einen Ausschnitt festzulegen, der letztlich zum Inhalt des Shot werden wird. Ist alles zur Zufriedenheit eingestellt, reicht ein Klick auf das Kamera-Symbol. Die Aufnahme wird dann unterhalb des Webcam-Fensters zur Anzeige gebracht und kann von hier bequem gespeichert werden. Das erfolgt hemdsärmelig via “Bild speichern unter”, rustikal aber funktional.

Hempels Photobooth.js soll keine vollständige Rund-um-Sorglos-Lösung sein, sondern ist natürlich ein Experiment, das bereits in diesem jungen Stadium – es ist erst wenige Stunden alt – zeigt, welches Potenzial in .getUserMedia steckt. Ich bin auf die Fortentwicklung des Experiments gespannt.

Photobooth.js kann auf Github heruntergeladen werden. HTML5-Interessierte sollten sich das Projekt in jedem Falle mal näher ansehen.

Links zum Beitrag:

ist seit 1994 im Netz unterwegs, aber bereits seit fast 30 Jahren in der IT daheim. Seit 2008 schreibt er für Dr. Web, seit 2012 ist er Chefredakteur des Magazins. Man findet ihn auch auf Twitter und Facebook, aktiver ist er allerdings auf Google+.

Tags: , ,

3 Kommentare zu „Photobooth.js: HTML5-Webcam für die eigene Website
  1. […] Eine Webcam für die eigene Website kann man mit "Photobooth.js" leicht mit HTML5 basteln: drweb.de. […]

  2. Basti am 10. Januar 2013 um 23:04

    Hallo, ich möchte gern selbst eine HTML 5 cam in einer anwendung benutzen, nun aber stolpere ich über die abfrage ob das medium verwendet werden darf. das kommt echt JEDES mal und ich finde keine möglichkeit das auf einem computer dauerhaft zu erlauben (auch nicht in den chrome einstellungen)… könntest du mir da helfen?
    danke! :)
    basti

  3. Stefan am 9. Januar 2014 um 08:26

    Richtig coole Idee und super umgesetzt!

Ein Kommentar? Schön!

Wir freuen uns immer über Leser, die durch nützliche und konstruktive Beiträge zum Thema eine Diskussion anstoßen oder den Artikel mit weiteren Informationen anreichern. Alle Kommentare werden in diesem Sinne moderiert. Zum Kommentar-Fairplay gehört für uns auch der Einsatz von rel="nofollow". Bitte verwenden Sie zudem als Namen weder eine Domain noch ein spamverdächtiges Wort. Vielen Dank!