Skip to content

Commit 98e8101

Browse files
jdstein1jdstein1
committed
clean up script.
1 parent 9657423 commit 98e8101

File tree

5 files changed

+145
-87
lines changed

5 files changed

+145
-87
lines changed

‎19--Webcam_Fun/README.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,4 +16,5 @@ README.md
1616
* [X] -- goofy background to show thru chroma key
1717
* [] -- toggle buttons w utils.js function
1818
* [] -- move other common stuff to utils.js
19-
* [] -- move CSS and JS to folders
19+
* [] -- move CSS and JS to folders
20+
* [] -- make RGB colorize effect work again

‎19--Webcam_Fun/controls.css‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
left:0;
77
bottom:0rem;
88
right:0;
9-
padding:0.25rem;
9+
padding:0.5rem;
1010
margin:0;
1111
background-color:rgba(0, 0, 0, 0.5);
1212
background:transparent;
@@ -34,19 +34,18 @@
3434
}
3535
.controls .ctrl_fx {flex:4;}
3636
.controls fieldset {
37-
background:white;
37+
color:black;
38+
border-color:transparent;
39+
background:rgba(255,255,255,0.75);
3840
box-shadow:0 0.25rem 1rem 0 rgba(0, 0, 0, 0.25);
39-
padding:0.25rem;
40-
margin:0.25em;
4141
}
4242
.controls legend {
43-
background:rgb(204,204,204);
43+
color:rgb(51,51,51);
44+
background:rgba(255,255,255,0.75);
4445
box-shadow:0 0.125rem 0.25rem 0 rgba(0, 0, 0, 0.5);
45-
/* color:black; */
46-
font-weight:900;
47-
margin-bottom:0.25rem;
4846
}
4947

48+
#fx {display:none;}
5049

5150
.ctrl_fx table label {width:100%;text-align:right;}
5251
.ctrl_fx table label span {max-width:6rem; width:40%; min-width:3rem; display:inline-block;}

‎19--Webcam_Fun/index-jds.html‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ <h1>webcam fun</h1>
3535
<input type="checkbox" id="limit" class="">
3636
<span>Limit?</span>
3737
</label>
38-
<button id="snap" class="btn_snap status info disabled" onClick="snapPhoto()" disabled>Snap</button>
38+
<button class="btn_snap status info disabled" onClick="snapPhoto()" disabled>Snap</button>
3939
<button class="btn_clear disabled" onClick="clearStrip()" disabled>Clear</button>
4040
</fieldset>
4141
<fieldset class="ctrl_fx">
@@ -67,7 +67,7 @@ <h1>webcam fun</h1>
6767
</td>
6868
</tr>
6969
<tr>
70-
<td><button class="status success" onClick="startStream()">Apply</button></td>
70+
<td><button class="btn_apply status success" onClick="startStream()">Apply</button></td>
7171
</tr>
7272
</table>
7373
<table id="ctrl_fx--split">
@@ -85,47 +85,47 @@ <h1>webcam fun</h1>
8585
</td>
8686
</tr>
8787
<tr>
88-
<td><button class="status success" onClick="startStream()">Apply</button></td>
88+
<td><button class="btn_apply status success" onClick="startStream()">Apply</button></td>
8989
</tr>
9090
</table>
9191
<table id="ctrl_fx--chroma">
9292
<tr>
9393
<td class="ctrl_r">
9494
<label for="rmin">
9595
<span>dark:</span>
96-
<input type="number" value=0 min=0 max=255 name="rmin">
96+
<input type="range" value=0 min=0 max=255 name="rmin">
9797
</label>
9898
</td>
9999
<td class="ctrl_g">
100100
<label for="gmin">
101101
<span>dark:</span>
102-
<input type="number" value=0 min=0 max=255 name="gmin">
102+
<input type="range" value=0 min=0 max=255 name="gmin">
103103
</label>
104104
</td>
105105
<td class="ctrl_b">
106106
<label for="bmin">
107107
<span>dark:</span>
108-
<input type="number" value=0 min=0 max=255 name="bmin">
108+
<input type="range" value=0 min=0 max=255 name="bmin">
109109
</label>
110110
</td>
111111
</tr>
112112
<tr>
113113
<td class="ctrl_r">
114114
<label for="rmax">
115115
<span>light:</span>
116-
<input type="number" value=0 min=0 max=255 name="rmax">
116+
<input type="range" value=0 min=0 max=255 name="rmax">
117117
</label>
118118
</td>
119119
<td class="ctrl_g">
120120
<label for="gmax">
121121
<span>light:</span>
122-
<input type="number" value=0 min=0 max=255 name="gmax">
122+
<input type="range" value=0 min=0 max=255 name="gmax">
123123
</label>
124124
</td>
125125
<td class="ctrl_b">
126126
<label for="bmax">
127127
<span>light:</span>
128-
<input type="number" value=0 min=0 max=255 name="bmax">
128+
<input type="range" value=0 min=0 max=255 name="bmax">
129129
</label>
130130
</td>
131131
</tr>

