2a:null 2b:["$","title",null,{"children":"Web Camera | AbserAri | Observable"}] 30:T6a6,setup = () => { if (!useCamera) { return undefined; } let stream; let recognizer; const capture = document.getElementById('capture'); const stop = document.getElementById('stop'); const screenCapture = document.getElementById('screen'); const models = document.getElementById('models'); const labels = document.getElementById('labels'); const video = document.getElementById('video'); const canvas = document.getElementById('canvas'); capture.onclick = async () => { stream = await openWebcam(); if (stream === false) { return; } const constraints = { width: 1280, height: 960, aspectRatio: 4 / 3 }; stream.getVideoTracks()[0].applyConstraints(constraints); video.srcObject = stream; video.ontimeupdate = onVideoTimeUpdate; }; stop.onclick = () => { if (stream) { stream.getVideoTracks().forEach(function(track) { track.stop(); }); video.ontimeupdate = undefined; stream = false; } }; screenCapture.onclick = async () => { if (!stream) return; const start = Date.now(); canvas.width = video.videoWidth; canvas.height = video.videoHeight; canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height); if (recog) { await recognizer(canvas); } else { detectFaces(canvas); console.log(`Face Detection Interval: ${Date.now() - start}`); } }; models.onclick = async () => { models.disabled = await loadFaceModels(); }; labels.onclick = async () => { labels.disabled = true; recognizer = await loadLabeledFaces(); labels.disabled = false; }; return 'Access Granted'; }31:[{"id":"7b3c7b7fd582765991d7518f46d37dc38e9e46690c3af91952d4d8d85e840d8642d8e219e07a1041bed2579b872ae9800b4258970980cf33617e162333bc5c0d","href":"https://static.observableusercontent.com/files/7b3c7b7fd582765991d7518f46d37dc38e9e46690c3af91952d4d8d85e840d8642d8e219e07a1041bed2579b872ae9800b4258970980cf33617e162333bc5c0d","name":"face-api.js","type":"application/javascript","lastModified":1579156927047.286,"size":845491}] 2e:{"id":"db202c35611a519e","slug":"web-camera","title":"Web Camera","thumbnail":"c724a77860bd9c8594e9251aede6491bbd14965bf779bd564de9120f8f681b47","access_level":"public","create_time":"$D2020-01-16T06:42:07.047Z","update_time":"$D2020-01-18T10:49:50.009Z","view_time":null,"first_public_time":"$D2020-01-16T06:42:53.019Z","fork":{"id":"e1b2ff5ea9d257f7","slug":"web-camera","title":"Web Camera","owner":{"id":"2a278c3908e45a90","login":"fengyfei","name":"Feng Yifei"}},"stars":0,"starred":false,"owner":{"type":"team","id":"8c968b856895152e","login":"yhyddr","name":"AbserAri","avatar_url":"https://avatars-next.observableusercontent.com/52e627081ba2d80c7443d9aa2d2f732769d9872798ccdeb00090f1cd68156140","tier":"starter_2024"},"version":305,"publish_version":305,"role":null,"authored":false,"authors":[{"type":"individual","id":"3935e5bc2f09179e","login":"yhyddr","name":"AbserAri","avatar_url":"https://avatars-next.observableusercontent.com/52e627081ba2d80c7443d9aa2d2f732769d9872798ccdeb00090f1cd68156140","tier":null}],"members":[{"type":"individual","id":"3935e5bc2f09179e","login":"yhyddr","name":"AbserAri","avatar_url":"https://avatars-next.observableusercontent.com/52e627081ba2d80c7443d9aa2d2f732769d9872798ccdeb00090f1cd68156140","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":{"id":"9d66bfdd3bca4b7d","slug":"cv","title":"CV","owner":{"id":"8c968b856895152e","login":"yhyddr","name":"AbserAri"}},"type":"notebook","body":{"title":"Web Camera","cells":[{"id":0,"value":"md`# Web Camera`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":53,"value":"md`\n## References\n- [Media Capture and Streams](https://w3c.github.io/mediacapture-main/)\n- [Taking still photos with WebRTC](https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Taking_still_photos)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":11,"value":"md`\n### Access\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"viewof useCamera = checkbox({\n description: 'Activate webcam',\n options: [{ value: true, label: 'on' }],\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":33,"value":"{\n if (!useCamera) {\n return undefined;\n }\n\n const devices = md`${await enumerate()}`;\n\n setup();\n\n return devices;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":265,"value":"viewof recog = checkbox({\n description: 'Recognition or Detection',\n options: [{ value: true, label: 'on' }],\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":82,"value":"html`\n\n\n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":119,"value":"html`\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":288,"value":"onVideoTimeUpdate = event => {}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":86,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":147,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":28,"value":"md`\n### Enumerate\n- [MediaDevices/enumerateDevices](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":18,"value":"enumerate = async () => {\n let message = '| Kind | Label | Device ID|\\n| ----- | ----- | ----- |';\n\n const devices = await navigator.mediaDevices.enumerateDevices();\n devices.forEach(d => {\n message = `${message}\\n | ${d.kind} | ${d.label} | ${d.deviceId} |`;\n });\n\n return message;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":59,"value":"md`\n### Open\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":78,"value":"md`\n- [MediaDevices/getUserMedia](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":62,"value":"openWebcam = async () => {\n try {\n const stream = await navigator.mediaDevices.getUserMedia({\n video: true\n });\n\n return stream;\n } catch (err) {\n return false;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":169,"value":"md`\n## Face API\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":172,"value":"md`\n### Models\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":175,"value":"{\n let message = '| Net | Features |\\n| ----- | ----- |';\n\n const nets = Object.keys(faceapi.nets);\n nets.forEach(n => {\n message = `${message}\\n | ${n} | |`;\n });\n return md`${message}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":184,"value":"md`\n### Load Models\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":187,"value":"loadFaceModels = async models => {\n const modelsURL = models || 'http://127.0.0.1:8080';\n\n try {\n await faceapi.loadSsdMobilenetv1Model(modelsURL);\n await faceapi.loadFaceLandmarkModel(modelsURL);\n await faceapi.loadAgeGenderModel(modelsURL);\n await faceapi.loadFaceRecognitionModel(modelsURL);\n } catch (err) {\n return false;\n }\n\n return true;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":208,"value":"md`\n### Face Detection\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":211,"value":"detectFaces = async canvas => {\n let fullFaceDescriptions = await faceapi\n .detectAllFaces(canvas)\n .withFaceLandmarks()\n .withAgeAndGender()\n .withFaceDescriptors();\n\n faceapi.draw.drawDetections(canvas, fullFaceDescriptions);\n faceapi.draw.drawFaceLandmarks(canvas, fullFaceDescriptions);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":243,"value":"md`\n### Face Recognition\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":247,"value":"loadLabeledFaces = async () => {\n const labels = ['feng', 'wang', 'yang', 'yangdy', 'dong', 'lu'];\n\n const labeledFaceDescriptors = await Promise.all(\n labels.map(async label => {\n // fetch image data from urls and convert blob to HTMLImage element\n const imgUrl = `http://127.0.0.1:8080/imgs/${label}.jpeg`;\n const img = await faceapi.fetchImage(imgUrl);\n\n // detect the face with the highest score in the image and compute it's landmarks and face descriptor\n const fullFaceDescription = await faceapi\n .detectSingleFace(img)\n .withFaceLandmarks()\n .withFaceDescriptor();\n\n if (!fullFaceDescription) {\n throw new Error(`no faces detected for ${label}`);\n }\n\n const faceDescriptors = [fullFaceDescription.descriptor];\n return new faceapi.LabeledFaceDescriptors(label, faceDescriptors);\n })\n );\n\n return recognition(labeledFaceDescriptors);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":257,"value":"recognition = async labeledFaceDescriptors => {\n return async canvas => {\n const fullFaceDescriptions = await faceapi\n .detectAllFaces(canvas)\n .withFaceLandmarks()\n .withFaceDescriptors();\n\n const maxDescriptorDistance = 0.6;\n const faceMatcher = new faceapi.FaceMatcher(\n labeledFaceDescriptors,\n maxDescriptorDistance\n );\n\n const results = fullFaceDescriptions.map(fd =>\n faceMatcher.findBestMatch(fd.descriptor)\n );\n\n results.forEach((bestMatch, i) => {\n const box = fullFaceDescriptions[i].detection.box;\n const text = bestMatch.toString();\n const drawBox = new faceapi.draw.DrawBox(box, { label: text });\n drawBox.draw(canvas);\n });\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"md`\n## Imports\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"import { button, checkbox } from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":165,"value":"faceapi = require(await FileAttachment(\"face-api.js\").url())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2f:"$2e:body"