add a note about face detection not working on all systems

Author: Asjas

exercises/55 - Face Detection Censorship/pixelated-face-DEMO.js

@@ -1,9 +1,13 @@
+// The face detection does not work on all browsers and operating systems.
+// If you are getting a `Face detection service unavailable` error or similar,
+// it's possible that it won't work for you at the moment.
+
 const faceDetector = new window.FaceDetector();
-const video = document.querySelector('video.webcam');
-const canvas = document.querySelector('canvas.video');
-const ctx = canvas.getContext('2d');
-const faceCanvas = document.querySelector('canvas.face');
-const faceCtx = faceCanvas.getContext('2d');
+const video = document.querySelector("video.webcam");
+const canvas = document.querySelector("canvas.video");
+const ctx = canvas.getContext("2d");
+const faceCanvas = document.querySelector("canvas.face");
+const faceCtx = faceCanvas.getContext("2d");
 const SCALE = 1.2;
 const SIZE = 10;
 
@@ -64,7 +68,7 @@ function censor({ boundingBox: face }) {
 }
 function drawFace(face) {
   const { width, height, top, left } = face.boundingBox;
-  ctx.strokeStyle = '#ffc600';
+  ctx.strokeStyle = "#ffc600";
   ctx.lineWidth = 1;
   ctx.strokeRect(left, top, width, height);
   ctx.stroke();

exercises/55 - Face Detection Censorship/pixelated-face-FINISHED.js

@@ -1,8 +1,12 @@
-const video = document.querySelector('.webcam');
-const canvas = document.querySelector('.video');
-const ctx = canvas.getContext('2d');
-const faceCanvas = document.querySelector('.face');
-const faceCtx = faceCanvas.getContext('2d');
+// The face detection does not work on all browsers and operating systems.
+// If you are getting a `Face detection service unavailable` error or similar,
+// it's possible that it won't work for you at the moment.
+
+const video = document.querySelector(".webcam");
+const canvas = document.querySelector(".video");
+const ctx = canvas.getContext("2d");
+const faceCanvas = document.querySelector(".face");
+const faceCtx = faceCanvas.getContext("2d");
 const faceDetector = new window.FaceDetector();
 const optionsInputs = document.querySelectorAll(
   '.controls input[type="range"]'
@@ -17,7 +21,7 @@ function handleOption(event) {
   const { value, name } = event.currentTarget;
   options[name] = parseFloat(value);
 }
-optionsInputs.forEach(input => input.addEventListener('input', handleOption));
+optionsInputs.forEach((input) => input.addEventListener("input", handleOption));
 
 // Write a fucntion that will populate the users video
 async function populateVideo() {
@@ -45,7 +49,7 @@ async function detect() {
 function drawFace(face) {
   const { width, height, top, left } = face.boundingBox;
   ctx.clearRect(0, 0, canvas.width, canvas.height);
-  ctx.strokeStyle = '#ffc600';
+  ctx.strokeStyle = "#ffc600";
   ctx.lineWidth = 2;
   ctx.strokeRect(left, top, width, height);
 }

exercises/55 - Face Detection Censorship/pixelated-face.js

@@ -0,0 +1,3 @@
+// The face detection does not work on all browsers and operating systems.
+// If you are getting a `Face detection service unavailable` error or similar,
+// it's possible that it won't work for you at the moment.