Die Leistung von PWA: Ein Videoüberwachungssystem mit einem JS-Code für ein neuronales Netzwerk mit 300 Leitungen

Kamera und Mikrofon besorgen

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

Videoaufnahme

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)
	...
}

Laden neuronaler Netze und Erkennung von Menschen

(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})
  }
})()

Videoaufnahme

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)

Google Mail-API

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()

State Management in der Welt der Webkomponenten

button.true {background-color: red}

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

Offline-Modus

• Erstellen Sie im Installationsereignis eine neue Version des Caches und fügen Sie dem Cache alle erforderlichen Ressourcen hinzu.
• Löschen Sie im Aktivierungsereignis alle Versionen des Caches mit Ausnahme der aktuellen.
• Im Abrufereignis versuchen wir zunächst, die Ressource aus dem Cache zu entnehmen. Wenn wir sie nicht gefunden haben, senden wir eine Netzwerkanforderung, deren Ergebnis dem Cache hinzugefügt wird.

Ungelöste Probleme

1. Bei einigen Mobiltelefonen verlangsamt sich das neuronale Netzwerk. In meinem Fall ist COCO-SSD möglicherweise nicht die beste Wahl, aber ich bin kein ML-Experte, und ich habe die erste gewählt, die gehört wurde.
2. Ich habe kein Beispiel gefunden, wie man Videos über GAPI nicht im Base64-Format, sondern in der Original-Binärdatei sendet. Dies würde sowohl Prozessorzeit als auch Netzwerkverkehr sparen.
3. Ich habe die Sicherheit nicht verstanden. Für lokale Debugging-Zwecke habe ich die localhost-Domain zur Google-Anwendung hinzugefügt. Wenn jedoch jemand die Anwendungsschlüssel zum Senden von Spam verwendet, blockiert Google die Schlüssel selbst oder das Konto des Absenders?