v4l2camera-ui 0.2.0 → 0.2.1-10-g981908f

package/dist/index.html

@@ -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-D_CdpxlP.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-tnC2SLkf.css">
   </head>
   <body>
     <div id="app"></div>

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "v4l2camera-ui",
-  "version": "0.2.0",
+  "version": "0.2.1-10-g981908f",
   "type": "module",
   "scripts": {
     "serve": "vite --host=0.0.0.0 preview",
     "build": "vite build --emptyOutDir",
-    "dev": "vite --host=0.0.0.0"
+    "start": "vite --host=0.0.0.0"
   },
   "dependencies": {
     "axios": "^1.2.0",

package/src/App.vue

@@ -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

@@ -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

@@ -14,7 +14,52 @@
     </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-row>
+        <v-col>SRTP</v-col>
+        <v-col cols="8">
+          <v-switch
+            v-model.number="rtspinfo.issrtp" @update:modelValue="updateRtspInfo()"
+            color="blue">
+          </v-switch>      
+        </v-col>
+      </v-row>
+      <v-row>
+        <v-col>SRTP encrypted</v-col>
+        <v-col cols="8">
+          <v-switch
+            v-model.number="rtspinfo.issrtpencrypted" @update:modelValue="updateRtspInfo()"
+            color="blue">
+          </v-switch>      
+        </v-col>
+      </v-row>
+      <v-row>
+        <v-col>RTSPS</v-col>
+        <v-col cols="8">
+          <v-switch
+            v-model.number="rtspinfo.issrtsps" @update:modelValue="updateRtspInfo()"
+            color="blue">
+          </v-switch>      
+        </v-col>
       </v-row>
     </v-container>
   </div>
@@ -29,9 +74,10 @@ export default {
       visibility: true,
       ws: null,
       message: null,
-      rtspinfo: null,
+      rtspinfo: {rtspuri: '', multicasturi: '', url: '', issrtp: false, issrtpencrypted: false, issrtsps: false},
       videoCanvas: null,
-      format: null
+      format: {format: "", width: 0, height: 0},
+      frameResolved: null
     };
   },
   mounted() {
@@ -49,11 +95,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 +119,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 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`;  
-              }
+      const { data } = message;
+      if (typeof data === 'string') {
+        this.format = JSON.parse(data);
 
-          } 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;      
     }
   }
 };