SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Jan 2013
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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:
    http://arstechnica.com/business/2012...ew-webcam-api/

    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:
    <html>
    <head>
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
    </head>
    <body>

    <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>
    </div>

    <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")
    navigator.webkitGetUserMedia(
    {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(){
    ctx.drawImage(img,0,0);
    }
    }

    img = document.createElement("img")
    img.src = foto.toDataURL("image/png")
    img.style.padding = 5
    img.width = foto.width / 2
    img.height = foto.height / 2

    filmroll.appendChild(img)
    }

    $(function() {
    $( "#draggable" ).draggable();
    });
    </script>

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

    </body>
    </html>

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,872
    Mentioned
    206 Post(s)
    Tagged
    12 Thread(s)
    Hi fh204,

    Welcome to the forums!

    Currently, when you hit "Take a picture", your script does this:
    1. grabs whatever is on the webcam
    2. draws it to a 2d canvas
    3. creates an image
    4. sets the content of the image to that of the canvas
    5. outputs the image to the page
    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 position().

    Here is a working demo I made for you: http://hibbard.eu/blog/pages/photo-booth/
    I tested it on the latest Chrome on Win 7 and Win 8.

    Here's the code I used to make it:

    HTML Code:
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Comedy HTML5 Photo Booth</title>
        <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
        <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
        <style>
          #videoColumn{
            float:left; 
            margin-bottom:15px; 
            padding-right:25px;
          }
          .floatLeft{ float: left; }
          .hide{ display: none; }
          .clear{ clear: both; }
        </style>
      </head>
      
      <body>
        <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>
          
          <div class="floatLeft">
            <div id="draggable" class="ui-widget-content">
              <img src="moustache.png" id="draggable">
            </div>
            
            <canvas id="snapshot" class="hide"></canvas>
            <div id="filmroll"></div>
          </div>
              
          <br class="clear" />
          <button onclick="snap()">Take a picture!</button>
    
        </div>
        
        <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 - videoPosition.top);
            
            // Create an image element with the canvas image data
            img = document.createElement("img")
            img.src = snapshot.toDataURL("image/png")
            img.style.padding = 5
            img.width = snapshot.width / 2
            img.height = snapshot.height / 2
    
            // Add the new image to the film roll
            filmroll.innerHTML= '';
            filmroll.appendChild(img)
          }
          
          $(function() {
            $( "#draggable" ).draggable({
              drag: function(){
                var offset = $(this).offset();
                xPosMoustache = offset.left;
                yPosMoustache = offset.top;
              }
            });        
          });
        </script>
      </body>
    </html>
    If you have any questions, just let me know.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •