frontend: Add capture button to node-red preview (#955)

Author: sonnyp

frontend/src/pages/bookmarks.jsx

@@ -78,14 +78,6 @@ export default function Bookmarks() {
               Node-RED flow editor
             </a>
           </li>
-          <li>
-            <a
-              href={makeUrl("/ps/processing/segmenter/streams/object.mjpg")}
-              target="_blank"
-            >
-              Last segmented object
-            </a>
-          </li>
           <li>
             <a href={makeLocalUrl("/factory")} target="_blank">
               Factory

frontend/src/pages/preview/Stream.jsx

@@ -7,6 +7,9 @@ import styles from "./Stream.module.css"
 import "./reader.js"
 
 import fullscreenIcon from "./fullscreen.svg"
+import cameraIcon from "./camera.svg"
+
+import { makeUrl } from "../../helpers.js"
 
 export default function Stream(props) {
   let zoomist_container
@@ -84,15 +87,33 @@ export default function Stream(props) {
             <div class="zoomist-image">{video}</div>
           </div>
           <button
-            tooltip="Take capture"
+            tooltip="Fullscreen"
             class={styles.button_fullscreen}
             onClick={fullscreen}
           >
             {fullscreenIcon}
           </button>
-          {props.controls}
+          <button
+            tooltip="Take capture"
+            class={styles.button_capture}
+            onClick={takeImage}
+          >
+            {cameraIcon}
+          </button>
         </div>
       </div>
     </>
   )
 }
+
+async function takeImage() {
+  try {
+    const res = await fetch(makeUrl("/api/capture"), {
+      method: "POST",
+    })
+    const body = await res.json()
+    triggerDownload(body.url_jpeg)
+  } catch (err) {
+    console.error(err)
+  }
+}

frontend/src/pages/preview/Stream.module.css

@@ -89,3 +89,23 @@
 .button_capture svg {
   fill: var(--zoomist-zoomer-icon-color);
 }
+
+.button_capture {
+  position: absolute;
+  bottom: 0;
+  z-index: 9;
+  right: 0;
+  width: var(--zoomist-zoomer-button-size);
+  height: var(--zoomist-zoomer-button-size);
+  border: none;
+  background-color: var(--zoomist-zoomer-button-color);
+  cursor: pointer;
+}
+
+.button_capture:hover {
+  background-color: var(--zoomist-zoomer-button-color-hover);
+}
+
+.button_capture svg {
+  fill: var(--zoomist-zoomer-icon-color);
+}

frontend/src/pages/preview/index.jsx

@@ -8,9 +8,7 @@ import {
   watch,
   stopBubbler,
 } from "../../../../lib/scope.js"
-import { triggerDownload } from "../../helpers.js"
-
-import cameraIcon from "./camera.svg"
+import { triggerDownload, makeUrl } from "../../helpers.js"
 
 import NumberInput from "./NumberInput.jsx"
 import { createSignal } from "solid-js"
@@ -56,36 +54,12 @@ export default function Preview() {
         </div>
       </div>
       <div class={styles.preview}>
-        <Stream
-          controls={
-            <button
-              tooltip="Take capture"
-              class={styles.button_capture}
-              onClick={takeImage}
-            >
-              {cameraIcon}
-            </button>
-          }
-        />
+        <Stream />
       </div>
     </>
   )
 }
 
-async function takeImage() {
-  const url = new URL("/api/capture", document.URL)
-  url.port = 80
-  try {
-    const res = await fetch(url, {
-      method: "POST",
-    })
-    const body = await res.json()
-    triggerDownload(body.url_jpeg)
-  } catch (err) {
-    console.error(err)
-  }
-}
-
 function onLightChange(value) {
   startLight({
     value,

os/mediamtx/justfile

@@ -1,8 +1,8 @@
 setup:
     sudo ./setup_h264_sysctl.sh
-    wget https://github.com/bluenviron/mediamtx/releases/download/v1.16.2/mediamtx_v1.16.2_linux_arm64.tar.gz -P /tmp
-    wget https://raw.githubusercontent.com/bluenviron/mediamtx/refs/tags/v1.16.2/internal/servers/webrtc/reader.js -O /opt/PlanktoScope/frontend/src/pages/preview/reader.js
-    cd /tmp && tar -xf /tmp/mediamtx_v1.16.2_linux_arm64.tar.gz
+    wget https://github.com/bluenviron/mediamtx/releases/download/v1.18.1/mediamtx_v1.18.1_linux_arm64.tar.gz -P /tmp
+    wget https://raw.githubusercontent.com/bluenviron/mediamtx/refs/tags/v1.18.1/internal/servers/webrtc/reader.js -O /opt/PlanktoScope/frontend/src/pages/preview/reader.js
+    cd /tmp && tar -xf /tmp/mediamtx_v1.18.1_linux_arm64.tar.gz
     -sudo systemctl stop mediamtx
     sudo cp /tmp/mediamtx /usr/local/bin/mediamtx
     sudo cp mediamtx.service /etc/systemd/system/