spot: fixing inconsistent recording

spot/entrypoints/background.ts

@@ -5,7 +5,7 @@ let checkBusy = false;
 export default defineBackground(() => {
   const CHECK_INT = 60 * 1000;
   const PING_INT = 30 * 1000;
-  const VER = "1.0.7";
+  const VER = "1.0.10";
 
   const messages = {
     popup: {
@@ -42,6 +42,7 @@ export default defineBackground(() => {
         checkNewTab: "ort:check-new-tab",
         started: "ort:started",
         stopped: "ort:stopped",
+        toStop: "ort:stop",
         restart: "ort:restart",
         getErrorEvents: "ort:get-error-events",
       },
@@ -63,6 +64,7 @@ export default defineBackground(() => {
       to: {
         checkRecStatus: "offscr:check-status",
         startRecording: "offscr:start-recording",
+        stopRecording: "offscr:stop-recording",
       },
     },
   };
@@ -661,10 +663,14 @@ export default defineBackground(() => {
         errorData,
       });
     }
-    if (request.type === "ort:stop") {
+    if (request.type === messages.content.from.toStop) {
+      if (recordingState.recording === REC_STATE.stopped) {
+        return console.error('Calling stopped recording?')
+      }
+      console.log('calling stop')
       browser.runtime
         .sendMessage({
-          type: "offscr:stop-recording",
+          type: messages.offscreen.to.stopRecording,
           target: "offscreen",
         })
         .then((r) => {
@@ -999,6 +1005,7 @@ export default defineBackground(() => {
     let activeTab = activeTabs[0];
     const sendTo = message.activeTabId || activeTab.id!;
     let attempts = 0;
+    // 10 seconds;
     while (!contentArmy[sendTo] && attempts < 100) {
       await new Promise((resolve) => setTimeout(resolve, 100));
       attempts++;
@@ -1142,18 +1149,16 @@ export default defineBackground(() => {
       }
 
       const trackedTab: number | null = usedTab ?? null;
+
       /** reloads ui on currently active tab once its reloads itself */
-      function tabUpdateListener(tabId: number, changeInfo: any) {
+      function tabNavigatedListener(details: { tabId: number }) {
         const state = getRecState();
         if (state === REC_STATE.stopped) {
-          return stopTabListening();
+          return stopNavListening();
         }
+        contentArmy[details.tabId] = false
 
-        if (changeInfo.status !== "complete") {
+        if (area === "tab" && (!trackedTab || details.tabId !== trackedTab)) {
-          return (contentArmy[tabId] = false);
-        }
-
-        if (area === "tab" && (!trackedTab || tabId !== trackedTab)) {
           return;
         }
 
@@ -1174,6 +1179,13 @@ export default defineBackground(() => {
           });
       }
 
+      function startNavListening() {
+        browser.webNavigation.onCompleted.addListener(tabNavigatedListener)
+      }
+      function stopNavListening() {
+        browser.webNavigation.onCompleted.removeListener(tabNavigatedListener)
+      }
+
       /** discards recording if was recording single tab and its now closed */
       function tabRemovedListener(tabId: number) {
         if (tabId === trackedTab) {
@@ -1200,15 +1212,7 @@ export default defineBackground(() => {
         browser.tabs.onRemoved.removeListener(tabRemovedListener);
       }
 
-      function startTabListening() {
+      startNavListening();
-        browser.tabs.onUpdated.addListener(tabUpdateListener);
-      }
-
-      function stopTabListening() {
-        browser.tabs.onUpdated.removeListener(tabUpdateListener);
-      }
-
-      startTabListening();
       if (area === "desktop") {
         // if desktop, watch for tab change events
         startTabActivationListening();
@@ -1218,7 +1222,7 @@ export default defineBackground(() => {
         startRemovedListening();
       }
       setOnStop(() => {
-        stopTabListening();
+        stopNavListening();
         if (area === "desktop") {
           stopTabActivationListening();
         }

spot/entrypoints/content/index.tsx

@@ -125,6 +125,7 @@ export default defineContentScript({
       stopClickRecording();
       stopLocationRecording();
       const result = await browser.runtime.sendMessage({ type: "ort:stop" });
+      console.log('Spot getting video:', result)
       if (result.status === "full") {
         chunksReady = true;
         data = result;
@@ -323,7 +324,9 @@ export default defineContentScript({
         });
     }
 
-    void browser.runtime.sendMessage({ type: "ort:content-ready" });
+    setInterval(() => {
+      void browser.runtime.sendMessage({ type: "ort:content-ready" });
+    }, 500)
     // @ts-ignore false positive
     browser.runtime.onMessage.addListener((message: any, resp) => {
       if (message.type === "content:mount") {

spot/entrypoints/offscreen/main.js

@@ -1,3 +1,6 @@
+/**
+ * 24 MB; hardlimit for video chunk
+ * */
 const hardLimit = 24 * 1024 * 1024; // 24 MB
 
 function getRecordingSettings(qualityValue) {
@@ -124,6 +127,7 @@ class ScreenRecorder {
     this.mRecorder.start();
     this.isRecording = true;
     this.trackDuration();
+    console.log('started recording inside startRecording');
   }
 
   stop() {
@@ -217,20 +221,24 @@ class ScreenRecorder {
             },
           }));
     } catch (e) {
-      console.error(e);
+      console.error('get stream error:', e);
       throw e;
     }
+    // try {
+    //   microphoneStream = await navigator.mediaDevices.getUserMedia({
+    //     audio: { echoCancellation: false, deviceId: audioId },
+    //   });
+    //   this.audioTrack = microphoneStream.getAudioTracks()[0];
+    //   if (!useMicrophone) {
+    //     this.audioTrack.enabled = false;
+    //   }
+    // } catch (e) {
+    //   console.error('get audio error', e);
+    // }
     try {
-      microphoneStream = await navigator.mediaDevices.getUserMedia({
-        audio: { echoCancellation: false, deviceId: audioId },
-      });
-      this.audioTrack = microphoneStream.getAudioTracks()[0];
-      if (!useMicrophone) {
-        this.audioTrack.enabled = false;
-      }
-    } catch (e) {
-      console.error(e);
       this.audioTrack = this.createPlaceholderAudioTrack();
+    } catch (e) {
+      console.error('get audio error', e);
     }
 
     const existingAudioTracks = this.videoStream.getAudioTracks();
@@ -312,6 +320,7 @@ browser.runtime.onMessage.addListener((message, _, respond) => {
           message.audioId,
         )
         .then(() => {
+          console.log('started recording');
           respond({ success: true, time: Date.now() });
         })
         .catch(e => {
@@ -336,6 +345,7 @@ browser.runtime.onMessage.addListener((message, _, respond) => {
       recorder.stop();
       const duration = recorder.duration;
       recorder.getVideoData().then((data) => {
+        console.log(data)
         if (!data.blob) {
           respond({ status: "empty" });
         }

spot/package.json

@@ -2,7 +2,7 @@
   "name": "wxt-starter",
   "description": "manifest.json description",
   "private": true,
-  "version": "1.0.9",
+  "version": "1.0.10",
   "type": "module",
   "scripts": {
     "dev": "wxt",

spot/wxt.config.ts

@@ -25,6 +25,7 @@ export default defineConfig({
       "tabCapture",
       "offscreen",
       "unlimitedStorage",
+      "webNavigation",
     ],
   },
 });