fix(Cameras): always emit frame event

src/components/widgets/camera/CameraItem.vue

@@ -16,6 +16,7 @@
         @update:camera-name-menu-items="cameraNameMenuItems = $event"
         @update:raw-camera-url="rawCameraUrl = $event"
         @update:frames-per-second="framesPerSecond = $event"
+        @frame="$emit('frame', $event)"
       />
     </template>
     <div v-else>
@@ -138,28 +139,6 @@ export default class CameraItem extends Vue {
   cameraName = ''
   cameraNameMenuItems: CameraNameMenuItem[] = []
 
-  @Watch('status')
-  onStatus (value: CameraConnectionStatus) {
-    if (value === 'connected' && this.$listeners?.frame && this.componentInstance) {
-      if (this.componentInstance.streamingElement instanceof HTMLImageElement) {
-        this.handleFrame()
-      } else if (this.componentInstance.streamingElement instanceof HTMLVideoElement) {
-        this.handleFrame(true)
-      }
-    }
-  }
-
-  handleFrame (animate = false) {
-    const element = this.componentInstance?.streamingElement as HTMLImageElement | HTMLVideoElement
-    if (element) {
-      this.$emit('frame', element)
-    }
-
-    if (animate) {
-      requestAnimationFrame(() => this.handleFrame(this.componentInstance?.animating ?? false))
-    }
-  }
-
   cameraNameMenuItemClick (item: CameraNameMenuItem) {
     this.componentInstance.menuItemClick(item)
   }

src/components/widgets/camera/services/IpstreamCamera.vue

@@ -23,6 +23,10 @@ export default class IpstreamCamera extends Mixins(CameraMixin) {
 
   cameraVideoSource = ''
 
+  get autoRaiseFrameEvent () {
+    return false
+  }
+
   startPlayback () {
     try {
       this.updateStatus('connecting')

src/components/widgets/camera/services/MjpegstreamerAdaptiveCamera.vue

@@ -29,9 +29,13 @@ export default class MjpegstreamerAdaptiveCamera extends Mixins(CameraMixin) {
   timeSmoothing = 0.6
   requestTimeSmoothing = 0.1
 
+  get autoRaiseFrameEvent () {
+    return false
+  }
+
   handleImageLoad () {
     this.updateStatus('connected')
-    this.$emit('frame')
+    this.$emit('frame', this.streamingElement)
 
     const fpsTarget = (!document.hasFocus() && this.camera.target_fps_idle) || this.camera.target_fps || 10
     const endTime = performance.now()

src/mixins/camera.ts

@@ -39,6 +39,10 @@ export default class CameraMixin extends Vue {
     }
   }
 
+  get autoRaiseFrameEvent () {
+    return true
+  }
+
   createTransform (): string {
     const element = this.streamingElement
     const { rotation, flip_horizontal, flip_vertical } = this.camera
@@ -80,6 +84,10 @@ export default class CameraMixin extends Vue {
 
       if (this.streamingElement) {
         this.cameraTransformStyle = this.createTransform()
+
+        if (this.autoRaiseFrameEvent) {
+          this.$emit('frame', this.streamingElement)
+        }
       }
 
       this.updateCameraTransformStyle()