Dieter Petereit 3. Dezember 2012

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

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:

Dieter Petereit

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design. Man findet ihn auch auf Twitter und Google+.
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

3 Kommentare

  1. Richtig coole Idee und super umgesetzt!

  2. 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

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Cookies

Weitere Informationen zu den Auswahlmöglichkeiten findest du hier. Dazu musst du zunächst keine Auswahl treffen!

Um Dr. Web zu besuchen, musst du eine Auswahl treffen.

Deine Auswahl wurde gespeichert!

Informationen zu den Auswahlmöglichkeiten

Was du erlaubst!

Um fortfahren zu können, musst du eine Auswahl treffen. Nachfolgend erhältst du eine Erläuterung der verschiedenen Optionen und ihrer Bedeutung.

  • Ich stimme zu:
    Du erlaubst uns das Setzen aller Cookies, die wir in unseren Datenschutzhinweisen genannt haben. Dazu gehören Tracking- und Statistik-Cookies. Aus dem Tracking per Google Analytics bieten wir auf der Seite Datenschutz ein Opt-Out, also die Möglichkeit der Abmeldung, an.
  • Ich stimme nicht zu:
    Wir verzichten bei dieser Option auf den Einsatz von Google Analytics. Die für den Betrieb von Dr. Web notwendigen Cookies werden aber dennoch gesetzt. Einzelheiten entnimmst du bitte den Datenschutzhinweisen

Du kannst deine Cookie-Einstellungen jederzeit hier ändern: Datenschutz. Impressum

Zurück