2
2
// If you are getting a `Face detection service unavailable` error or similar,
3
3
// it's possible that it won't work for you at the moment.
4
4
5
- const video = document . querySelector ( " .webcam" ) ;
6
- const canvas = document . querySelector ( " .video" ) ;
7
- const ctx = canvas . getContext ( "2d" ) ;
8
- const faceCanvas = document . querySelector ( " .face" ) ;
9
- const faceCtx = faceCanvas . getContext ( "2d" ) ;
5
+ const video = document . querySelector ( ' .webcam' ) ;
6
+ const canvas = document . querySelector ( ' .video' ) ;
7
+ const ctx = canvas . getContext ( '2d' ) ;
8
+ const faceCanvas = document . querySelector ( ' .face' ) ;
9
+ const faceCtx = faceCanvas . getContext ( '2d' ) ;
10
10
const faceDetector = new window . FaceDetector ( ) ;
11
11
const optionsInputs = document . querySelectorAll (
12
12
'.controls input[type="range"]'
@@ -21,7 +21,7 @@ function handleOption(event) {
21
21
const { value, name } = event . currentTarget ;
22
22
options [ name ] = parseFloat ( value ) ;
23
23
}
24
- optionsInputs . forEach ( ( input ) => input . addEventListener ( " input" , handleOption ) ) ;
24
+ optionsInputs . forEach ( ( input ) => input . addEventListener ( ' input' , handleOption ) ) ;
25
25
26
26
// Write a fucntion that will populate the users video
27
27
async function populateVideo ( ) {
@@ -49,7 +49,7 @@ async function detect() {
49
49
function drawFace ( face ) {
50
50
const { width, height, top, left } = face . boundingBox ;
51
51
ctx . clearRect ( 0 , 0 , canvas . width , canvas . height ) ;
52
- ctx . strokeStyle = " #ffc600" ;
52
+ ctx . strokeStyle = ' #ffc600' ;
53
53
ctx . lineWidth = 2 ;
54
54
ctx . strokeRect ( left , top , width , height ) ;
55
55
}
0 commit comments