From e6fdaf571a6d860f7eb2af56727dca644a1484bf Mon Sep 17 00:00:00 2001
From: Pedro Lamas <pedrolamas@gmail.com>
Date: Tue, 25 Jul 2023 10:18:21 +0100
Subject: [PATCH] refactor: move each camera to its own component

Signed-off-by: Pedro Lamas <pedrolamas@gmail.com>
---
 src/components/widgets/camera/CameraItem.vue  | 407 ++----------------
 .../camera/services/HlsstreamCamera.vue       |  52 +++
 .../widgets/camera/services/IframeCamera.vue  |  35 ++
 .../camera/services/IpstreamCamera.vue        |  33 ++
 .../services/MjpegstreamerAdaptiveCamera.vue  |  92 ++++
 .../camera/services/MjpegstreamerCamera.vue   |  39 ++
 .../services/WebrtcCamerastreamerCamera.vue   | 107 +++++
 src/dynamicImports.ts                         |   4 +
 src/mixins/camera.ts                          | 105 +++++
 9 files changed, 509 insertions(+), 365 deletions(-)
 create mode 100644 src/components/widgets/camera/services/HlsstreamCamera.vue
 create mode 100644 src/components/widgets/camera/services/IframeCamera.vue
 create mode 100644 src/components/widgets/camera/services/IpstreamCamera.vue
 create mode 100644 src/components/widgets/camera/services/MjpegstreamerAdaptiveCamera.vue
 create mode 100644 src/components/widgets/camera/services/MjpegstreamerCamera.vue
 create mode 100644 src/components/widgets/camera/services/WebrtcCamerastreamerCamera.vue
 create mode 100644 src/mixins/camera.ts

diff --git a/src/components/widgets/camera/CameraItem.vue b/src/components/widgets/camera/CameraItem.vue
index 5ee11f2ea8..f68571475f 100644
--- a/src/components/widgets/camera/CameraItem.vue
+++ b/src/components/widgets/camera/CameraItem.vue
@@ -4,35 +4,18 @@
     class="camera-container"
     v-on="$listeners"
   >
-    <img
-      v-if="camera.service === 'mjpegstreamer' || camera.service === 'mjpegstreamer-adaptive'"
-      ref="camera_image"
-      :src="cameraUrl"
-      class="camera-image"
-      @load="handleImgLoad"
-    >
-
-    <video
-      v-else-if="camera.service === 'ipstream' || camera.service === 'hlsstream' || camera.service === 'webrtc-camerastreamer'"
-      ref="camera_image"
-      :src="cameraUrl"
-      autoplay
-      muted
-      class="camera-image"
-    />
-
-    <iframe
-      v-else-if="camera.service === 'iframe'"
-      ref="camera_image"
-      :src="cameraUrl"
-      class="camera-image"
-      style="border: none; width: 100%"
-      :style="{
-        height: !camera.aspectRatio ? (fullscreen ? '100vh' : '720px') : undefined,
-        'aspect-ratio': camera.aspectRatio ? camera.aspectRatio.replace(':', '/') : undefined,
-        'max-height': camera.aspectRatio ? 'unset' : undefined
-      }"
-    />
+    <template v-if="cameraComponent">
+      <component
+        :is="cameraComponent"
+        :camera="camera"
+        class="camera-image"
+        @raw-camera-url="rawCameraUrl = $event"
+        @frames-per-second="framesPerSecond = $event"
+      />
+    </template>
+    <div v-else>
+      Camera service not supported!
+    </div>
 
     <div
       v-if="camera.name"
@@ -41,37 +24,40 @@
       {{ camera.name }}
     </div>
     <div
-      v-if="camera.service === 'mjpegstreamer-adaptive' && time"
+      v-if="framesPerSecond"
       class="camera-frames"
     >
-      fps: {{ currentFPS }}
+      fps: {{ framesPerSecond }}
     </div>
+
     <div
