npm - v4l2camera-ui - Versions diffs - 0.2.0 → 0.2.1 - Mend

v4l2camera-ui 0.2.0 → 0.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

package/dist/index.html CHANGED Viewed

@@ -5,8 +5,8 @@
     <link rel="icon" href="/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>v4l2camera</title>
-    <script type="module" crossorigin src="/assets/index-H9K02A_M.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-Uptu2i-d.css">
+    <script type="module" crossorigin src="/assets/index-oUW9KiMz.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-DxZ7X0bX.css">
   </head>
   <body>
     <div id="app"></div>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "v4l2camera-ui",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "type": "module",
   "scripts": {
     "serve": "vite --host=0.0.0.0 preview",

package/src/App.vue CHANGED Viewed

@@ -2,14 +2,14 @@
     <v-app>
       <h1>{{ msg }}</h1>
       <v-divider></v-divider>
-      <v-content id="content">
+      <v-main id="content">
         <Video/>
         <v-divider></v-divider>
         <h3>Formats</h3>
         <Format/>
         <h3>Controls</h3>
         <Controls/>
-      </v-content>
+      </v-main>
       <v-divider></v-divider>
       <v-footer>
         <v-container>

package/src/components/Format.vue CHANGED Viewed

@@ -95,7 +95,15 @@
     <v-row v-if="format.audio">
       <v-col>Audio Format</v-col>
-      <v-col cols="8">{{format.audio.format}}</v-col>
+      <v-col cols="8">
+        <v-select
+          v-model="format.audio.format"
+          :items="audioFormats"
+          :hint="format.description"
+          persistent-hint
+          @update:modelValue="updateValue(format)" >
+        </v-select>
+      </v-col>
     </v-row>
     <v-row v-if="format.audio">
       <v-col>Audio Sample Rate</v-col>
@@ -116,6 +124,7 @@ export default {
     axios.get("/api/formats").then(
       (response) => {
         this.formats = response.data.video;
+        this.audioFormats = response.data.audio;
         axios.get("/api/format").then(
           (response) => {
@@ -130,6 +139,7 @@ export default {
     return {
       formats: [],
       format: "",
+      audioFormats: [],
       geometry: ""
     };
   },

package/src/components/Video.vue CHANGED Viewed

@@ -14,7 +14,25 @@
     </v-container>
     <v-container>
       <v-row align="center" justify="center">
-          {{ this.rtspinfo?.url }}
+          {{ this.rtspinfo.url }}
+      </v-row>
+    </v-container>
+    <v-divider></v-divider>
+    <v-container>
+      <h3>RTSP</h3>
+      <v-row>
+        <v-col>RTSP Uri</v-col>
+        <v-col cols="8">
+          <v-text-field v-model="rtspinfo.rtspuri" @update:modelValue="updateRtspInfo()">
+          </v-text-field>
+        </v-col>
+      </v-row>
+      <v-row>
+        <v-col>Multicast Uri</v-col>
+        <v-col cols="8">
+          <v-text-field v-model="rtspinfo.multicasturi" @update:modelValue="updateRtspInfo()">
+          </v-text-field>
+        </v-col>
       </v-row>
     </v-container>
   </div>
@@ -29,9 +47,10 @@ export default {
       visibility: true,
       ws: null,
       message: null,
-      rtspinfo: null,
+      rtspinfo: {rtspuri: '', multicasturi: '', url: ''},
       videoCanvas: null,
-      format: null
+      format: {format: "", width: 0, height: 0},
+      frameResolved: null
     };
   },
   mounted() {
@@ -49,11 +68,16 @@ export default {
     );
   },
   created() {
-    let wsurl = new URL("./ws", location.href);
+    let wsurl = new URL("./ws", import.meta.env.VITE_APP_BASE_URL || location.href);
     wsurl.protocol = wsurl.protocol.replace("http","ws");
     this.connectWebSocket(wsurl.href);
   },
   destroyed() {
+    console.log("Closing decoder");
+    if (this.ws.decoder) {
+      this.ws.decoder.close();
+    }
+    this.ws.decoder = null;
     console.log("Closing WebSocket");
     if (this.ws) {
       this.ws.close();
@@ -68,96 +92,98 @@ export default {
       axios.get("/api/stop").then( () => this.visibility = false);
     },
     async onMessage(message) {
-        if (typeof message.data === 'string') {
-          this.format = JSON.parse(message.data);
-        } else if (message.data instanceof ArrayBuffer) {
-          const bytes = new Uint8Array(message.data);
-          if ( (bytes.length > 1) && (bytes[0] === 255) && (bytes[1] === 216)) {
-              // JPEG
-              let binaryStr = "";
-              for (let i = 0; i < bytes.length; i++) {
-                binaryStr += String.fromCharCode(bytes[i]);
-              }
-              this.message = null;
-              const img = new Image();
-              img.src = "data:image/jpeg;base64," + btoa(binaryStr);
-              await new Promise(r => img.onload=r);
-              this.videoCanvas.canvas.width = img.width;
-              this.videoCanvas.canvas.height = img.height;
-              this.videoCanvas.drawImage(img, 0, 0);
-              if (this.ws.decoder) {
-                this.ws.decoder.close();
-              }
-              this.ws.decoder = null;
-          } else if ( (bytes.length > 3) && (bytes[0] === 0) && (bytes[1] === 0) && (bytes[2] === 0) && (bytes[3] === 1)) {
-              // H264
-              if (!this.ws.decoder) {
-                this.ws.decoder = new VideoDecoder({
-                  output: (frame) => {
-                    this.videoCanvas.canvas.width = frame.displayWidth;
-                    this.videoCanvas.canvas.height = frame.displayHeight;
-                    this.videoCanvas.drawImage(frame, 0, 0);
-                    frame.close();
-                  },
-                  error: (e) => console.log(e.message),
-                });
-              }
+      const { data } = message;
+      if (typeof data === 'string') {
+        this.format = JSON.parse(data);
-              const naluType = bytes[4] & 0x1F;
-              if (this.ws.decoder.state !== "configured" && naluType === 7) {
-                  let codec = 'avc1.';
-                  for (let i = 0; i < 3; i++) {
-                      codec += ('00' + bytes[5+i].toString(16)).slice(-2);
-                  }
-                  const config = {codec};
-                  const support = await VideoDecoder.isConfigSupported(config);
-                  if (support.supported) {
-                    this.ws.decoder.configure(config);
-                  } else {
-                    this.message = `${codec} is not supported`;
-                  }
-              }
-              if (this.ws.decoder.state === "configured") {
-                  this.message = null;
-                  const chunk = new EncodedVideoChunk({
-                      timestamp: new Date().getTime(),
-                      type: (naluType === 7) || (naluType === 5) ? "key" : "delta",
-                      data: bytes,
-                  });
-                  this.ws.decoder.decode(chunk);
-              }
-          } else if (this.format) {
-              try {
-                const frame = new VideoFrame(bytes, {
-                    format: this.format.format,
-                    timestamp: performance.now(),
-                    codedWidth: this.format.width,
-                    codedHeight: this.format.height,
-                });
-                this.videoCanvas.canvas.width = frame.displayWidth;
-                this.videoCanvas.canvas.height = frame.displayHeight;
-                this.videoCanvas.drawImage(frame, 0, 0);
-                frame.close();
-                this.message = null;
-              } catch (e) {
-                this.message = `${this.format.format} is not supported`;
-              }
-          } else {
-            this.message = 'format not supported';
-          }
-        }
+      } else if (data instanceof ArrayBuffer) {
+        const bytes = new Uint8Array(data);
+        try {
+          const frame = await this.onFrame(bytes);
+          this.displayFrame(frame);
+          this.message = null;
+        } catch (e) {
+          this.message = e;
+        }
+      }
     },
     connectWebSocket(wsurl) {
         console.log(`Connecting WebSocket to ${wsurl}`);
         this.ws = new WebSocket(wsurl);
         this.ws.binaryType = 'arraybuffer';
         this.ws.onmessage = this.onMessage;
-        this.ws.onclose = () => {
-          console.log(`WebSocket closed, reconnecting to ${wsurl}...`);
-          setTimeout(() => this.connectWebSocket(wsurl), 1000);
-        };
+        this.ws.onclose = () => setTimeout(() => this.connectWebSocket(wsurl), 1000);
+    },
+    displayFrame(frame) {
+        this.videoCanvas.canvas.width = frame.displayWidth;
+        this.videoCanvas.canvas.height = frame.displayHeight;
+        this.videoCanvas.drawImage(frame, 0, 0);
+        frame.close();
+    },
+    async onH264Frame(bytes) {
+      if (!this.ws.decoder) {
+        this.ws.decoder = new VideoDecoder({
+          output: (frame) => this.frameResolved(frame),
+          error: (e) => console.log(e.message),
+        });
+      }
+      const naluType = bytes[4] & 0x1F;
+      if (this.ws.decoder.state !== "configured" && naluType === 7) {
+          let codec = 'avc1.';
+          for (let i = 0; i < 3; i++) {
+              codec += ('00' + bytes[5+i].toString(16)).slice(-2);
+          }
+          const config = {codec};
+          const support = await VideoDecoder.isConfigSupported(config);
+          if (support.supported) {
+            this.ws.decoder.configure(config);
+          } else {
+            return Promise.reject(`${codec} is not supported`);
+          }
+      }
+      if (this.ws.decoder.state === "configured") {
+          const chunk = new EncodedVideoChunk({
+              timestamp: performance.now(),
+              type: "key",
+              data: bytes,
+          });
+          this.ws.decoder.decode(chunk);
+          return await new Promise(r => this.frameResolved = r);
+      } else {
+        return Promise.reject(`H264 decoder not configured`);
+      }
+    },
+    async onJPEGFrame(data) {
+      const decoder = new ImageDecoder({data, type: 'image/jpeg'});
+      const image = await decoder.decode();
+      return new VideoFrame(image.image, {timestamp: performance.now()});
+    },
+    onDefaultFrame(bytes) {
+      return new VideoFrame(bytes, {
+                  format: this.format.format,
+                  timestamp: performance.now(),
+                  codedWidth: this.format.width,
+                  codedHeight: this.format.height,
+        });
+    },
+    onFrame(bytes) {
+      if ( (bytes.length > 1) && (bytes[0] === 255) && (bytes[1] === 216)) {
+        return this.onJPEGFrame(bytes);
+      } else if ( (bytes.length > 3) && (bytes[0] === 0) && (bytes[1] === 0) && (bytes[2] === 0) && (bytes[3] === 1)) {
+        return this.onH264Frame(bytes);
+      } else if (this.format) {
+        return this.onDefaultFrame(bytes);
+      } else {
+        return Promise.reject(`Unknown format`);
+      }
+    },
+    async updateRtspInfo() {
+        const response = await axios.post("/api/rtspinfo", this.rtspinfo);
+        this.rtspinfo = response.data;
     }
   }
 };