Skip to content

@segphault /videotest.html
Created

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
HTML5 photo booth with live sepia filter
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.