-
Notifications
You must be signed in to change notification settings - Fork 4
/
index.html
93 lines (86 loc) · 3.2 KB
/
index.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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<html>
<head>
<title>Snapstr</title>
<link href='http://fonts.googleapis.com/css?family=Sonsie+One' rel='stylesheet' type='text/css'>
<style type='text/css' media='all'>
@import '/css/style.css';
</style>
<style type='text/css' media='all'>
@import '/libraries/colorbox/example1/colorbox.css';
</style>
<style type='text/css' media='print'>
@import '/css/print.css';
</style>
</head>
<body>
<div id="preload">
<embed src="/audio/camera1.wav" autostart="false" hidden="true" loop="false">
<embed src="/audio/beep.mp3" autostart="false" hidden="true" loop="false">
</div>
<div id="controls-wrapper">
<div id="controls">
<a href="#" class="facebook" onclick="window.open(this.href, 'facebook',
'left=20,top=20,width=640,height=270,toolbar=0,resizable=0'); return false;">facebook</a>
<a href="#" class="twitter" onclick="window.open(this.href, 'twitter',
'left=20,top=20,width=415,height=240,toolbar=0,resizable=0'); return false;">twitter</a>
<a href="#" class="tumblr" target="_blank">tumblr</a>
<a href="#" class="download" target="_blank">download</a>
<a href="#" onClick="window.print();return false;" class="print">print</a>
</div>
</div>
<div id="filmroll-wrapper">
<div id="slot-wrapper">
<div id="slot"></div>
<p>share your photos</p>
</div>
<div id="filmroll">
<h4>-Snapstr-</h4>
</div>
</div>
<div id="page">
<div id="wrapper">
<h1>Snapstr</h1>
<div id="video">
<video id="live" autoplay></video>
<canvas id="snapshot" style="display:none"></canvas>
</div>
<p><a href="#" id="start">Click Here to Begin</a></p>
<a href="#" id="snap" onClick="snap()"></a>
<p class="countdown"></p>
</div>
</div>
<script>
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")
// Make the canvas the same size as the live video
snapshot.width = live.clientWidth
snapshot.height = live.clientHeight
// Draw a frame of the live video onto the canvas
c = snapshot.getContext("2d")
c.drawImage(live, 0, 0, snapshot.width, snapshot.height)
// Create an image element with the canvas image data
img = document.createElement("img")
img.src = snapshot.toDataURL("image/png")
img.style.padding = 5
img.width = snapshot.width / 2
img.height = snapshot.height / 2
// Add the new image to the film roll
filmroll.appendChild(img)
}
</script>
<script src="/js/jquery.min.js"></script>
<script src="/js/snapstr.js"></script>
<script src="/libraries/colorbox/colorbox/jquery.colorbox-min.js"></script>
</body>
</html>