Skip to content

Instantly share code, notes, and snippets.

@segphault

segphault/videotest2.html

Created January 20, 2012 10:09
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save segphault/1646536 to your computer and use it in GitHub Desktop.
Save segphault/1646536 to your computer and use it in GitHub Desktop.
Download ZIP
HTML5 photo booth
Raw
videotest2.html
<html>
<head>
<title>HTML5 Photo Booth</title>
</head>
<body>
<h2>HTML5 Photo Booth</h2>
<video id="live" autoplay></video>
<canvas id="snapshot" style="display:none"></canvas>
<p><a href="#" onclick="snap()">Take a picture!</a></p>
<div id="filmroll"></div>
<script type="text/javascript">
video = document.getElementById("live")
navigator.webkitGetUserMedia("video",
function(stream) {
video.src = window.webkitURL.createObjectURL(stream)
},
function(err) {
console.log("Unable to get video stream!")
}
)
function snap() {
live = document.getElementById("live")
snapshot = document.getElementById("snapshot")
filmroll = document.getElementById("filmroll")
snapshot.width = live.clientWidth
snapshot.height = live.clientHeight
c = snapshot.getContext("2d")
c.drawImage(live, 0, 0, snapshot.width, snapshot.height)
img = document.createElement("img")
img.src = snapshot.toDataURL("image/png")
img.style.padding = 5
img.width = snapshot.width / 2
img.height = snapshot.height / 2
filmroll.appendChild(img)
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment