Need help for a Photobooth

Hi guys, I am new to Javascript and I would like to have some help. Right now I am trying to create a photobooth by using the webcam, I have found an article how to make one:

I want to add something extra to it, I want to use the Javascript feature “draggable” to drag a image (glasses) over the canvas and take a picture. When the picture is made the image file would be on the picture. Right now I can take pictures with the cam and I can drag an image over the canvas. But when I take a picture the image isn’t on the picture. Is it possible to fix this. Many thanks.

The current code I have is this:

<script src=“”></script>
<script src=“”></script>

<video id=“live” autoplay></video>
<div id=“draggable” class=“ui-widget-content”>
<p><img src=“images/h.png” width=“347” height=“347” id=“draggable”></p>

<canvas id=“foto” style=“display:none”></canvas>
<p><a href=“#” onClick=“takepicture()”>Take picture</a></p>

<div id=“filmroll”></div>

<script type=“text/javascript”>
video = document.getElementById(“live”)
{video: true, audio: true},
function(stream) {
video.src = window.webkitURL.createObjectURL(stream)
function(err) {
console.log(“Unable to get video stream!”)

function takepicture() {
live = document.getElementById(“live”)
photo = document.getElementById(“photo”)
filmroll = document.getElementById(“filmroll”)

photo.width = live.clientWidth
photo.height = live.clientHeight

var photo = document.getElementById(“canvas”);
var ctx = foto.getContext(“2d”);

var img;
function eventWindowLoaded(){
img = new Image();
img.src = “images/h.png”;
img.onload = function(){

img = document.createElement(“img”)
img.src = foto.toDataURL(“image/png”) = 5
img.width = foto.width / 2
img.height = foto.height / 2


$(function() {
$( “#draggable” ).draggable();

<div style=“position: absolute; top:50px; left:50px;”>
<canvas id=“canvas” width=“320” height=“250” >Does not Support Canvas</canvas>


Hi fh204,

Welcome to the forums!

Currently, when you hit “Take a picture”, your script does this:

[]grabs whatever is on the webcam
]draws it to a 2d canvas
[]creates an image
]sets the content of the image to that of the canvas
[*]outputs the image to the page
[/LIST]What you need to do is to hook into this process between steps 3 and 4.
Then you can draw your glasses (or whatever) on top of the snapshot which has just been taken, before an image is created and output to the screen.

To do this correctly, you need to get the position of your glasses in relation to the position of the picture generated by the webcam.
This is possible using [drag( event, ui ), as well as [URL=""]position()](

Here is a working demo I made for you:
I tested it on the latest Chrome on Win 7 and Win 8.

Here’s the code I used to make it:

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Comedy HTML5 Photo Booth</title>
    <script src=""></script>
    <script src=""></script>
      .floatLeft{ float: left; }
      .hide{ display: none; }
      .clear{ clear: both; }
    <h2>Comedy HTML5 Photo Booth</h2>
    <h3>Drag the moustache onto the photo</h3>
    <div id="container">
      <div id="videoColumn">
        <video id="live" autoplay></video>
      <div class="floatLeft">
        <div id="draggable" class="ui-widget-content">
          <img src="moustache.png" id="draggable">
        <canvas id="snapshot" class="hide"></canvas>
        <div id="filmroll"></div>
      <br class="clear" />
      <button onclick="snap()">Take a picture!</button>

    <script type="text/javascript">
      var onFailSoHard = function(e) {
        console.log('Reeeejected!', e);
      var video = document.getElementById("live")
      var xPosMoustache, yPosMoustache;
      navigator.getUserMedia  = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
      navigator.getUserMedia({audio: true, video: true}, function(stream) {
        video.src = window.URL.createObjectURL(stream);
      }, onFailSoHard);  
      function snap() {
        live = document.getElementById("live")
        snapshot = document.getElementById("snapshot")
        filmroll = document.getElementById("filmroll")

        // Make the canvas the same size as the live video
        snapshot.width = live.clientWidth
        snapshot.height = live.clientHeight

        // Draw a frame of the live video onto the canvas
        c = snapshot.getContext("2d")
        c.drawImage(live, 0, 0, snapshot.width, snapshot.height)
        // Overlay moustache
        moustache = new Image();
        moustache.src = 'moustache.png';
        v = $("#live");
        videoPosition = v.position();
        c.drawImage(moustache, xPosMoustache - videoPosition.left, yPosMoustache -;
        // Create an image element with the canvas image data
        img = document.createElement("img")
        img.src = snapshot.toDataURL("image/png") = 5
        img.width = snapshot.width / 2
        img.height = snapshot.height / 2

        // Add the new image to the film roll
        filmroll.innerHTML= '';
      $(function() {
        $( "#draggable" ).draggable({
          drag: function(){
            var offset = $(this).offset();
            xPosMoustache = offset.left;
            yPosMoustache =;

If you have any questions, just let me know.