Revert to mjpeg (#645)

* Reverted to front end using MJPEG streams. Added FPS limiting to the stream.

* formatting

* fixup - got handlers getting called on error to reload

* revised architecture to let a click open a new tab

Co-authored-by: Matt <matthew.morley.ca@gmail.com>

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

@@ -5,20 +5,19 @@
     :style="styleObject"
     :src="src"
     alt=""
-    @click="e => {this.openThinclientStream(e)}"
-  >
+    @click="clickHandler"
+    @error="loadErrHandler"
+  />
 </template>
 
-
 <script>
     export default {
         name: "CvImage",
         // eslint-disable-next-line vue/require-prop-types
-        props: ['idx', 'scale', 'maxHeight', 'maxHeightMd', 'maxHeightLg', 'maxHeightXl', 'colorPicking', 'id', 'disconnected'],
+        props: ['address', 'scale', 'maxHeight', 'maxHeightMd', 'maxHeightLg', 'maxHeightXl', 'colorPicking', 'id', 'disconnected'],
         data() {
             return {
                 seed: 1.0,
-                src: ""
             }
         },
         computed: {
@@ -28,13 +27,14 @@
                       "border-radius": "3px",
                       "display": "block",
                       "object-fit": "contain",
+                      "background-size:": "contain",
                       "object-position": "50% 50%",
                       "max-width": "100%",
                       "margin-left": "auto",
                       "margin-right": "auto",
                       "max-height": this.maxHeight,
                       height: `${this.scale}%`,
-                      cursor: (this.colorPicking ? `url(${require("../../assets/eyedropper.svg")}),` : "") + "default",
+                      cursor: (this.colorPicking ? `url(${require("../../assets/eyedropper.svg")}),` : "pointer") + "default",
                     };
 
                     if (this.$vuetify.breakpoint.xl) {
@@ -48,47 +48,62 @@
                     return ret;
                 }
             },
-            port: {
+            src: {
               get() {
-                if(this.idx == 0){
-                  return this.$store.state.cameraSettings[this.$store.state.currentCameraIndex].inputStreamPort;
+                var port = this.getCurPort();
+                if(port <= 0){
+                  //Invalid port, keep it spinny
+                  return require("../../assets/loading.gif");
                 } else {
-                  return this.$store.state.cameraSettings[this.$store.state.currentCameraIndex].outputStreamPort;
+                  //Valid port, connect
+                  return this.getSrcURLFromPort(port);
                 }
-              }
-            }
-        },
-        watch : {
-          port(newPort, oldPort){
-            newPort;
-            oldPort;
-            this.reload();
-          },
-          disconnected(newVal, oldVal){
-            oldVal;
-            if(newVal){
-              this.wsStream.setPort(0);
-            } else {
-              this.wsStream.setPort(this.port);
-            }
-          }
+              },
+            },
         },
         mounted() {
-          var wsvs = require('../../plugins/WebsocketVideoStream');
-          this.wsStream = new wsvs.WebsocketVideoStream(this.id, this.port, this.$address);
-        },
-        unmounted() {
-          this.wsStream.setPort(0);
+            this.reload(); // Force reload image on creation
         },
         methods: {
-            reload() {
-              console.log("Reloading " + this.id + " with port " + String(this.port));
-              this.wsStream.setPort(this.port);
+            getCurPort(){
+              var port = -1;
+              if(this.disconnected){
+                //Disconnected, port is unknown.
+                port = -1;
+              } else {
+                //Connected - get the port
+                if(this.id == 'raw-stream'){
+                  port = this.$store.state.cameraSettings[this.$store.state.currentCameraIndex].inputStreamPort
+                } else {
+                  port = this.$store.state.cameraSettings[this.$store.state.currentCameraIndex].outputStreamPort
+                }
+              }
+              return port;
             },
-            openThinclientStream(e){
-              e;
-              var URL = "/thinclient.html?port=" + String(this.port) + "&host=" + window.location.hostname;
-              window.open(URL, '_blank');
+            getSrcURLFromPort(port){
+              return "http://" + location.hostname + ":" + port + "/stream.mjpg" + "?" + this.seed;
+            },
+            loadErrHandler(event) {
+                console.log(event);
+                console.log("Error loading image, attempting to do it again...");
+                this.reload();
+            },
+            clickHandler(event) {
+              if(this.colorPicking){
+                this.$emit('click', event);
+              } else {
+                var port = this.getCurPort();
+                if(port <= 0){
+                  console.log("No valid port, ignoring click.");
+                } else {
+                  //Valid port, connect
+                  window.open(this.getSrcURLFromPort(port), '_blank');
+                }
+              }
+
+            },
+            reload() {
+                this.seed = new Date().getTime();
             }
         },
     }