PWA की शक्ति: एक वीडियो निगरानी प्रणाली जिसमें 300-लाइन तंत्रिका नेटवर्क JS कोड है

एक कैमरा और माइक्रोफोन प्राप्त करना

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)

जीमेल एपीआई

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. कुछ मोबाइल फोन पर, तंत्रिका नेटवर्क धीमा हो जाता है, शायद मेरे मामले में, सीओसीओ-एसएसडी सबसे अच्छा विकल्प नहीं है, लेकिन मैं एमएल विशेषज्ञ नहीं हूं, और मैंने पहली बार सुना था।
2. मुझे इसका उदाहरण नहीं मिला कि कैसे GAPI के माध्यम से वीडियो को बेस 64 प्रारूप में नहीं, बल्कि मूल बाइनरी में भेजा जाए। यह प्रोसेसर समय और नेटवर्क यातायात दोनों को बचाएगा।
3. मुझे सुरक्षा समझ में नहीं आई। स्थानीय डिबगिंग उद्देश्यों के लिए, मैंने Google एप्लिकेशन में लोकलहोस्ट डोमेन जोड़ा, लेकिन अगर कोई स्पैम भेजने के लिए एप्लिकेशन कुंजियों का उपयोग करना शुरू कर देता है - तो क्या Google स्वयं या प्रेषक के खाते को ब्लॉक कर देगा?