-      v-if="cameraFullScreenUrl && (!fullscreen || fullscreenMode === 'embed')"
+      v-if="!fullscreen && (fullscreenMode === 'embed' || !rawCameraUrl)"
+      class="camera-fullscreen"
+    >
+      <a :href="`/#/camera/${camera.id}`">
+        <v-icon>$fullScreen</v-icon>
+      </a>
+    </div>
+    <div
+      v-else-if="rawCameraUrl"
       class="camera-fullscreen"
     >
       <a
-        :href="cameraFullScreenUrl"
-        :target="fullscreen || fullscreenMode === 'rawstream' ? '_blank' : ''"
+        :href="rawCameraUrl"
+        target="_blank"
       >
-        <v-icon>${{ (fullscreen || fullscreenMode === 'rawstream') ? 'openInNew' : 'fullScreen' }}</v-icon>
+        <v-icon>$openInNew</v-icon>
       </a>
     </div>
   </v-sheet>
 </template>
 
 <script lang="ts">
-import { Component, Vue, Prop, Watch, Ref } from 'vue-property-decorator'
+import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
 import { CameraConfig } from '@/store/cameras/types'
-import { noop } from 'vue-class-component/lib/util'
 import { CameraFullscreenAction } from '@/store/config/types'
-import type HlsType from 'hls.js'
-import consola from 'consola'
-let Hls: typeof HlsType
+import { CameraComponents } from '@/dynamicImports'
 
