قوة PWA: نظام للمراقبة بالفيديو مع رمز JS للشبكة العصبية بسعة 300 سطر

الحصول على كاميرا وميكروفون

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

التقاط الفيديو

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

تحميل الشبكة العصبية والكشف البشري

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

تسجيل الفيديو

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)

واجهة برمجة تطبيقات 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()

إدارة الدولة في عالم مكونات الويب

button.true {background-color: red}

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

وضع غير متصل بالشبكة

• في حدث التثبيت - أنشئ نسخة جديدة من ذاكرة التخزين المؤقت وأضف جميع الموارد اللازمة إلى ذاكرة التخزين المؤقت.
• في حدث التفعيل - احذف جميع إصدارات ذاكرة التخزين المؤقت باستثناء النسخة الحالية.
• في حدث الجلب - نحاول أولاً أخذ المورد من ذاكرة التخزين المؤقت ، وإذا لم نعثر عليه ، نرسل طلب شبكة ، تتم إضافة النتيجة إلى ذاكرة التخزين المؤقت.

القضايا التي لم تحل

1. في بعض الهواتف المحمولة ، تتباطأ الشبكة العصبية ، ربما في حالتي ، فإن COCO-SSD ليس الخيار الأفضل ، لكنني لست خبيرًا في ML ، وأخذت أول واحد تم سماعه.
2. لم أجد مثالاً على كيفية إرسال الفيديو عبر GAPI ليس بتنسيق Base64 ، ولكن في الثنائي الأصلي. سيوفر ذلك وقت المعالج وحركة مرور الشبكة.
3. لم أفهم الأمن. لأغراض تصحيح الأخطاء المحلية ، أضفت نطاق localhost إلى تطبيق Google ، ولكن إذا بدأ شخص ما في استخدام مفاتيح التطبيق لإرسال رسائل غير مرغوب فيها - فهل ستحظر Google المفاتيح نفسها أو حساب المرسل؟