Skip to content
Create a gist now

Instantly share code, notes, and snippets.

HTML5 photo booth with live sepia filter
<title>HTML5 Photo Booth</title>
#live {
-webkit-filter: sepia(0.8);
<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") = 5
img.width = snapshot.width / 2
img.height = snapshot.height / 2
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.