Add Websocket Camera Streaming (#529)

* WIP adding second websocket handling for cameras

* just more WIP

* even more wip. Most java-side framework completed, but not yet debugged

* IT LIVES. Still needs lots of cleanup. But we're transferring and displaying data!

* moved down an architecture layer. Improved multiple-camera handling

* Additional WIP to help improve smoothness and performance, though not yet tested

* bugfixes galore

* tweak compression

* spotless

* more tweaks for handling slow/intermittent streams

* wpilibformat maybe?

* clang-format maybe?

* WIP - adding thinclient. I don't like it yet, it should be more auto-generated than it is.

* thinclient formatting fixups

* Reduced amount of empty send data by limiting to only one stream per client (which is all we really need). Framerate is up slightly, overhead is down.

* bugfixes, faster streaming, better mjpeg compression settings, thinclient working

* spotless and formatting

* cmon wpiformat....

* re-added mjpg streams

* added a loading GIF to imporve the feeling of responsiveness

* formatting

* urlparams and built-in thinclient

* wpiformat

* prevent wpiformat complaints

* Removed uint8 array and base64 conversion from client side

* Synced up js implementations for ws streaming

* formatting/spotless

.styleguide

@@ -13,6 +13,7 @@ modifiableFileExclude {
   \.jpg$
   \.jpeg$
   \.png$
+  \.gif$
   \.so$
   \.dll$
 }

photon-client/src/components/common/cv-image.vue

@@ -5,7 +5,7 @@
     :style="styleObject"
     :src="src"
     alt=""
-    @click="e => $emit('click', e)"
+    @click="e => {this.openThinclientStream(e)}"
   >
 </template>
 
@@ -13,7 +13,7 @@
     export default {
         name: "CvImage",
         // eslint-disable-next-line vue/require-prop-types
-        props: ['address', 'scale', 'maxHeight', 'maxHeightMd', 'maxHeightLg', 'maxHeightXl', 'colorPicking', 'id', 'disconnected'],
+        props: ['idx', 'scale', 'maxHeight', 'maxHeightMd', 'maxHeightLg', 'maxHeightXl', 'colorPicking', 'id', 'disconnected'],
         data() {
             return {
                 seed: 1.0,
@@ -46,18 +46,48 @@
                     return ret;
                 }
             },
-            src: {
+            port: {
               get() {
-                return this.disconnected ? require("../../assets/noStream.jpg") : this.address + "?" + this.seed // This prevents caching
-              },
-            },
+                if(this.idx == 0){
+                  return this.$store.state.cameraSettings[this.$store.state.currentCameraIndex].inputStreamPort;
+                } else {
+                  return this.$store.state.cameraSettings[this.$store.state.currentCameraIndex].outputStreamPort;
+                }
+              }
+            }
+        },
+        watch : {
+          port(newPort, oldPort){
+            newPort;
+            oldPort;
+            this.reload();
+          },
+          disconnected(newVal, oldVal){
+            oldVal;
+            if(newVal){
+              this.wsStream.stopStream();
+            } else {
+              this.wsStream.startStream();
+            }
+          }
         },
         mounted() {
-            this.reload(); // Force reload image on creation
+          var wsvs = require('../../plugins/WebsocketVideoStream');
+          this.wsStream = new wsvs.WebsocketVideoStream(this.id, this.port, window.location.host);
+        },
+        unmounted() {
+          this.wsStream.stopStream();
+          this.wsStream.ws_close();
         },
         methods: {
             reload() {
-                this.seed = new Date().getTime();
+              console.log("Reloading " + this.id + " with port " + String(this.port));
+              this.wsStream.setPort(this.port);
+            },
+            openThinclientStream(e){
+              e;
+              var URL = "/thinclient.html?port=" + String(this.port) + "&host=" + window.location.hostname;
+              window.open(URL, '_blank');
             }
         },
     }

photon-client/src/main.js

@@ -15,11 +15,11 @@ if (process.env.NODE_ENV === "production") {
     Vue.prototype.$address = location.hostname + ":5800";
 }
 
-const wsURL = '//' + Vue.prototype.$address + '/websocket';
+const wsDataURL = '//' + Vue.prototype.$address + '/websocket_data';
 
 import VueNativeSock from 'vue-native-websocket';
 