-/**
- * Adaptive load credit to https://github.com/Rejdukien
- */
 @Component({})
 export default class CameraItem extends Vue {
   @Prop({ type: Object, required: true })
@@ -80,337 +66,28 @@ export default class CameraItem extends Vue {
   @Prop({ type: Boolean, required: false, default: false })
   readonly fullscreen!: boolean
 
-  @Ref('camera_image')
-  readonly cameraImage!: HTMLImageElement | HTMLVideoElement | HTMLIFrameElement
-
-  // Adaptive load counters
-  request_start_time = performance.now()
-  start_time = performance.now()
-  time = 0
-  request_time = 0
-  time_smoothing = 0.6
-  request_time_smoothing = 0.1
-  currentFPS = '0'
-  hls: HlsType | null = null
-  pc: RTCPeerConnection | null = null
-  remoteId: string | null = null
-
-  // URL used by camera
-  cameraUrl = ''
-  cameraFullScreenUrl = ''
-
-  // Maintains the last cachebust string
-  refresh = Date.now()
-
-  // Callback to cancel requestAnimationFrame() when component is being destroyed.
-  cancelCameraTransform = noop
-
-  /**
-   * Handle any transforms the user may have set on the camera image.
-   */
-  cameraTransformStyle (element: HTMLElement) {
-    const config = this.camera
-    let transforms = ''
-
-    if (config.rotation === 0) {
-      transforms += config && config.flipX ? ' scaleX(-1)' : ''
-      transforms += config && config.flipY ? ' scaleY(-1)' : ''
-    } else {
-      let scaling = 1
-      if (config.rotation !== 180) {
-        scaling = element.clientHeight / element.clientWidth
-        if (scaling > 1) {
-          scaling = element.clientWidth / element.clientHeight
-        }
-      }
-
-      transforms += config && config.flipX ? ` scaleX(-${scaling})` : ` scaleX(${scaling})`
-      transforms += config && config.flipY ? ` scaleY(-${scaling})` : ` scaleY(${scaling})`
-      transforms += ` rotate(${config.rotation}deg)`
-    }
-
-    return transforms.trimLeft().length
-      ? { transform: transforms.trimLeft() }
-      : {}
-  }
-
-  @Watch('camera', { immediate: true })
-  onCameraChange () {
-    this.setUrl()
-    if (!this.fullscreen && this.fullscreenMode === 'embed') {
-      this.cameraFullScreenUrl = `/#/camera/${this.camera.id}`
-    }
-  }
-
-  /**
-   * On creation, set the initial urls and bind the visibility listener.
-   */
-  created () {
-    document.addEventListener('visibilitychange', this.setUrl, false)
-    this.cancelCameraTransform = this.createTransformAnimation()
-  }
+  rawCameraUrl: string | null = null
+  framesPerSecond : string | null = null
 
-  mounted () {
-    this.setUrl()
+  @Watch('camera')
+  onCamera () {
+    this.rawCameraUrl = ''
+    this.framesPerSecond = ''
   }
 
-  /**
-   * make sure to clear the URL and remove the listener when we destroy the
-   * component.
-   */
-  beforeDestroy () {
-    this.hls?.destroy()
-    this.pc?.close()
-    this.cancelCameraTransform()
-    this.cameraUrl = this.cameraImage.src = ''
-    this.cameraFullScreenUrl = ''
-    document.removeEventListener('visibilitychange', this.setUrl)
-  }
-
-  /**
-   * For image based streams / adaptive loads, set the refresh token
-   * and set the new cachebusted url.
-   */
-  handleRefresh () {
-    if (!document.hidden) {
-      this.refresh = Date.now()
-      // this.setUrl()
-      this.currentFPS = Math.round(1000 / this.time).toLocaleString(undefined, { minimumIntegerDigits: 2 })
-      this.$nextTick(() => {
-        const hostUrl = new URL(document.URL)
-        const url = new URL(this.cameraUrl, hostUrl.origin)
-        url.searchParams.set('cacheBust', this.refresh.toString())
-        this.request_start_time = performance.now()
-        this.cameraUrl = url.toString()
-      })
-    } else {
-      this.cameraUrl = ''
-    }
-  }
-
-  /**
-   * Handles the reload of the image, forces a new cachebust and sets the
-   * performance counters for the next load.
-   * It only used for the adaptive load type.
-   */
-  handleImgLoad () {
-    if (
-      this.camera &&
-      this.camera.service === 'mjpegstreamer-adaptive'
-    ) {
-      const fpsTarget = (!document.hasFocus() && this.camera.targetFpsIdle) || this.camera.targetFps || 10
-      const end_time = performance.now()
-      const current_time = end_time - this.start_time
-      this.time = (this.time * this.time_smoothing) + (current_time * (1.0 - this.time_smoothing))
-      this.start_time = end_time
-
-      const target_time = 1000 / fpsTarget
-
-      const current_request_time = performance.now() - this.request_start_time
-      this.request_time = (this.request_time * this.request_time_smoothing) + (current_request_time * (1.0 - this.request_time_smoothing))
-      const timeout = Math.max(0, target_time - this.request_time)
-
-      this.$nextTick(() => {
-        setTimeout(this.handleRefresh, timeout)
-      })
-    }
+  get fullscreenMode (): CameraFullscreenAction {
+    return this.$store.state.config.uiSettings.general.cameraFullscreenAction
   }
 
-  /**
-   * Sets the correct (cachebusted if applicable) camera url.
-   */
-  async setUrl () {
-    if (!document.hidden && this.cameraImage !== undefined) {
-      const type = this.camera.service
-      const baseUrl = this.camera.urlStream || this.camera.urlSnapshot || ''
-      const hostUrl = new URL(document.URL)
-      const url = new URL(baseUrl, hostUrl.origin)
-
-      switch (type) {
-        case 'mjpegstreamer':
-          url.searchParams.append('cacheBust', this.refresh.toString())
-          if (!url.searchParams.get('action')?.startsWith('stream')) {
-            url.searchParams.set('action', 'stream')
-          }
-          this.cameraUrl = url.toString()
-          if (!this.cameraFullScreenUrl) {
-            this.cameraFullScreenUrl = this.cameraUrl
-          }
-          break
-
-        case 'mjpegstreamer-adaptive':
-          this.request_start_time = performance.now()
-          url.searchParams.append('cacheBust', this.refresh.toString())
-          if (!url.searchParams.get('action')?.startsWith('snapshot')) {
-            url.searchParams.set('action', 'snapshot')
-          }
-          this.cameraUrl = url.toString()
-          if (!this.cameraFullScreenUrl) {
-            url.searchParams.set('action', 'stream')
-            this.cameraFullScreenUrl = url.toString()
-          }
-          break
-
-        case 'ipstream':
-        case 'iframe':
-          this.cameraUrl = baseUrl
-          if (!this.cameraFullScreenUrl) {
-            this.cameraFullScreenUrl = baseUrl
-          }
-          break
-
-        case 'hlsstream': {
-          const cameraVideo = this.cameraImage as HTMLVideoElement
-
-          if (!Hls) {
-            Hls = (await import('hls.js')).default
-          }
-
-          if (Hls.isSupported()) {
-            this.hls?.destroy()
-
-            this.hls = new Hls({
-              enableWorker: true,
-              lowLatencyMode: true,
-              maxLiveSyncPlaybackRate: 2,
-              liveSyncDuration: 0.5,
-              liveMaxLatencyDuration: 2,
-              backBufferLength: 5
-            })
-            this.hls.loadSource(baseUrl)
-            this.hls.attachMedia(cameraVideo)
-            this.hls.on(Hls.Events.MANIFEST_PARSED, () => {
-              cameraVideo.play()
-            })
-          } else if (cameraVideo.canPlayType('application/vnd.apple.mpegurl')) {
-            fetch(baseUrl).then(() => {
-              cameraVideo.src = baseUrl
-              cameraVideo.play()
-            })
-          }
-          break
-        }
-
-        case 'webrtc-camerastreamer': {
-          const cameraVideo = this.cameraImage as HTMLVideoElement
-
-          this.pc?.close()
-
-          fetch(baseUrl, {
-            body: JSON.stringify({
-              type: 'request'
-            }),
-            headers: {
-              'Content-Type': 'application/json'
-            },
-            method: 'POST'
-          })
-            .then(response => response.json())
-            .then((answer: RTCSessionDescriptionInit) => {
-              this.remoteId = 'id' in answer && typeof (answer.id) === 'string' ? answer.id : null
-
-              const config = {
-                sdpSemantics: 'unified-plan'
-              } as RTCConfiguration
-
-              if ('iceServers' in answer && Array.isArray(answer.iceServers)) {
-                config.iceServers = answer.iceServers
-              }
-
-              this.pc = new RTCPeerConnection(config)
-
-              this.pc.addTransceiver('video', {
-                direction: 'recvonly'
-              })
+  get cameraComponent () {
+    if (this.camera.service) {
+      const componentName = `${this.$filters.startCase(this.camera.service).replace(' ', '')}Camera`
 
-              this.pc.ontrack = (evt: RTCTrackEvent) => {
-                if (evt.track.kind === 'video' && cameraVideo) {
-                  cameraVideo.srcObject = evt.streams[0]
-                }
-              }
-
-              this.pc.onicecandidate = (e: RTCPeerConnectionIceEvent) => {
-                if (e.candidate) {
-                  return fetch(baseUrl, {
-                    body: JSON.stringify({
-                      type: 'remote_candidate',
-                      id: this.remoteId,
-                      candidates: [e.candidate]
-                    }),
-                    headers: {
-                      'Content-Type': 'application/json'
-                    },
-                    method: 'POST'
-                  })
-                    .catch(e => consola.error('[CameraItem] onicecandidate', e))
-                }
-              }
-
-              return this.pc?.setRemoteDescription(answer)
-            })
-            .then(() => this.pc?.createAnswer())
-            .then(answer => this.pc?.setLocalDescription(answer))
-            .then(() => {
-              const offer = this.pc?.localDescription
-
-              return fetch(baseUrl, {
-                body: JSON.stringify({
-                  type: offer?.type,
-                  id: this.remoteId,
-                  sdp: offer?.sdp
-                }),
-                headers: {
-                  'Content-Type': 'application/json'
-                },
-                method: 'POST'
-              })
-            })
-            .then(response => response.json())
-            .catch(e => consola.error('[CameraItem] setUrl', e))
-        }
+      if (componentName in CameraComponents) {
+        return CameraComponents[componentName]
       }
-    } else {
-      this.hls?.destroy()
-      this.pc?.close()
-      this.cameraUrl = ''
     }
   }
-
-  /**
-   * Calls `requestAnimationFrame` indefinitely to apply camera transformations.
-   * The call to `requestAnimationFrame` is required because of the dependency
-   * on loaded node sizes in the document.
-   */
-  createTransformAnimation () {
-    let animating = true
-
-    const animate = () => {
-      requestAnimationFrame(() => {
-        if (!animating) {
-          return
-        }
-
-        const image = this.cameraImage
-
-        if (image) {
-          // Call to Object.assign() might not be suitable here.
-          Object.assign(image.style, this.cameraTransformStyle(image))
-        }
-
-        animate()
-      })
-    }
-
-    animate()
-
-    return () => {
-      animating = false
-    }
-  }
-
-  get fullscreenMode (): CameraFullscreenAction {
-    return this.$store.state.config.uiSettings.general.cameraFullscreenAction
-  }
 }
 </script>
 
diff --git a/src/components/widgets/camera/services/HlsstreamCamera.vue b/src/components/widgets/camera/services/HlsstreamCamera.vue
new file mode 100644
index 0000000000..778ced4308
--- /dev/null
+++ b/src/components/widgets/camera/services/HlsstreamCamera.vue
@@ -0,0 +1,52 @@
+<template>
+  <video
+    ref="streamingElement"
+    autoplay
+    muted
+    :style="cameraStyle"
+  />
+</template>
+
+<script lang="ts">
+import { Component, Ref, Mixins } from 'vue-property-decorator'
+import CameraMixin from '@/mixins/camera'
+import Hls from 'hls.js'
+
+@Component({})
+export default class HlsstreamCamera extends Mixins(CameraMixin) {
+  @Ref('streamingElement')
+  readonly cameraVideo!: HTMLVideoElement
+
+  hls: Hls | null = null
+
+  startPlayback () {
+    const url = this.cameraUrl
+
+    if (Hls.isSupported()) {
+      this.hls?.destroy()
+
+      this.hls = new Hls({
+        enableWorker: true,
+        lowLatencyMode: true,
+        maxLiveSyncPlaybackRate: 2,
+        liveSyncDuration: 0.5,
+        liveMaxLatencyDuration: 2,
+        backBufferLength: 5
+      })
+      this.hls.loadSource(url)
+      this.hls.attachMedia(this.cameraVideo)
+      this.hls.on(Hls.Events.MEDIA_ATTACHED, () => {
+        this.cameraVideo.play()
+      })
+    } else if (this.cameraVideo.canPlayType('application/vnd.apple.mpegurl')) {
+      this.cameraVideo.src = url
+    }
+  }
+
+  stopPlayback () {
+    this.hls?.destroy()
+    this.hls = null
+    this.cameraVideo.src = ''
+  }
+}
+</script>
diff --git a/src/components/widgets/camera/services/IframeCamera.vue b/src/components/widgets/camera/services/IframeCamera.vue
new file mode 100644
index 0000000000..84d60bf2c1
--- /dev/null
+++ b/src/components/widgets/camera/services/IframeCamera.vue
@@ -0,0 +1,35 @@
+<template>
+  <iframe
+    ref="streamingElement"
+    :src="cameraIFrameSource"
+    style="border: none; width: 100%"
+    :style="{
+      'aspect-ratio': (camera.aspectRatio || '16:9').replace(':', '/'),
+      ...cameraStyle
+    }"
+  />
+</template>
+
+<script lang="ts">
+import { Component, Ref, Mixins } from 'vue-property-decorator'
+import CameraMixin from '@/mixins/camera'
+
+@Component({})
+export default class IframeCamera extends Mixins(CameraMixin) {
+  @Ref('streamingElement')
+  readonly cameraIframe!: HTMLIFrameElement
+
+  cameraIFrameSource = ''
+
+  startPlayback () {
+    this.cameraIFrameSource = this.cameraUrl
+
+    this.$emit('raw-camera-url', this.cameraUrl)
+  }
+
+  stopPlayback () {
+    this.cameraIFrameSource = ''
+    this.cameraIframe.src = ''
+  }
+}
+</script>
diff --git a/src/components/widgets/camera/services/IpstreamCamera.vue b/src/components/widgets/camera/services/IpstreamCamera.vue
new file mode 100644
index 0000000000..1101e393d1
--- /dev/null
+++ b/src/components/widgets/camera/services/IpstreamCamera.vue
@@ -0,0 +1,33 @@
+<template>
+  <video
+    ref="streamingElement"
+    :src="cameraVideoSource"
+    autoplay
+    muted
+    :style="cameraStyle"
+  />
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Ref } from 'vue-property-decorator'
+import CameraMixin from '@/mixins/camera'
+
+@Component({})
+export default class IpstreamCamera extends Mixins(CameraMixin) {
+  @Ref('streamingElement')
+  readonly cameraVideo!: HTMLVideoElement
+
+  cameraVideoSource = ''
+
+  startPlayback () {
+    this.cameraVideoSource = this.cameraUrl
+
+    this.$emit('raw-camera-url', this.cameraUrl)
+  }
+
+  stopPlayback () {
+    this.cameraVideoSource = ''
+    this.cameraVideo.src = ''
+  }
+}
+</script>
diff --git a/src/components/widgets/camera/services/MjpegstreamerAdaptiveCamera.vue b/src/components/widgets/camera/services/MjpegstreamerAdaptiveCamera.vue
new file mode 100644
index 0000000000..87c824230c
--- /dev/null
+++ b/src/components/widgets/camera/services/MjpegstreamerAdaptiveCamera.vue
@@ -0,0 +1,92 @@
+<template>
+  <img
+    ref="streamingElement"
+    :src="cameraImageSource"
+    :style="cameraStyle"
+    @load="handleImageLoad"
+  >
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Ref } from 'vue-property-decorator'
+import CameraMixin from '@/mixins/camera'
+
+@Component({})
+export default class MjpegstreamerAdaptiveCamera extends Mixins(CameraMixin) {
+  @Ref('streamingElement')
+  readonly cameraImage!: HTMLImageElement
+
+  cameraImageSource = ''
+  requestStartTime = performance.now()
+  startTime = performance.now()
+  time = 0
+  requestTime = 0
+  timeSmoothing = 0.6
+  requestTimeSmoothing = 0.1
+
+  handleImageLoad () {
+    const fpsTarget = (!document.hasFocus() && this.camera.targetFpsIdle) || this.camera.targetFps || 10
+    const endTime = performance.now()
+    const currentTime = endTime - this.startTime
+
+    this.time = (this.time * this.timeSmoothing) + (currentTime * (1.0 - this.timeSmoothing))
+
+    this.startTime = endTime
+
+    const targetTime = 1000 / fpsTarget
+
+    const currentRequestTime = performance.now() - this.requestStartTime
+
+    this.requestTime = (this.requestTime * this.requestTimeSmoothing) + (currentRequestTime * (1.0 - this.requestTimeSmoothing))
+
+    const timeout = Math.max(0, targetTime - this.requestTime)
+
+    this.$nextTick(() => {
+      setTimeout(this.handleRefresh, timeout)
+    })
+  }
+
+  handleRefresh () {
+    if (!document.hidden) {
+      const framesPerSecond = Math.round(1000 / this.time).toLocaleString(undefined, { minimumIntegerDigits: 2 })
+
+      this.$emit('frames-per-second', framesPerSecond)
+
+      this.$nextTick(() => {
+        const url = new URL(this.cameraImageSource)
+
+        url.searchParams.set('cacheBust', Date.now().toString())
+
+        this.requestStartTime = performance.now()
+
+        this.cameraImageSource = url.toString()
+      })
+    } else {
+      this.stopPlayback()
+    }
+  }
+
+  startPlayback () {
+    const url = new URL(this.cameraUrl)
+
+    this.requestStartTime = performance.now()
+
+    if (!url.searchParams.get('action')?.startsWith('snapshot')) {
+      url.searchParams.set('action', 'snapshot')
+    }
+
+    url.searchParams.set('cacheBust', Date.now().toString())
+
+    this.cameraImageSource = url.toString()
+
+    url.searchParams.set('action', 'stream')
+
+    this.$emit('raw-camera-url', url.toString())
+  }
+
+  stopPlayback () {
+    this.cameraImageSource = ''
+    this.cameraImage.src = ''
+  }
+}
+</script>
diff --git a/src/components/widgets/camera/services/MjpegstreamerCamera.vue b/src/components/widgets/camera/services/MjpegstreamerCamera.vue
new file mode 100644
index 0000000000..5e10482bbb
--- /dev/null
+++ b/src/components/widgets/camera/services/MjpegstreamerCamera.vue
@@ -0,0 +1,39 @@
+<template>
+  <img
+    ref="streamingElement"
+    :src="cameraImageSource"
+    :style="cameraStyle"
+  >
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Ref } from 'vue-property-decorator'
+import CameraMixin from '@/mixins/camera'
+
+@Component({})
+export default class MjpegstreamerCamera extends Mixins(CameraMixin) {
+  @Ref('streamingElement')
+  readonly cameraImage!: HTMLImageElement
+
+  cameraImageSource = ''
+
+  startPlayback () {
+    const url = new URL(this.cameraUrl)
+
+    if (!url.searchParams.get('action')?.startsWith('stream')) {
+      url.searchParams.set('action', 'stream')
+    }
+
+    url.searchParams.set('cacheBust', Date.now().toString())
+
+    this.cameraImageSource = url.toString()
+
+    this.$emit('raw-camera-url', this.cameraImageSource)
+  }
+
+  stopPlayback () {
+    this.cameraImageSource = ''
+    this.cameraImage.src = ''
+  }
+}
+</script>
diff --git a/src/components/widgets/camera/services/WebrtcCamerastreamerCamera.vue b/src/components/widgets/camera/services/WebrtcCamerastreamerCamera.vue
new file mode 100644
index 0000000000..80e86f2053
--- /dev/null
+++ b/src/components/widgets/camera/services/WebrtcCamerastreamerCamera.vue
@@ -0,0 +1,107 @@
+<template>
+  <video
+    ref="streamingElement"
+    autoplay
+    muted
+    :style="cameraStyle"
+  />
+</template>
+
+<script lang="ts">
+import { Component, Ref, Mixins } from 'vue-property-decorator'
+import consola from 'consola'
+import CameraMixin from '@/mixins/camera'
+
+@Component({})
+export default class WebrtcCamerastreamerCamera extends Mixins(CameraMixin) {
+  @Ref('streamingElement')
+  readonly cameraVideo!: HTMLVideoElement
+
+  pc: RTCPeerConnection | null = null
+  remoteId: string | null = null
+
+  startPlayback () {
+    const url = this.cameraUrl
+
+    this.pc?.close()
+
+    fetch(url, {
+      body: JSON.stringify({
+        type: 'request'
+      }),
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      method: 'POST'
+    })
+      .then(response => response.json())
+      .then((answer: RTCSessionDescriptionInit) => {
+        this.remoteId = 'id' in answer && typeof (answer.id) === 'string' ? answer.id : null
+
+        const config = {
+          sdpSemantics: 'unified-plan'
+        } as RTCConfiguration
+
+        if ('iceServers' in answer && Array.isArray(answer.iceServers)) {
+          config.iceServers = answer.iceServers
+        }
+
+        this.pc = new RTCPeerConnection(config)
+
+        this.pc.addTransceiver('video', {
+          direction: 'recvonly'
+        })
+
+        this.pc.ontrack = (evt: RTCTrackEvent) => {
+          if (evt.track.kind === 'video') {
+            this.cameraVideo.srcObject = evt.streams[0]
+          }
+        }
+
+        this.pc.onicecandidate = (e: RTCPeerConnectionIceEvent) => {
+          if (e.candidate) {
+            return fetch(url, {
+              body: JSON.stringify({
+                type: 'remote_candidate',
+                id: this.remoteId,
+                candidates: [e.candidate]
+              }),
+              headers: {
+                'Content-Type': 'application/json'
+              },
+              method: 'POST'
+            })
+              .catch(e => consola.error('[WebrtcCamerastreamerCamera] onicecandidate', e))
+          }
+        }
+
+        return this.pc?.setRemoteDescription(answer)
+      })
+      .then(() => this.pc?.createAnswer())
+      .then(answer => this.pc?.setLocalDescription(answer))
+      .then(() => {
+        const offer = this.pc?.localDescription
+
+        return fetch(url, {
+          body: JSON.stringify({
+            type: offer?.type,
+            id: this.remoteId,
+            sdp: offer?.sdp
+          }),
+          headers: {
+            'Content-Type': 'application/json'
+          },
+          method: 'POST'
+        })
+      })
+      .then(response => response.json())
+      .catch(e => consola.error('[WebrtcCamerastreamerCamera] setUrl', e))
+  }
+
+  stopPlayback () {
+    this.pc?.close()
+    this.pc = null
+    this.cameraVideo.src = ''
+  }
+}
+</script>
diff --git a/src/dynamicImports.ts b/src/dynamicImports.ts
index 59e15fd45b..1527d7be8a 100644
--- a/src/dynamicImports.ts
+++ b/src/dynamicImports.ts
@@ -14,3 +14,7 @@ export const MonacoLanguageImports = Object.freeze(dynamicImportFixKeys(
 export const I18nLocales = Object.freeze(dynamicImportFixKeys(
   import.meta.glob<LocaleMessageObject>('@/locales/*.yaml', { import: 'default' })
 ))
+
+export const CameraComponents = Object.freeze(dynamicImportFixKeys(
+  import.meta.glob<object>('@/components/widgets/camera/services/*Camera.vue')
+))
diff --git a/src/mixins/camera.ts b/src/mixins/camera.ts
new file mode 100644
index 0000000000..bf5e5fdc8a
--- /dev/null
+++ b/src/mixins/camera.ts
@@ -0,0 +1,105 @@
+import Vue from 'vue'
+import { Component, Prop, Ref } from 'vue-property-decorator'
+import { CameraConfig } from '@/store/cameras/types'
+
+@Component
+export default class CameraMixin extends Vue {
+  @Prop({ type: Object, required: true })
+  readonly camera!: CameraConfig
+
+  @Ref('streamingElement')
+  readonly streamingElement!: HTMLImageElement | HTMLIFrameElement | HTMLVideoElement
+
+  cameraTransformStyle = ''
+  animating = false
+
+  get apiUrl () {
+    return this.$store.state.config.apiUrl
+  }
+
+  get cameraUrl () {
+    const baseUrl = this.camera.urlStream || this.camera.urlSnapshot || ''
+
+    const { origin } = new URL(this.apiUrl)
+
+    return new URL(baseUrl, origin).toString()
+  }
+
+  get cameraStyle () {
+    return {
+      transform: this.cameraTransformStyle || undefined
+    }
+  }
+
+  createTransform () {
+    const element = this.streamingElement
+    const { rotation, flipX, flipY } = this.camera
+    const transformsArray: string[] = []
+
+    const scale = rotation === 0 || rotation === 180
+      ? 1
+      : element.clientHeight < element.clientWidth
+        ? element.clientHeight / element.clientWidth
+        : element.clientWidth / element.clientHeight
+
+    if (scale !== 1 || flipX) {
+      transformsArray.push(`scaleX(${flipX ? -scale : scale})`)
+    }
+
+    if (scale !== 1 || flipY) {
+      transformsArray.push(`scaleY(${flipY ? -scale : scale})`)
+    }
+
+    if (rotation !== 0) {
+      transformsArray.push(`rotate(${rotation}deg`)
+    }
+
+    return transformsArray.join(' ')
+  }
+
+  updateCameraTransformStyle () {
+    requestAnimationFrame(() => {
+      if (!this.animating) {
+        return
+      }
+
+      if (this.streamingElement) {
+        this.cameraTransformStyle = this.createTransform()
+      }
+
+      this.updateCameraTransformStyle()
+    })
+  }
+
+  created () {
+    this.animating = true
+    this.updateCameraTransformStyle()
+  }
+
+  mounted () {
+    document.addEventListener('visibilitychange', this.checkPlayback, false)
+    this.checkPlayback()
+  }
+
+  beforeDestroy () {
+    this.animating = false
+    document.removeEventListener('visibilitychange', this.checkPlayback)
+    this.stopPlayback()
+  }
+
+  checkPlayback () {
+    if (!document.hidden) {
+      this.startPlayback()
+    } else {
+      this.stopPlayback()
+    }
+  }
+
+  startPlayback () {
+    // noop
+  }
+
+  stopPlayback () {
+    // noop
+  }
+}