public
Created

HTML5 photo booth with live sepia filter

  • Download Gist
videotest.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52
<html>
<head>
<title>HTML5 Photo Booth</title>
<style>
#live {
-webkit-filter: sepia(0.8);
}
</style>
</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: true, audio: false},
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>

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.