www.webdeveloper.com
Results 1 to 2 of 2

Thread: Need help for a Photobooth

  1. #1
    Join Date
    Jan 2013
    Posts
    2

    Need help for a Photobooth

    Hi guys, I am new to Javascript and I would like to have some help. Right now I am busy creating a Photobooth 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
    Join Date
    Jan 2013
    Posts
    2
    bump. please help

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles