Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Dieter Petereit 3. Dezember 2012

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

Wolfram Hempel baut eigent­lich Apps für Investmentbanken und ande­re Unternehmen des Finanzsektors. Apps, die die­sen Unternehmen unter ande­rem das Anbieten von Aktienhandel über das Internet ermög­li­chen. Um stets auf der Höhe der Technik zu agie­ren, beschäf­tigt sich Hempel inten­siv mit HTML 5. Wie er in sei­nem Blog schreibt, hat es ihm in letz­ter Zeit beson­ders der Webcam-Support ange­tan. Kurzerhand bau­te er eine JavaScript-Lösung, die klein, schnell und funk­tio­nal ist und dabei noch von jeder­mann kos­ten­los ein­ge­setzt wer­den kann.

HTML5-Webcam: Flexibles Widget erlaubt Selbstportraits via Browserfenster

Das schlan­ke JavaScript-Tool Photobooth.js steht in zwei Geschmacksrichtungen bereit. Einmal kann es, auf jQuery auf­set­zend genutzt wer­den, was sicher­lich in Umgebungen, in denen jQuery ohne­hin ein­ge­bun­den ist, sinn­voll ist. Zum ande­ren steht es jedoch auch völ­lig ohne Abhängigkeiten bereit. In letzt­ge­nann­ter Variante ist die Handhabung mit etwas mehr Schreibaufwand ver­bun­den, funk­tio­nal bestehen kei­ne Unterschiede.

Das Tool funk­tio­niert in allen Browsern, die .getUserMedia unter­stüt­zen. Allen vor­an bie­tet das Googles Chrome seit Version 21 und Opera seit Version 12. Im Firefox, der ab Version 17 eben­falls dazu in der Lage ist, läuft Photobooth nach Hempels Aussage nicht so per­for­mant. Verbesserungen sind in Arbeit. Safari- und IE-Nutzer schau­en in die all­seits bekann­te Röhre.

Verschiedene kon­fi­gu­rier­ba­re Funktionen erlau­ben es, Photobooth sehr genau der eige­nen Bedürfnislage anzu­pas­sen. Hierzu gehö­ren auch Basics, wie die Einstellungen, in wel­cher Breite und Höhe in Pixeln sich Photobooth zei­gen soll. In Firefox ist die rechts­sei­tig ange­ord­ne­te Toolbar, mit der sich Sättigung, Helligkeit und Kontrast jus­tie­ren las­sen, aus Performancegründen stan­dard­mä­ßig deak­ti­viert. Mittels einer manu­ell anzu­wen­den­den Funktion kann die Toolbar erzwun­gen wer­den.

Ruft man eine Website, die mit Photobooth aus­ge­stat­tet ist, auf, fragt eine Systemmeldung des Browsers nach, ob man der Website den Zugriff auf die Webcam erlau­ben will. Naheliegenderweise funk­tio­niert Photobooth nicht, wenn man die Genehmigung nicht erteilt. Erteilt man die Erlaubnis, wird ohne Umschweife das Live-Bild der Webcam inner­halb des Widgets ange­zeigt.

Hier besteht nun die Möglichkeit, mit Farb- und Helligkeitswerten zu spie­len, sowie einen Ausschnitt fest­zu­le­gen, der letzt­lich zum Inhalt des Shot wer­den wird. Ist alles zur Zufriedenheit ein­ge­stellt, reicht ein Klick auf das Kamera-Symbol. Die Aufnahme wird dann unter­halb des Webcam-Fensters zur Anzeige gebracht und kann von hier bequem gespei­chert wer­den. Das erfolgt hemds­är­me­lig via “Bild spei­chern unter”, rus­ti­kal aber funk­tio­nal.

Hempels Photobooth.js soll kei­ne voll­stän­di­ge Rund-um-Sorglos-Lösung sein, son­dern ist natür­lich ein Experiment, das bereits in die­sem jun­gen Stadium – es ist erst weni­ge Stunden alt – zeigt, wel­ches Potenzial in .getUserMedia steckt. Ich bin auf die Fortentwicklung des Experiments gespannt.

Photobooth.js kann auf Github her­un­ter­ge­la­den wer­den. HTML5-Interessierte soll­ten sich das Projekt in jedem Falle mal näher anse­hen.

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.

3 Kommentare

  1. Richtig coo­le Idee und super umge­setzt!

  2. Hallo, ich möch­te gern selbst eine HTML 5 cam in einer anwen­dung benut­zen, nun aber stol­pe­re ich über die abfra­ge ob das medi­um ver­wen­det wer­den darf. das kommt echt JEDES mal und ich fin­de kei­ne mög­lich­keit das auf einem com­pu­ter dau­er­haft zu erlau­ben (auch nicht in den chro­me ein­stel­lun­gen)… könn­test du mir da hel­fen?
    dan­ke! :)
    bas­ti

Schreibe einen Kommentar

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