HTML5 Webcam for your website

Usage

Browser Support

Photobooth is supported in all browsers that support navigator.getUserMedia. In Firefox some features are disabled for performance reasons. To override this use forceHSB. Please note: For earlier versions of Firefox it might be necessary to set navigator.media.enabled in about:config to true.

since 21	since 17	no	since 12	no

Api

• new Photobooth( DOMElement );

  Creates the photobooth in the specified DOMElement. If the provided DOMElement isn't attached yet, resize() needs to be called to set Photobooth's size.

  • jQuery
  • standalone

  $( '#example' ).photobooth();

  myPhotobooth = new Photobooth( document.getElementById( "container" ) );
• onImage

  The function that Photobooth calls when the user clicks the camera icon. Receives a dataUrl string as an argument

  • jQuery
  • standalone

  $( '#example' ).on( "image", function( event, dataUrl ){ // do stuff... });

  myPhotobooth.onImage = function( dataUrl ){ // do stuff... };
• resize( with, height );

  Resizes the photobooth to the specified width and height ( in Pixel );

  Minimum width and height are 200px
  • jQuery
  • standalone

  $( '#example' ).data( "photobooth" ).resize( 400, 300 );

  myPhotobooth.resize( 400, 300 );
• pause();

  Closes the videostream, cancels the canvas drawing loop and frees up the webcam. Use resume() to continue

  • jQuery
  • standalone

  $( '#example' ).data( "photobooth" ).pause();

  myPhotobooth.pause();
• resume();

  Resumes video playback that had previously been paused with pause().

  • jQuery
  • standalone

  $( '#example' ).data( "photobooth" ).resume();

  myPhotobooth.resume();
• destroy();

  Destroys the photobooth. Closes the video stream, cancels all outstanding frames and destroys the DOM elements and eventlisteners.

  • jQuery
  • standalone

  $( '#example' ).data( "photobooth" ).destroy();

  myPhotobooth.destroy();
• forceHSB

  Photobooth's hue/saturation/brightness adjusment is by default turned of in Firefox for performance reasons. In order to override this setting, set forceHSB to true.

  • jQuery
  • standalone

  $( '#example' ).data( "photobooth" ).forceHSB = true;

  myPhotobooth.forceHSB = true;
• isSupported

  is true if the browser supports webcams ( getUserMedia ) and false if not.

  • jQuery
  • standalone

  if( !$( '#example' ).data( "photobooth" ).isSupported ) { // do stuff... }

  if( !myPhotobooth.isSupported ) { // do stuff... }