jsHtml5PhotoBooth – take snapshots from webcam stream, apply watermark, rotate and print result without prompt

Hi everyone,

This is one of my favorite plugin I’ve ever developed.

jsHtml5PhotoBooth is a powerful native javascript object that helps you take snapshots from your webcam stream, and do many other actions like:
– Apply a watermark to the picture
– Rotate the picture if needed
– Print directly the taken picture, without prompt (only work on local machines, and, on windows systems actually)

This plugin is very complete. It needs some parameters you have to be familiar with, but at the end, it will be very helpful and will save you a lot of time.

This is how to configure it:

//Instantiate the object
var jsPhotoBooth = new jsHtml5PhotoBooth();

jsPhotoBooth.width                       = '640';               //Width of the canvas and video tag element
jsPhotoBooth.height                      = '480';               //Height of the canvas and video tag element

jsPhotoBooth.resultTagIdHost             = 'media';             //Div id where to store (the picture taken by the user)
jsPhotoBooth.resultTagId                 = 'myPicture';         //Id of the result picture to show to user inside the resultTagIdHost

jsPhotoBooth.videoTagIdHost              = 'media';             //Div id where to store (video and canvas html tag element)
jsPhotoBooth.videoTagId                  = 'video';             //Id of the video tag element
jsPhotoBooth.canvasTagId                 = 'canvas';            //Id of the canvas tag element

jsPhotoBooth.pictureExtension            = 'jpeg';             //Picture extension (jpeg, png, gif, bmp)
jsPhotoBooth.pictureQuality              = '1';                 //Picture quality (from 0.0 to 1)

jsPhotoBooth.captureFromCanvas           = false;               //If you want to apply live webcam effects or not, from another script

jsPhotoBooth.showStreamOnFinish          = true;                //Show the video stream after the picture has been taken
jsPhotoBooth.hideWebcamWhileSnapshot     = true;                //Hide webcam while snapshot, strongly improves performance

jsPhotoBooth.mediaPath                   = '/medias/Temp/';     //Path where to store te picture on the server
jsPhotoBooth.phpFile                     = '/form/pictureProcess.php'; //Php file that will proceed to picture saving on the server

 * This only works on local machines
jsPhotoBooth.printPictureOnFinish        = true;                //Works only on windows system (You can update the batch file to your needs)
jsPhotoBooth.printOptionComputerName     = 'YOUR_COMPUTER_NAME';        //Computer name to target the network
jsPhotoBooth.printOptionSharedPrinterName= 'YOUR_SHARED_PRINTER_NAME';    //Name of the shared printer inside your windows network
jsPhotoBooth.printBatchFile              = '/form/print.bat';    //Automatically generated and deleted

 * Apply watermark to the picture
jsPhotoBooth.watermarkImage              = '/medias/watermark.gif';  //Path where to find the watermark image

 * Apply rotation to the output
jsPhotoBooth.rotation                    = 0;  //Rotate the picture

And, This is how to run it:

//Start the plugin

function startCapture() {

 * You can use "save", "saveAndDownload" or "saveAndStream", "downloadAndStream" parameters
function stopRecording() {
    //For demo

    //Use this in production

The complete code is hosted on Github: https://github.com/edouardkombo/jsHtml5PhotoBooth
Demo is available here: https://edouardkombo.github.io/jsHtml5PhotoBooth/demo
To download from Bower:

bower install js-html5-photo-booth
jsHtml5PhotoBooth – take snapshots from webcam stream, apply watermark, rotate and print result without prompt

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s