‎19--Webcam_Fun/scripts.js‎

Lines changed: 91 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
11
/* scripts.js */
22

3-
/* DOM NODES */
3+
/**
4+
* DOM NODES
5+
*/
46

7+
/* misc */
58
const video = document.querySelector('.video');
69
const photobooth = document.querySelector('.photobooth');
710
const photoboothA = document.querySelector('.photobooth::after');
811
const photoboothB = document.querySelector('.photobooth::before');
912
const canvas = document.querySelector('.canvas');
1013
const ctx = canvas.getContext('2d');
1114
const strip = document.querySelector('.strip');
12-
const btnSnap = document.querySelector('#snap');
1315
const snapSound = document.querySelector('.sound-snap');
1416
const snapLimit = document.querySelector('#limit');
1517

@@ -21,24 +23,29 @@ const alertFxMsgs = alertFx.querySelectorAll('.msg');
2123
const selectFx = ctrlFx.querySelector('#fx');
2224
/* array of tables of control interfaces */
2325
const ctrlTables = ctrlFx.querySelectorAll('table');
24-
/* video croma key controls */
25-
const fxChroma = ctrlFx.querySelector('#ctrl_fx--chroma');
26-
const inputsChroma = ctrlFx.querySelectorAll('#ctrl_fx--chroma input')
27-
/* video channel split controls */
28-
const fxSplit = ctrlFx.querySelector('#ctrl_fx--split');
29-
const selectSplit = ctrlFx.querySelector('#split');
3026
/* video channel colorize controls */
31-
const fxRGB = ctrlFx.querySelector('#ctrl_fx--rgb');
27+
const ctrlRGB = ctrlFx.querySelector('#ctrl_fx--rgb');
3228
const selectRGB = ctrlFx.querySelector('#rgb');
29+
const btnApplyRGB = ctrlRGB.querySelector('.btn_apply');
30+
/* video channel split controls */
31+
const ctrlSplit = ctrlFx.querySelector('#ctrl_fx--split');
32+
const selectSplit = ctrlFx.querySelector('#split');
33+
const btnApplySplit = ctrlSplit.querySelector('.btn_apply');
34+
/* video croma key controls */
35+
const ctrlChroma = ctrlFx.querySelector('#ctrl_fx--chroma');
36+
const inputsChroma = ctrlFx.querySelectorAll('#ctrl_fx--chroma input')
3337

3438
/* buttons */
35-
const btnCamOn = document.querySelector('.ctrl_camera .btn_on');
36-
const btnCamOff = document.querySelector('.ctrl_camera .btn_off');
37-
const btnCamClear = document.querySelector('.ctrl_camera .btn_clear');
38-
const btnStripClear = document.querySelector('.ctrl_strip .btn_clear');
39-
const btnStripSnap = document.querySelector('.ctrl_strip .btn_snap');
39+
const btnOn = document.querySelector('.ctrl_camera .btn_on');
40+
const btnOff = document.querySelector('.ctrl_camera .btn_off');
41+
const btnClearCam = document.querySelector('.ctrl_camera .btn_clear');
42+
const btnClearStrip = document.querySelector('.ctrl_strip .btn_clear');
43+
const btnSnap = document.querySelector('.ctrl_strip .btn_snap');
44+
45+
/**
46+
* VARIABLES
47+
*/
4048

