This repository has been archived by the owner on Jan 9, 2019. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 15
/
accessing-webcam.html
157 lines (140 loc) · 3.84 KB
/
accessing-webcam.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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Accessing Webcam - iodide</title>
<link rel="stylesheet" type="text/css" href="https://iodide.io/stable/iodide.stable.css">
</head>
<body>
<script id="jsmd" type="text/jsmd">
%% meta
{
"title": "Accessing Webcam",
"lastSaved": "2018-05-09T08:47:38.729Z",
"lastExport": "2018-05-09T21:24:03.486Z"
}
%% md
# Take a Selfie and Apply Filters Tutorial
This tutorial will use an Iodide notebook to access your webcam in order to take a selfie, apply filters, and download the photo.
%% md
In the markdown cell below we will write the html for our selfie application. It will include a video element for the webcam feed, a canvas element to show the selfie, and control buttons to take the selfie and apply filters to the selfie.
%% md
<div id="container">
<video id="video" autoplay></video>
<div id="control-panel">
<button id="selfie">Take Selfie</button>
<div id="filter-panel">
<label for="select">Filter: </label>
<select id="filter">
<option value="none">None</option>
<option value="blur">Blur</option>
<option value="grayscale">Grayscale</option>
<option value="invert">Invert</option>
<option value="sepia">Sepia</option>
</select>
</div>
</div>
<canvas id="canvas"></canvas>
</div>
%% md
The CSS cell below provides some styling and layout for our application and some filter classes that we will apply to our selfie.
%% css
/* layout */
#container {
display: flex;
flex-flow: column wrap;
align-items: center;
font-size: 24px;
}
#video {
height: 300px;
}
#control-panel {
display: flex;
flex-flow: column nowrap;
align-items: center;
justify-content: center;
width: 100%;
}
#control-panel button, select {
font-size: 24px;
}
#filter-panel {
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content:center;
width: 100%;
}
/* filters */
.none {
-webkit-filter: none;
-moz-filter: none;
filter: none;
}
.blur {
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
filter: blur(3px);
}
.grayscale {
-webkit-filter: grayscale(1);
-moz-filter: grayscale(1);
filter: grayscale(1);
}
.invert {
-webkit-filter: invert(1);
-moz-filter: grayscale(1);
filter: invert(1);
}
.sepia {
-webkit-filter: sepia(1);
-moz-filter: sepia(1);
filter: sepia(1);
}
%% md
The javascript cell below creates the actions for our take selfie and filter buttons.
%% js
// Get all elements we will need
var controls = document.querySelector('#control-panel')
var selfieButton = controls.querySelector('button#selfie');
var filterSelect = controls.querySelector('select#filter');
var downloadButton = controls.querySelector('button#download');
var canvas = document.querySelector('#canvas');
var video = document.querySelector('#video');
// take selfie
selfieButton.onclick = function() {
canvas.className = filterSelect.value;
canvas.width = video.getBoundingClientRect().width;
canvas.height = video.getBoundingClientRect().height;
canvas.getContext('2d').drawImage(video, 0, 0, video.getBoundingClientRect().width, video.getBoundingClientRect().height);
};
// change css filter on images
filterSelect.onchange = function() {
video.className = filterSelect.value;
canvas.className = filterSelect.value;
};
%% md
Now start the video feed!
%% js
// start video
var video = document.getElementById('video');
navigator.mediaDevices.getUserMedia({
video: true
})
.then(function(stream) {
video.srcObject = stream;
})
.catch(function(error) {
console.log('error', error);
});
%% md
__original author__: John A. Torres (jandrewtorres) <br/>
__contributors__: jandrewtorres <br/>
__maintainer__: jandrewtorres <br/>
__submission date__: 5/9/18 <br/>
</script>
<div id='page'></div>
<script src='https://iodide.io/stable/iodide.stable.js'></script>
</body>
</html>