-Vue.use(VueNativeSock, wsURL, {
+Vue.use(VueNativeSock, wsDataURL, {
     reconnection: true,
     reconnectionDelay: 100,
     connectManually: true,

photon-client/src/plugins/ColorPicker.js

@@ -5,7 +5,7 @@ function initColorPicker() {
     if (!canvas)
         canvas = document.createElement('canvas');
 
-    image = document.querySelector('#normal-stream');
+    image = document.querySelector('#raw-stream');
     if (image !== null) {
       canvas.width = image.width;
       canvas.height = image.height;

photon-client/src/plugins/WebsocketVideoStream.js

@@ -0,0 +1,148 @@
+
+
+export class WebsocketVideoStream{
+
+
+    constructor(drawDiv, streamPort, host) {
+
+        this.drawDiv = drawDiv;
+        this.image = document.getElementById(this.drawDiv);
+        this.streamPort = streamPort;
+        this.serverAddr = "ws://" + host + "/websocket_cameras";
+        this.noStream = false;
+        this.noStreamPrev = false;
+        this.setNoStream();
+        this.ws_connect();
+        this.imgData = null;
+        this.imgDataTime = -1;
+        this.imgObjURL = null;
+        this.frameRxCount = 0;
+
+        requestAnimationFrame(()=>this.animationLoop());
+
+    }
+
+    animationLoop(){
+        var now = window.performance.now();
+
+        if((now - this.imgDataTime) > 2500 && this.imgData != null){
+            //Handle websocket send timeouts by restarting
+            this.setNoStream();
+            this.stopStream();
+            setTimeout(this.startStream.bind(this), 1000); //restart stream one second later
+        } else {
+            if(this.streamPort == null){
+                this.setNoStream();
+            } else if (this.imgData != null) {
+                //From https://stackoverflow.com/questions/67507616/set-image-src-from-image-blob/67507685#67507685
+                if(this.imgObjURL != null){
+                    URL.revokeObjectURL(this.imgObjURL)
+                }
+                this.imgObjURL = URL.createObjectURL(this.imgData);
+
+                //Update the image with the new mimetype and image
+                this.image.src = this.imgObjURL;
+                this.noStream = false;
+
+            } else {
+                //Nothing, hold previous image while waiting for next frame
+            }
+        }
+
+
+        requestAnimationFrame(()=>this.animationLoop());
+    }
+
+    setNoStream() {
+        this.noStreamPrev = this.noStream;
+        this.noStream = true;
+        if(this.noStreamPrev == false && this.noStream == true){
+            //One-shot background change to preserve animation
+            this.image.src = require("../assets/loading.gif");
+        }
+    }
+
+    startStream() {
+        if(this.serverConnectionActive == true && this.streamPort > 0){
+            this.ws.send(JSON.stringify({"cmd": "subscribe", "port":this.streamPort}));
+            this.noStream = false;
+        }
+    }
+
+    stopStream() {
+        if(this.serverConnectionActive == true && this.streamPort > 0){
+            this.ws.send(JSON.stringify({"cmd": "unsubscribe"}));
+            this.noStream = true;
+        }
+    }
+
+    setPort(streamPort){
+        this.stopStream();
+        this.frameRxCount = 0;
+        this.streamPort = streamPort;
+        this.startStream();
+    }
+
+    ws_onOpen() {
+        // Set the flag allowing general server communication
+        this.serverConnectionActive = true;
+        console.log("Connected!");
+        this.startStream();
+    }
+
+    ws_onClose(e) {
+        this.setNoStream();
+
+        //Clear flags to stop server communication
+        this.ws = null;
+        this.serverConnectionActive = false;
+
+        console.log('Camera Socket is closed. Reconnect will be attempted in 0.5 second.', e.reason);
+        setTimeout(this.ws_connect.bind(this), 500);
+
+        if(!e.wasClean){
+            console.error('Socket encountered error!');
+        }
+
+    }
+
+    ws_onError(e){
+        e; //prevent unused failure
+        this.ws.close();
+    }
+
+    ws_onMessage(e){
+        if(typeof e.data === 'string'){
+            //string data from host
+            //TODO - anything to receive info here? Maybe "available streams?"
+        } else {
+            if(e.data.size > 0){
+                //binary data - a frame
+                this.imgData = e.data;
+                this.imgDataTime = window.performance.now();
+                this.frameRxCount++;
+            } else {
+                //TODO - server is sending empty frames?
+            }
+        }
+
+    }
+
+    ws_connect() {
+        this.ws = new WebSocket(this.serverAddr);
+        this.ws.binaryType = "blob";
+        this.ws.onopen = this.ws_onOpen.bind(this);
+        this.ws.onmessage = this.ws_onMessage.bind(this);
+        this.ws.onclose = this.ws_onClose.bind(this);
+        this.ws.onerror = this.ws_onError.bind(this);
+        console.log("Connecting to server " + this.serverAddr);
+    }
+
+    ws_close(){
+        this.ws.close();
+    }
+
+}
+
+
+export default {WebsocketVideoStream}

photon-client/src/store/index.js

@@ -35,8 +35,8 @@ export default new Vuex.Store({
                 tiltDegrees: 0.0,
                 currentPipelineIndex: 0,
                 pipelineNicknames: ["Unknown"],
-                outputStreamPort: 1181,
-                inputStreamPort: 1182,
+                outputStreamPort: 0,
+                inputStreamPort: 0,
                 nickname: "Unknown",
                 videoFormatList: [
                     {

photon-client/src/views/CamerasView.vue

@@ -291,7 +291,8 @@
       >
         <template>
           <CVimage
-            :address="$store.getters.streamAddress[1]"
+            :id="cameras-cal"
+            :idx=1
             :disconnected="!$store.state.backendConnected"
             scale="100"
             style="border-radius: 5px;"

photon-client/src/views/PipelineView.vue

@@ -58,16 +58,16 @@
               >
                 <div style="position: relative; width: 100%; height: 100%;">
                   <cv-image
-                    :id="idx === 0 ? 'normal-stream' : ''"
+                    :id="idx === 0 ? 'raw-stream' : 'processed-stream'"
                     ref="streams"
-                    :address="$store.getters.streamAddress[idx]"
+                    :idx=idx
                     :disconnected="!$store.state.backendConnected"
                     scale="100"
                     :max-height="$store.getters.isDriverMode ? '40vh' : '300px'"
                     :max-height-md="$store.getters.isDriverMode ? '50vh' : '380px'"
                     :max-height-lg="$store.getters.isDriverMode ? '55vh' : '390px'"
                     :max-height-xl="$store.getters.isDriverMode ? '60vh' : '450px'"
-                    :alt="'Stream' + idx"
+                    :alt="'Stream ' + idx"
                     :color-picking="$store.state.colorPicking && idx === 0"
                     @click="onImageClick"
                   />
@@ -85,7 +85,7 @@
           <v-card
             color="primary"
           >
-            <camera-and-pipeline-select @camera-name-changed="reloadStreams" />
+            <camera-and-pipeline-select />
           </v-card>
           <v-card
             :disabled="$store.getters.isDriverMode || $store.state.colorPicking"

photon-core/src/main/java/org/photonvision/common/configuration/ConfigManager.java

@@ -438,7 +438,7 @@ public class ConfigManager {
             try {
                 Thread.sleep(1000);
             } catch (InterruptedException e) {
-                logger.error("Exception waiting for settings semaphor", e);
+                logger.error("Exception waiting for settings semaphore", e);
             }
         }
     }

photon-core/src/main/java/org/photonvision/vision/processes/VisionModule.java

@@ -40,7 +40,6 @@ import org.photonvision.vision.camera.USBCameraSource;
 import org.photonvision.vision.camera.ZeroCopyPicamSource;
 import org.photonvision.vision.frame.Frame;
 import org.photonvision.vision.frame.consumer.FileSaveFrameConsumer;
-import org.photonvision.vision.frame.consumer.MJPGFrameConsumer;
 import org.photonvision.vision.pipeline.AdvancedPipelineSettings;
 import org.photonvision.vision.pipeline.OutputStreamPipeline;
 import org.photonvision.vision.pipeline.ReflectivePipelineSettings;
@@ -48,6 +47,8 @@ import org.photonvision.vision.pipeline.UICalibrationData;
 import org.photonvision.vision.pipeline.result.CVPipelineResult;
 import org.photonvision.vision.target.TargetModel;
 import org.photonvision.vision.target.TrackedTarget;
+import org.photonvision.vision.videoStream.SocketVideoStream;
+import org.photonvision.vision.videoStream.SocketVideoStreamManager;
 
 /**
  * This is the God Class
@@ -56,32 +57,31 @@ import org.photonvision.vision.target.TrackedTarget;
  * provide info on settings changes. VisionModuleManager holds a list of all current vision modules.
  */
 public class VisionModule {
-    private static final int streamFPSCap = 30;
-
     private final Logger logger;
     protected final PipelineManager pipelineManager;
     protected final VisionSource visionSource;
     private final VisionRunner visionRunner;
     private final StreamRunnable streamRunnable;
     private final LinkedList<CVPipelineResultConsumer> resultConsumers = new LinkedList<>();
-    private final LinkedList<CVPipelineResultConsumer> fpsLimitedResultConsumers = new LinkedList<>();
     // Raw result consumers run before any drawing has been done by the OutputStreamPipeline
-    private final LinkedList<TriConsumer<Frame, Frame, List<TrackedTarget>>> rawResultConsumers =
+    private final LinkedList<TriConsumer<Frame, Frame, List<TrackedTarget>>> streamResultConsumers =
             new LinkedList<>();
     private final NTDataPublisher ntConsumer;
     private final UIDataPublisher uiDataConsumer;
     protected final int moduleIndex;
     protected final QuirkyCamera cameraQuirks;
 
-    private long lastFrameConsumeMillis;
     protected TrackedTarget lastPipelineResultBestTarget;
 
-    MJPGFrameConsumer dashboardInputStreamer;
-    MJPGFrameConsumer dashboardOutputStreamer;
+    private int inputStreamPort = -1;
+    private int outputStreamPort = -1;
 
     FileSaveFrameConsumer inputFrameSaver;
     FileSaveFrameConsumer outputFrameSaver;
 
+    SocketVideoStream inputVideoStreamer;
+    SocketVideoStream outputVideoStreamer;
+
     public VisionModule(PipelineManager pipelineManager, VisionSource visionSource, int index) {
         logger =
                 new Logger(
@@ -129,7 +129,7 @@ public class VisionModule {
 
         createStreams();
 
-        recreateFpsLimitedResultConsumers();
+        recreateStreamResultConsumers();
 
         ntConsumer =
                 new NTDataPublisher(
@@ -166,49 +166,33 @@ public class VisionModule {
     }
 
     private void destroyStreams() {
-        dashboardInputStreamer.close();
-        dashboardOutputStreamer.close();
+        SocketVideoStreamManager.getInstance().removeStream(inputVideoStreamer);
+        SocketVideoStreamManager.getInstance().removeStream(outputVideoStreamer);
     }
 
     private void createStreams() {
         var camStreamIdx = visionSource.getSettables().getConfiguration().streamIndex;
         // If idx = 0, we want (1181, 1182)
-        var inputStreamPort = 1181 + (camStreamIdx * 2);
-        var outputStreamPort = 1181 + (camStreamIdx * 2) + 1;
-
-        dashboardOutputStreamer =
-                new MJPGFrameConsumer(
-                        visionSource.getSettables().getConfiguration().nickname + "-output", outputStreamPort);
-        dashboardInputStreamer =
-                new MJPGFrameConsumer(
-                        visionSource.getSettables().getConfiguration().uniqueName + "-input", inputStreamPort);
+        this.inputStreamPort = 1181 + (camStreamIdx * 2);
+        this.outputStreamPort = 1181 + (camStreamIdx * 2) + 1;
 
         inputFrameSaver =
                 new FileSaveFrameConsumer(visionSource.getSettables().getConfiguration().nickname, "input");
         outputFrameSaver =
                 new FileSaveFrameConsumer(
                         visionSource.getSettables().getConfiguration().nickname, "output");
+
+        inputVideoStreamer = new SocketVideoStream(this.inputStreamPort);
+        outputVideoStreamer = new SocketVideoStream(this.outputStreamPort);
+        SocketVideoStreamManager.getInstance().addStream(inputVideoStreamer);
+        SocketVideoStreamManager.getInstance().addStream(outputVideoStreamer);
     }
 
-    private void recreateFpsLimitedResultConsumers() {
-        // Important! These must come before the stream result consumers because the stream result
-        // consumers release the frame
-        rawResultConsumers.add((in, out, tgts) -> inputFrameSaver.accept(in));
-        fpsLimitedResultConsumers.add(result -> outputFrameSaver.accept(result.outputFrame));
-
-        fpsLimitedResultConsumers.add(
-                result -> {
-                    if (this.pipelineManager.getCurrentPipelineSettings().inputShouldShow)
-                        dashboardInputStreamer.accept(result.inputFrame);
-                    else dashboardInputStreamer.disabledTick();
-                });
-        fpsLimitedResultConsumers.add(
-                result -> {
-                    if (this.pipelineManager.getCurrentPipelineSettings().outputShouldShow)
-                        dashboardOutputStreamer.accept(result.outputFrame);
-                    else dashboardInputStreamer.disabledTick();
-                    ;
-                });
+    private void recreateStreamResultConsumers() {
+        streamResultConsumers.add((in, out, tgts) -> inputFrameSaver.accept(in));
+        streamResultConsumers.add((in, out, tgts) -> outputFrameSaver.accept(out));
+        streamResultConsumers.add((in, out, tgts) -> inputVideoStreamer.accept(in));
+        streamResultConsumers.add((in, out, tgts) -> outputVideoStreamer.accept(out));
     }
 
     private class StreamRunnable extends Thread {
@@ -270,12 +254,11 @@ public class VisionModule {
                     this.shouldRun = false;
                 }
                 if (shouldRun) {
-                    consumeRawResults(inputFrame, outputFrame, targets);
                     try {
                         CVPipelineResult osr =
                                 outputStreamPipeline.process(inputFrame, outputFrame, settings, targets);
+                        consumeResults(inputFrame, osr.outputFrame, targets);
 
-                        consumeFpsLimitedResult(osr);
                     } catch (Exception e) {
                         // Never die
                         logger.error("Exception while running stream runnable!", e);
@@ -473,14 +456,14 @@ public class VisionModule {
         outputFrameSaver.updateCameraNickname(newName);
 
         // Rename streams
-        fpsLimitedResultConsumers.clear();
+        streamResultConsumers.clear();
 
         // Teardown and recreate streams
         destroyStreams();
         createStreams();
 
         // Rebuild streamers
-        recreateFpsLimitedResultConsumers();
+        recreateStreamResultConsumers();
 
         // Push new data to the UI
         saveAndBroadcastAll();
@@ -515,8 +498,8 @@ public class VisionModule {
             temp.put(k, internalMap);
         }
         ret.videoFormatList = temp;
-        ret.outputStreamPort = dashboardOutputStreamer.getCurrentStreamPort();
-        ret.inputStreamPort = dashboardInputStreamer.getCurrentStreamPort();
+        ret.outputStreamPort = this.outputStreamPort;
+        ret.inputStreamPort = this.inputStreamPort;
 
         var calList = new ArrayList<HashMap<String, Object>>();
         for (var c : visionSource.getSettables().getConfiguration().calibrations) {
@@ -566,7 +549,7 @@ public class VisionModule {
                     result.targets);
             // The streamRunnable manages releasing in this case
         } else {
-            consumeFpsLimitedResult(result);
+            consumeResults(result.inputFrame, result.outputFrame, result.targets);
 
             result.release();
             // In this case we don't bother with a separate streaming thread and we release
@@ -579,19 +562,9 @@ public class VisionModule {
         }
     }
 
-    private void consumeFpsLimitedResult(CVPipelineResult result) {
-        long dt = System.currentTimeMillis() - lastFrameConsumeMillis;
-        if (dt > 1000 / streamFPSCap) {
-            for (var c : fpsLimitedResultConsumers) {
-                c.accept(result);
-            }
-            lastFrameConsumeMillis = System.currentTimeMillis();
-        }
-    }
-
-    /** Consume results prior to drawing on them. */
-    private void consumeRawResults(Frame inputFrame, Frame outputFrame, List<TrackedTarget> targets) {
-        for (var c : rawResultConsumers) {
+    /** Consume stream/target results, no rate limiting applied */
+    private void consumeResults(Frame inputFrame, Frame outputFrame, List<TrackedTarget> targets) {
+        for (var c : streamResultConsumers) {
             c.accept(inputFrame, outputFrame, targets);
         }
     }

photon-core/src/main/java/org/photonvision/vision/videoStream/SocketVideoStream.java

@@ -0,0 +1,116 @@
+/*
+ * Copyright (C) Photon Vision.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+package org.photonvision.vision.videoStream;
+
+import java.nio.ByteBuffer;
+import java.util.Base64;
+import java.util.concurrent.locks.Lock;
+import java.util.concurrent.locks.ReentrantLock;
+import java.util.function.Consumer;
+import org.opencv.core.MatOfByte;
+import org.opencv.core.MatOfInt;
+import org.opencv.imgcodecs.Imgcodecs;
+import org.photonvision.vision.frame.Frame;
+import org.photonvision.vision.frame.consumer.MJPGFrameConsumer;
+
+public class SocketVideoStream implements Consumer<Frame> {
+    int portID = 0; // Align with cscore's port for unique identification of stream
+    MatOfByte jpegBytes = null;
+
+    // Gets set to true when another class reads out valid jpeg bytes at least once
+    // Set back to false when another frame is freshly converted
+    // Should eliminate synchronization issues of differeing rates of putting frames in
+    // and taking them back out
+    boolean frameWasConsumed = false;
+
+    // Synclock around manipulating the jpeg bytes from multiple threads
+    Lock jpegBytesLock = new ReentrantLock();
+
+    MJPGFrameConsumer oldSchoolServer;
+
+    private int userCount = 0;
+
+    public SocketVideoStream(int portID) {
+        this.portID = portID;
+        oldSchoolServer =
+                new MJPGFrameConsumer("Port_" + Integer.toString(portID) + "_MJPEG_Server", portID);
+    }
+
+    @Override
+    public void accept(Frame frame) {
+        if (userCount > 0) {
+            if (jpegBytesLock
+                    .tryLock()) { // we assume frames are coming in frequently. Just skip this frame if we're
+                // locked doing something else.
+                try {
+                    // Does a single-shot frame recieve and convert to JPEG for efficency
+                    // Will not capture/convert again until convertNextFrame() is called
+                    if (frame != null && !frame.image.getMat().empty() && jpegBytes == null) {
+                        frameWasConsumed = false;
+                        jpegBytes = new MatOfByte();
+                        Imgcodecs.imencode(
+                                ".jpg",
+                                frame.image.getMat(),
+                                jpegBytes,
+                                new MatOfInt(Imgcodecs.IMWRITE_JPEG_QUALITY, 75));
+                    }
+                } finally {
+                    jpegBytesLock.unlock();
+                }
+            }
+        }
+        oldSchoolServer.accept(frame);
+    }
+
+    public String getJPEGBase64EncodedStr() {
+        String sendStr = null;
+        jpegBytesLock.lock();
+        if (jpegBytes != null) {
+            sendStr = Base64.getEncoder().encodeToString(jpegBytes.toArray());
+        }
+        jpegBytesLock.unlock();
+        return sendStr;
+    }
+
+    public ByteBuffer getJPEGByteBuffer() {
+        ByteBuffer sendStr = null;
+        jpegBytesLock.lock();
+        if (jpegBytes != null) {
+            sendStr = ByteBuffer.wrap(jpegBytes.toArray());
+        }
+        jpegBytesLock.unlock();
+        return sendStr;
+    }
+
+    public void convertNextFrame() {
+        jpegBytesLock.lock();
+        if (jpegBytes != null) {
+            jpegBytes.release();
+            jpegBytes = null;
+        }
+        jpegBytesLock.unlock();
+    }
+
+    public void addUser() {
+        userCount++;
+    }
+
+    public void removeUser() {
+        userCount--;
+    }
+}

photon-core/src/main/java/org/photonvision/vision/videoStream/SocketVideoStreamManager.java

@@ -0,0 +1,97 @@
+/*
+ * Copyright (C) Photon Vision.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+package org.photonvision.vision.videoStream;
+
+import io.javalin.websocket.WsContext;
+import java.nio.ByteBuffer;
+import java.util.Hashtable;
+import java.util.Map;
+import org.photonvision.common.logging.LogGroup;
+import org.photonvision.common.logging.Logger;
+
+public class SocketVideoStreamManager {
+    private static final int NO_STREAM_PORT = -1;
+
+    private final Logger logger = new Logger(SocketVideoStreamManager.class, LogGroup.Camera);
+
+    private Map<Integer, SocketVideoStream> streams = new Hashtable<Integer, SocketVideoStream>();
+    private Map<WsContext, Integer> userSubscriptions = new Hashtable<WsContext, Integer>();
+
+    private static class ThreadSafeSingleton {
+        private static final SocketVideoStreamManager INSTANCE = new SocketVideoStreamManager();
+    }
+
+    public static SocketVideoStreamManager getInstance() {
+        return ThreadSafeSingleton.INSTANCE;
+    }
+
+    private SocketVideoStreamManager() {}
+
+    // Register a new available camera stream
+    public void addStream(SocketVideoStream newStream) {
+        streams.put(newStream.portID, newStream);
+        logger.debug("Added new stream for port " + Integer.toString(newStream.portID));
+    }
+
+    // Remove a previously-added camera stream, and unsubscribe all users
+    public void removeStream(SocketVideoStream oldStream) {
+        streams.remove(oldStream.portID);
+        logger.debug("Removed stream for port " + Integer.toString(oldStream.portID));
+    }
+
+    // Indicate a user would like to subscribe to a camera stream and get frames from it periodically
+    public void addSubscription(WsContext user, int streamPortID) {
+        var stream = streams.get(streamPortID);
+        if (stream != null) {
+            userSubscriptions.put(user, streamPortID);
+            stream.addUser();
+        } else {
+            logger.error(
+                    "User attempted to subscribe to non-existent port " + Integer.toString(streamPortID));
+        }
+    }
+
+    // Indicate a user would like to stop receiving one camera stream
+    public void removeSubscription(WsContext user) {
+        var port = userSubscriptions.get(user);
+        if (port != null) {
+            var stream = streams.get(port);
+            userSubscriptions.put(user, NO_STREAM_PORT);
+            stream.removeUser();
+        }
+    }
+
+    // For a given user, return the jpeg bytes (or null) for the most recent frame
+    public ByteBuffer getSendFrame(WsContext user) {
+        var port = userSubscriptions.get(user);
+        if (port != null && port != NO_STREAM_PORT) {
+            var stream = streams.get(port);
+            return stream.getJPEGByteBuffer();
+        } else {
+            return null;
+        }
+    }
+
+    // Causes all streams to "re-trigger" and recieve and convert their next mjpeg frame
+    // Only invoke this after all returned jpeg Strings have been used.
+    public void allStreamConvertNextFrame() {
+        for (SocketVideoStream stream : streams.values()) {
+            stream.convertNextFrame();
+        }
+    }
+}

photon-server/build.gradle

@@ -43,9 +43,16 @@ task copyClientUIToResources(type: Copy) {
     into "${projectDir}/src/main/resources/web/"
 }
 
+task copyThinclientToResources(type: Copy) {
+    from "${projectDir}/../photon-thinclient/"
+    into "${projectDir}/src/main/resources/web/"
+}
+
+
 task buildAndCopyUI {}
 
 buildAndCopyUI.dependsOn copyClientUIToResources
+buildAndCopyUI.dependsOn copyThinclientToResources
 copyClientUIToResources.dependsOn runNpmOnClient
 copyClientUIToResources.shouldRunAfter runNpmOnClient
 

photon-server/src/main/java/org/photonvision/server/CameraSocketHandler.java

@@ -0,0 +1,140 @@
+/*
+ * Copyright (C) Photon Vision.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+package org.photonvision.server;
+
+import com.fasterxml.jackson.core.JsonProcessingException;
+import com.fasterxml.jackson.databind.JsonNode;
+import com.fasterxml.jackson.databind.ObjectMapper;
+import io.javalin.websocket.WsBinaryMessageContext;
+import io.javalin.websocket.WsCloseContext;
+import io.javalin.websocket.WsConnectContext;
+import io.javalin.websocket.WsContext;
+import io.javalin.websocket.WsMessageContext;
+import java.util.HashMap;
+import java.util.List;
+import java.util.concurrent.CopyOnWriteArrayList;
+import org.photonvision.common.logging.LogGroup;
+import org.photonvision.common.logging.Logger;
+import org.photonvision.vision.videoStream.SocketVideoStreamManager;
+
+public class CameraSocketHandler {
+    private final Logger logger = new Logger(CameraSocketHandler.class, LogGroup.WebServer);
+    private final List<WsContext> users = new CopyOnWriteArrayList<>();
+    private final SocketVideoStreamManager svsManager = SocketVideoStreamManager.getInstance();
+
+    private Thread cameraBroadcastThread;
+
+    public static class UIMap extends HashMap<String, Object> {}
+
+    private static class ThreadSafeSingleton {
+        private static final CameraSocketHandler INSTANCE = new CameraSocketHandler();
+    }
+
+    public static CameraSocketHandler getInstance() {
+        return CameraSocketHandler.ThreadSafeSingleton.INSTANCE;
+    }
+
+    private CameraSocketHandler() {
+        cameraBroadcastThread = new Thread(this::broadcastFramesTask);
+        cameraBroadcastThread.setPriority(2); // fairly low priority
+        cameraBroadcastThread.start();
+    }
+
+    public void onConnect(WsConnectContext context) {
+        context.session.setIdleTimeout(Long.MAX_VALUE); // TODO: determine better value
+        var insa = context.session.getRemote().getInetSocketAddress();
+        var host = insa.getAddress().toString() + ":" + insa.getPort();
+        logger.info("New camera websocket connection from " + host);
+        users.add(context);
+    }
+
+    protected void onClose(WsCloseContext context) {
+        var insa = context.session.getRemote().getInetSocketAddress();
+        var host = insa.getAddress().toString() + ":" + insa.getPort();
+        var reason = context.reason() != null ? context.reason() : "Connection closed by client";
+        logger.info("Closing camera websocket connection from " + host + " for reason: " + reason);
+        svsManager.removeSubscription(context);
+        users.remove(context);
+    }
+
+    @SuppressWarnings({"unchecked"})
+    public void onMessage(WsMessageContext context) {
+        var messageStr = context.message();
+        ObjectMapper mapper = new ObjectMapper();
+        try {
+            JsonNode actualObj = mapper.readTree(messageStr);
+
+            try {
+                var entryCmd = actualObj.get("cmd").asText();
+                var socketMessageType = CameraSocketMessageType.fromEntryKey(entryCmd);
+
+                logger.trace(() -> "Got Camera WS message: [" + socketMessageType + "]");
+
+                if (socketMessageType == null) {
+                    logger.warn("Got unknown socket message command: " + entryCmd);
+                }
+
+                switch (socketMessageType) {
+                    case CSMT_SUBSCRIBE:
+                        {
+                            int portId = actualObj.get("port").asInt();
+                            svsManager.addSubscription(context, portId);
+                            break;
+                        }
+                    case CSMT_UNSUBSCRIBE:
+                        {
+                            svsManager.removeSubscription(context);
+                            break;
+                        }
+                }
+            } catch (Exception e) {
+                logger.error("Failed to parse message!", e);
+            }
+
+        } catch (JsonProcessingException e) {
+            logger.warn("Could not parse message \"" + messageStr + "\"");
+            e.printStackTrace();
+            return;
+        }
+    }
+
+    @SuppressWarnings({"unchecked"})
+    public void onBinaryMessage(WsBinaryMessageContext context) {
+        return; // ignoring binary messages for now
+    }
+
+    private void broadcastFramesTask() {
+        // Background camera image broadcasting thread
+        while (!Thread.currentThread().isInterrupted()) {
+            svsManager.allStreamConvertNextFrame();
+
+            try {
+                Thread.sleep(1);
+            } catch (InterruptedException e) {
+                logger.error("Exception waiting for camera stream broadcast semaphore", e);
+            }
+
+            for (var user : users) {
+                var sendBytes = svsManager.getSendFrame(user);
+                if (sendBytes != null) {
+                    user.send(sendBytes);
+                }
+            }
+        }
+    }
+}

photon-server/src/main/java/org/photonvision/server/CameraSocketMessageType.java

@@ -0,0 +1,46 @@
+/*
+ * Copyright (C) Photon Vision.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+package org.photonvision.server;
+
+import java.util.EnumSet;
+import java.util.HashMap;
+import java.util.Map;
+
+@SuppressWarnings("unused")
+public enum CameraSocketMessageType {
+    CSMT_SUBSCRIBE("subscribe"),
+    CSMT_UNSUBSCRIBE("unsubscribe");
+
+    public final String entryKey;
+
+    CameraSocketMessageType(String entryKey) {
+        this.entryKey = entryKey;
+    }
+
+    private static final Map<String, CameraSocketMessageType> entryKeyToValueMap = new HashMap<>();
+
+    static {
+        for (var value : EnumSet.allOf(CameraSocketMessageType.class)) {
+            entryKeyToValueMap.put(value.entryKey, value);
+        }
+    }
+
+    public static CameraSocketMessageType fromEntryKey(String entryKey) {
+        return entryKeyToValueMap.get(entryKey);
+    }
+}

photon-server/src/main/java/org/photonvision/server/DataSocketHandler.java

@@ -42,8 +42,8 @@ import org.photonvision.common.logging.Logger;
 import org.photonvision.vision.pipeline.PipelineType;
 
 @SuppressWarnings("rawtypes")
-public class SocketHandler {
-    private final Logger logger = new Logger(SocketHandler.class, LogGroup.WebServer);
+public class DataSocketHandler {
+    private final Logger logger = new Logger(DataSocketHandler.class, LogGroup.WebServer);
     private final List<WsContext> users = new CopyOnWriteArrayList<>();
     private final ObjectMapper objectMapper = new ObjectMapper(new MessagePackFactory());
     private final DataChangeService dcService = DataChangeService.getInstance();
@@ -54,14 +54,14 @@ public class SocketHandler {
     public static class UIMap extends HashMap<String, Object> {}
 
     private static class ThreadSafeSingleton {
-        private static final SocketHandler INSTANCE = new SocketHandler();
+        private static final DataSocketHandler INSTANCE = new DataSocketHandler();
     }
 
-    public static SocketHandler getInstance() {
-        return SocketHandler.ThreadSafeSingleton.INSTANCE;
+    public static DataSocketHandler getInstance() {
+        return DataSocketHandler.ThreadSafeSingleton.INSTANCE;
     }
 
-    private SocketHandler() {
+    private DataSocketHandler() {
         dcService.addSubscribers(
                 uiOutboundSubscriber,
                 new UIInboundSubscriber()); // Subscribe outgoing messages to the data change service
@@ -84,19 +84,6 @@ public class SocketHandler {
         var reason = context.reason() != null ? context.reason() : "Connection closed by client";
         logger.info("Closing websocket connection from " + host + " for reason: " + reason);
         users.remove(context);
-
-        if (users.size() == 0) {
-            logger.info("All websocket connections are closed. Setting inputShouldShow to false.");
-
-            // cameraIndex -1 means the event is received by all cameras
-            dcService.publishEvent(
-                    new IncomingWebSocketEvent<>(
-                            DataChangeDestination.DCD_ACTIVEPIPELINESETTINGS,
-                            "inputShouldShow",
-                            false,
-                            -1,
-                            null));
-        }
     }
 
     @SuppressWarnings({"unchecked"})
@@ -117,7 +104,7 @@ public class SocketHandler {
                 try {
                     var entryKey = entry.getKey();
                     var entryValue = entry.getValue();
-                    var socketMessageType = SocketMessageType.fromEntryKey(entryKey);
+                    var socketMessageType = DataSocketMessageType.fromEntryKey(entryKey);
 
                     logger.trace(
                             () ->

photon-server/src/main/java/org/photonvision/server/DataSocketMessageType.java

@@ -22,7 +22,7 @@ import java.util.HashMap;
 import java.util.Map;
 
 @SuppressWarnings("unused")
-public enum SocketMessageType {
+public enum DataSocketMessageType {
     SMT_DRIVERMODE("driverMode"),
     SMT_CHANGECAMERANAME("changeCameraName"),
     SMT_CHANGEPIPELINENAME("changePipelineName"),
@@ -40,19 +40,19 @@ public enum SocketMessageType {
 
     public final String entryKey;
 
-    SocketMessageType(String entryKey) {
+    DataSocketMessageType(String entryKey) {
         this.entryKey = entryKey;
     }
 
-    private static final Map<String, SocketMessageType> entryKeyToValueMap = new HashMap<>();
+    private static final Map<String, DataSocketMessageType> entryKeyToValueMap = new HashMap<>();
 
     static {
-        for (var value : EnumSet.allOf(SocketMessageType.class)) {
+        for (var value : EnumSet.allOf(DataSocketMessageType.class)) {
             entryKeyToValueMap.put(value.entryKey, value);
         }
     }
 
-    public static SocketMessageType fromEntryKey(String entryKey) {
+    public static DataSocketMessageType fromEntryKey(String entryKey) {
         return entryKeyToValueMap.get(entryKey);
     }
 }

photon-server/src/main/java/org/photonvision/server/Server.java

@@ -61,15 +61,24 @@ public class Server {
                                                                     })));
                         });
 
-        var socketHandler = SocketHandler.getInstance();
-
-        /*Web Socket Events */
+        /*Web Socket Events for Data Exchage */
+        var dsHandler = DataSocketHandler.getInstance();
         app.ws(
-                "/websocket",
+                "/websocket_data",
                 ws -> {
-                    ws.onConnect(socketHandler::onConnect);
-                    ws.onClose(socketHandler::onClose);
-                    ws.onBinaryMessage(socketHandler::onBinaryMessage);
+                    ws.onConnect(dsHandler::onConnect);
+                    ws.onClose(dsHandler::onClose);
+                    ws.onBinaryMessage(dsHandler::onBinaryMessage);
+                });
+        /*Web Socket Events for Camera Streaming */
+        var camDsHandler = CameraSocketHandler.getInstance();
+        app.ws(
+                "/websocket_cameras",
+                ws -> {
+                    ws.onConnect(camDsHandler::onConnect);
+                    ws.onClose(camDsHandler::onClose);
+                    ws.onBinaryMessage(camDsHandler::onBinaryMessage);
+                    ws.onMessage(camDsHandler::onMessage);
                 });
         /*API Events*/
         app.post("/api/settings/import", RequestHandler::onSettingUpload);

photon-server/src/main/java/org/photonvision/server/UIOutboundSubscriber.java

@@ -35,9 +35,9 @@ import org.photonvision.common.logging.Logger;
 class UIOutboundSubscriber extends DataChangeSubscriber {
     Logger logger = new Logger(UIOutboundSubscriber.class, LogGroup.WebServer);
 
-    private final SocketHandler socketHandler;
+    private final DataSocketHandler socketHandler;
 
-    public UIOutboundSubscriber(SocketHandler socketHandler) {
+    public UIOutboundSubscriber(DataSocketHandler socketHandler) {
         super(DataChangeSource.AllSources, Collections.singletonList(DataChangeDestination.DCD_UI));
         this.socketHandler = socketHandler;
     }

photon-thinclient/thinclient.html

@@ -0,0 +1,223 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>ThinClient</title>
+
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+        }
+        .imgbox {
+            display: grid;
+            height: 100%;
+            width: 100%;
+        }
+        .center-fit {
+
+            width: 90vw;
+            margin: auto;
+        }
+    </style>
+
+</head>
+
+<body>
+    <hr>
+        <div class="imgbox">
+            <img id="streamImg" class="center-fit" src=''>
+        </div>
+    <hr>
+
+    <form id="frm1">
+        Host <input type="text" id="host" value="photonvision.local"><br>
+        Port <input type="text" id="port" value="1181"><br>
+    </form>
+
+    <button>Start Stream</button>
+
+    <script type="module">
+        class WebsocketVideoStream{
+
+            constructor(drawDiv, streamPort, host) {
+
+                this.drawDiv = drawDiv;
+                this.image = document.getElementById(this.drawDiv);
+                this.streamPort = streamPort;
+                this.serverAddr = "ws://" + host + "/websocket_cameras";
+                this.noStream = false;
+                this.noStreamPrev = false;
+                this.setNoStream();
+                this.ws_connect();
+                this.imgData = null;
+                this.imgDataTime = -1;
+                this.imgObjURL = null;
+                this.frameRxCount = 0;
+
+                requestAnimationFrame(()=>this.animationLoop());
+            }
+
+            animationLoop(){
+                var now = window.performance.now();
+
+                if((now - this.imgDataTime) > 2500 && this.imgData != null){
+                    //Handle websocket send timeouts by restarting
+                    this.setNoStream();
+                    this.stopStream();
+                    setTimeout(this.startStream.bind(this), 1000); //restart stream one second later
+                } else {
+                    if(this.streamPort == null){
+                        this.setNoStream();
+                    } else if (this.imgData != null) {
+                        //From https://stackoverflow.com/questions/67507616/set-image-src-from-image-blob/67507685#67507685
+                        if(this.imgObjURL != null){
+                            URL.revokeObjectURL(this.imgObjURL)
+                        }
+                        this.imgObjURL = URL.createObjectURL(this.imgData);
+
+                        //Update the image with the new mimetype and image
+                        this.image.src = this.imgObjURL;
+                        this.noStream = false;
+
+                    } else {
+                        //Nothing, hold previous image while waiting for next frame
+                    }
+                }
+
+                requestAnimationFrame(()=>this.animationLoop());
+            }
+
+            setNoStream() {
+                this.noStreamPrev = this.noStream;
+                this.noStream = true;
+                if(this.noStreamPrev == false && this.noStream == true){
+                    //One-shot background change to preserve animation
+                    this.image.src = "loading.gif";
+                }
+            }
+
+            startStream() {
+                if(this.serverConnectionActive == true && this.streamPort > 0){
+                    this.ws.send(JSON.stringify({"cmd": "subscribe", "port":this.streamPort}));
+                    this.noStream = false;
+                }
+            }
+
+            stopStream() {
+                if(this.serverConnectionActive == true && this.streamPort > 0){
+                    this.ws.send(JSON.stringify({"cmd": "unsubscribe"}));
+                    this.noStream = true;
+                }
+            }
+
+            setPort(streamPort){
+                this.stopStream();
+                this.frameRxCount = 0;
+                this.streamPort = streamPort;
+                this.startStream();
+            }
+
+            ws_onOpen() {
+                // Set the flag allowing general server communication
+                this.serverConnectionActive = true;
+                console.log("Connected!");
+                this.startStream();
+            }
+
+            ws_onClose(e) {
+                this.setNoStream();
+
+                //Clear flags to stop server communication
+                this.ws = null;
+                this.serverConnectionActive = false;
+
+                console.log('Camera Socket is closed. Reconnect will be attempted in 0.5 second.', e.reason);
+                setTimeout(this.ws_connect.bind(this), 500);
+
+                if(!e.wasClean){
+                    console.error('Socket encountered error!');
+                }
+
+            }
+
+            ws_onError(e){
+                e; //prevent unused failure
+                this.ws.close();
+            }
+
+            ws_onMessage(e){
+                if(typeof e.data === 'string'){
+                    //string data from host
+                    //TODO - anything to recieve info here? Maybe "avaialble streams?"
+                } else {
+                    if(e.data.size > 0){
+                        //binary data - a frame
+                        this.imgData = e.data;
+                        this.imgDataTime = window.performance.now();
+                        this.frameRxCount++;
+                    } else {
+                        //TODO - server is sending empty frames?
+                    }
+
+                }
+
+            }
+
+            ws_connect() {
+                this.ws = new WebSocket(this.serverAddr);
+                this.ws.binaryType = "blob";
+                this.ws.onopen = this.ws_onOpen.bind(this);
+                this.ws.onmessage = this.ws_onMessage.bind(this);
+                this.ws.onclose = this.ws_onClose.bind(this);
+                this.ws.onerror = this.ws_onError.bind(this);
+                console.log("Connecting to server " + this.serverAddr);
+            }
+
+            ws_close(){
+                this.ws.close();
+            }
+
+        }
+
+        var stream = null;
+
+        function streamStartRequest() {
+            var host = document.getElementById("host").value + ":5800";
+            var port = document.getElementById("port").value;
+            if(stream == null){
+                stream = new WebsocketVideoStream("streamImg",port,host);
+                stream.startStream();
+            } else {
+                stream.setPort(port);
+            }
+
+        }
+
+        // Attach listener
+        document.querySelector('button').addEventListener('click', streamStartRequest);
+
+        // Deal with URLParams, validating inputs
+        const queryString = window.location.search;
+        const urlParams = new URLSearchParams(queryString);
+        const port_in = urlParams.get('port')
+        const host_in = urlParams.get('host')
+        if(port_in != ""){
+            document.getElementById("port").value = port_in;
+        }
+
+        if(host_in != ""){
+            document.getElementById("host").value = host_in;
+        }
+
+        if(port_in != "" & host_in != ""){
+            streamStartRequest(); //we got valid inputs, auto-start the stream
+        }
+
+
+    </script>
+
+</body>
+
+
+</html>