La puissance de PWA: un système de vidéosurveillance avec un code JS de réseau neuronal de 300 lignes

Obtenir une caméra et un microphone

this.video = this.querySelector('video')
this.canvas = this.querySelectorAll('canvas')[0]

this.stream = await navigator.mediaDevices.getUserMedia(
   {video: {facingMode: {ideal: "environment"}}, audio: true}
)
this.video.srcObject = this.stream
await new Promise((resolve, reject) => {
   this.video.onloadedmetadata = (_) => resolve()
})
this.W = this.bbox.width = this.canvas.width = this.video.videoWidth
this.H = this.bbox.height = this.canvas.height = this.video.videoHeight

Capture vidéo

this.capture = new ImageCapture(this.stream.getVideoTracks()[0])
this.recorder = new MediaRecorder(this.canvas.captureStream(), {mimeType : "video/webm"})

grab_video()

async function grab_video() {
	this.canvas.drawImage(await this.capture.grabFrame(), 0, 0)
	const img = this.canvas.getImageData(0, 0, this.W, this.H)
	... //    -   img
	... //   -    
        window.requestAnimationFrame(this.grab_video.bind(this))
}

...
async function grab_video() {
	this.canvas.drawImage(this.video, 0, 0)
	...
}

Chargement du réseau neuronal et détection humaine

(async () => {
  self.importScripts('https://cdn.jsdelivr.net/npm/@tensorflow/tfjs/dist/tf.min.js')
  self.importScripts('https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd')

  let model = await cocoSsd.load()
  self.postMessage({})

  self.onmessage = async (ev) => {
    const result = await model.detect(ev.data)
    const person = result.find(v => v.class === 'person')
    if (person) 
      self.postMessage({ok: true, bbox: person.bbox})
    else
      self.postMessage({ok: false, bbox: null})
  }
})()

Enregistrement video

this.recorder.rec = new MediaRecorder(this.stream, {mimeType : "video/webm"})
this.recorder.rec.ondataavailable = (ev) => {
   this.chunk = ev.data
   if (this.detected) {
      this.send_chunk()
   } else if (this.recorder.num > 0) {
      this.send_chunk()
      this.recorder.num--
   }
}
...
this.recorder.rec.start()
this.recorder.num = 0
this.recorder.interval = setInterval(() => {
   this.recorder.rec.stop()
   this.recorder.rec.start()
}, CHUNK_DURATION)

API Gmail

await import('https://apis.google.com/js/api.js')
gapi.load('client:auth2', async () => {
   try {
      await gapi.client.init({
         apiKey: API_KEY,
         clientId: CLIENT_ID,
         discoveryDocs: ['https://www.googleapis.com/discovery/v1/apis/gmail/v1/rest'],
         scope: 'https://www.googleapis.com/auth/gmail.send'
      }) 
      if (!gapi.auth2.getAuthInstance().isSignedIn.je) {
         await gapi.auth2.getAuthInstance().signIn()
      }
      this.msg.innerHTML = ''
      this.querySelector('nav').style.display = ''
   } catch(e) {
      this.msg.innerHTML = 'Gmail authorization error: ' + JSON.stringify(e, null, 2)
   }
})

async send_mail(subject, mime_type, body) {
   const headers = {
      'From': '',
      'To': this.email,
      'Subject': 'Balajahe CCTV: ' + subject,
      'Content-Type': mime_type,
      'Content-transfer-encoding': 'base64'
   }
   let head = ''
   for (const [k, v] of Object.entries(headers)) head += k + ': ' + v + '\r\n'
   const request = gapi.client.gmail.users.messages.send({
      'userId': 'me',
      'resource': { 'raw': btoa(head + '\r\n' + body) }
   })
   return new Promise((resolve, reject) => {
      request.execute((res) => {
         if (!res.code) 
            resolve() 
         else 
            reject(res)
      })
   })
}

const a = this.querySelector('a')
URL.revokeObjectURL(a.href)
a.href = URL.createObjectURL(chunk)
a.download = name
a.click()

Gestion des états dans le monde des composants web

button.true {background-color: red}

get detecting() { return this.querySelector('#detecting').className === 'true' }

Mode hors-ligne

• Dans l'événement d'installation - créez une nouvelle version du cache et ajoutez toutes les ressources nécessaires au cache.
• Dans l'événement activate - supprimez toutes les versions du cache à l'exception de la version actuelle.
• Dans l'événement fetch - nous essayons d'abord de prendre la ressource du cache, et si nous ne l'avons pas trouvée, nous envoyons une requête réseau, dont le résultat est ajouté au cache.

Les questions non résolues

1. Sur certains téléphones mobiles, le réseau neuronal ralentit, peut-être que dans mon cas, le COCO-SSD n'est pas le meilleur choix, mais je ne suis pas un expert en ML, et j'ai pris le premier qui a été entendu.
2. Je n'ai pas trouvé d'exemple sur la façon d'envoyer de la vidéo via GAPI non pas au format Base64, mais dans le binaire d'origine. Cela permettrait d'économiser du temps processeur et du trafic réseau.
3. Je ne comprenais pas la sécurité. À des fins de débogage local, j'ai ajouté le domaine localhost à l'application Google, mais si quelqu'un commence à utiliser les clés de l'application pour envoyer du spam - Google bloquera-t-il les clés elles-mêmes ou le compte de l'expéditeur?