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>