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

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');
             }
         },
     }