41-
/* VARIABLES */
4249
let myStream;
4350
let front = true;
4451
let positionX = 0;
@@ -49,39 +56,36 @@ let videoInterval;
4956

5057
const stripMax = 5;
5158
const stripItemW = 150;
59+
const videoSettings = {audio: false, video: true};
60+
61+
/**
62+
* DEFAULT STATES
63+
*/
5264

53-
/* default states */
54-
// ctrlFx.style.display = 'none';
55-
// ctrlFx.classList.add('disabled');
56-
// selectFx.disabled = true;
57-
selectFx.style.display = 'none';
5865
snapLimit.checked = stripLimit;
5966
document.querySelector('.ctrl_strip label span').innerHTML = `Limit? (${stripMax})`;
6067

68+
/**
69+
* FUNCTIONS
70+
*/
6171

62-
/* FUNCTIONS */
63-
64-
const videoSettings = {
65-
audio: false,
66-
video: true
67-
// video: {
68-
// width: { min: 1024, ideal: 1280, max: 1920 },
69-
// height: { min: 776, ideal: 720, max: 1080 },
70-
// facingMode: (front ? "user" : "environment")
71-
// }
72-
};
73-
72+
/**
73+
* request access to client video and audio inputs.
74+
* @param {[type]} mode [description]
75+
* @param {[type]} effect [description]
76+
* @return {[type]} [description]
77+
*/
7478
function accessMedia(mode,effect) {
7579
console.group('START accessMedia');
7680
console.log('mode: ', mode);
7781
console.log('effect: ', effect);
7882
navigator.mediaDevices.getUserMedia(videoSettings)
79-
.then(function(mediaStream) {
83+
.then((mediaStream) => {
8084
myStream = mediaStream;
8185
if (mode && mode === 'start') {
8286
// turn video on
8387
video.src = window.URL.createObjectURL(myStream);
84-
video.onloadedmetadata = function(e) {
88+
video.onloadedmetadata = (e) => {
8589
video.play();
8690
};
8791
// photoboothB.style.opacity = 0;
@@ -107,19 +111,23 @@ function accessMedia(mode,effect) {
107111
btnSnap.disabled = true;
108112
btnSnap.classList.add('disabled');
109113
toggleControls();
110-
btnCamClear.disabled = false;
111-
btnCamClear.classList.remove('disabled');
114+
btnClearCam.disabled = false;
115+
btnClearCam.classList.remove('disabled');
112116
}
113117
console.log('video.src: ',video.src);
114118
console.log('myStream: ', myStream);
115119
})
116-
.catch(function(err) {
120+
.catch((err) => {
117121
console.error('err: ', err.name);
118122
// console.log(err.name + ": " + err.message); // always check for errors at the end.
119123
});
120124
console.groupEnd();
121125
}
122126

127+
/**
128+
* copy video pixels and put them in the canvas.
129+
* @return {[type]} [description]
130+
*/
123131
function pixelsToCanvas() {
124132
console.group('START pixelsToCanvas');
125133
// console.log(video);
@@ -198,8 +206,13 @@ function pixelsToCanvas() {
198206
console.log('selectRGB: ', selectRGB.value);
199207
} else {
200208
}
201-
202209
// console.log(canvas.width,canvas.height);
210+
211+
/**
212+
* manipulate pixels with video effect.
213+
* @param {[type]} fx [description]
214+
* @return {[type]} [description]
215+
*/
203216
function videoFX (fx) {
204217
// console.log('fx: ', fx);
205218
ctx.drawImage(video,positionX,positionY,vWidth,vHeight);
@@ -238,6 +251,11 @@ function pixelsToCanvas() {
238251
return videoInterval;
239252
}
240253

254+
/**
255+
* copy canvas data (photo with video manipulations) to a
256+
* photo strip.
257+
* @return {[type]} [description]
258+
*/
241259
function snapPhoto() {
242260
console.group('START snapPhoto');
243261
if (video.src !== '') {
@@ -270,8 +288,8 @@ function snapPhoto() {
270288
if (stripLen > 0) {
271289
strip.style.display = 'flex';
272290
document.querySelector('.ctrl_strip legend').innerHTML = `snapshots (${stripLen})`;
273-
btnStripClear.disabled = false;
274-
btnStripClear.classList.remove('disabled');
291+
btnClearStrip.disabled = false;
292+
btnClearStrip.classList.remove('disabled');
275293
} else {
276294
strip.style.display = 'none';
277295
}
@@ -284,37 +302,60 @@ function snapPhoto() {
284302
console.groupEnd();
285303
}
286304

305+
/**
306+
* reset canvas to no image.
307+
* @return {[type]} [description]
308+
*/
287309
function clearCanvas() {
288310
console.group('START clearCanvas');
289311
ctx.clearRect(0, 0, canvas.width, canvas.height);
290-
btnCamClear.disabled = true;
291-
btnCamClear.classList.add('disabled');
312+
btnClearCam.disabled = true;
313+
btnClearCam.classList.add('disabled');
292314
console.groupEnd();
293315
}
294316

317+
/**
318+
* reset photo strip to empty HTML element.
319+
* @return {[type]} [description]
320+
*/
295321
function clearStrip() {
296322
console.group('START clearStrip');
297323
strip.innerHTML = ``;
298324
stripLen = 0;
299325
strip.style.display = 'none';
300-
btnStripClear.disabled = true;
301-
btnStripClear.classList.add('disabled');
326+
btnClearStrip.disabled = true;
327+
btnClearStrip.classList.add('disabled');
328+
document.querySelector('.ctrl_strip legend').innerHTML = 'snapshots';
302329
console.groupEnd();
303330
}
304331

332+
/**
333+
* switch between front- and back-facing cameras (mobile devices only).
334+
* @return {[type]} [description]
335+
*/
305336
function flipCamera() {
306337
console.group('START flipCamera');
307338
front = !front;
308339
console.groupEnd();
309340
}
310341

342+
/**
343+
* start/restart the video and audio media input recording.
344+
* @param {[type]} effect [description]
345+
* @return {[type]} [description]
346+
*/
311347
function startStream(effect) {
312348
console.group('START startStream');
313349
clearInterval(videoInterval);
314350
accessMedia('start',effect);
315351
console.groupEnd();
316352
}
317353

354+
/**
355+
* stop the video and audio media input recording.
356+
* TODO: revoke access to video and audio media inputs.
357+
* @return {[type]} [description]
358+
*/
318359
function stopStream() {
319360
console.group('CAMERA OFF');
320361
clearInterval(videoInterval);
@@ -343,13 +384,13 @@ function toggleControls (x) {
343384
/* manipulate pixels */
344385
switch(x) {
345386
case 'chroma':
346-
fxChroma.style.display = 'table';
387+
ctrlChroma.style.display = 'table';
347388
break;
348389
case 'split':
349-
fxSplit.style.display = 'table';
390+
ctrlSplit.style.display = 'table';
350391
break;
351392
case 'rgb_channel':
352-
fxRGB.style.display = 'table';
393+
ctrlRGB.style.display = 'table';
353394
break;
354395
}
355396
} else {
@@ -360,8 +401,9 @@ function toggleControls (x) {
360401
}
361402
toggleControls();
362403

363-
364-
/* EVENT LISTENERS */
404+
/**
405+
* EVENT LISTENERS
406+
*/
365407

366408
/* when web cam starts, send pixels to canvas */
367409
video.addEventListener('canplay',pixelsToCanvas);

0 commit comments

Comments
 (0)