feat: add WebRTC (camera streamer) support

src/components/panels/WebcamPanel.vue

@@ -43,22 +43,25 @@
             <v-row>
                 <v-col class="pb-0" style="position: relative">
                     <template v-if="currentCam.service === 'grid'">
-                        <webcam-grid :webcams="webcams"></webcam-grid>
+                        <webcam-grid :webcams="webcams" />
                     </template>
                     <template v-else-if="currentCam.service === 'mjpegstreamer'">
-                        <webcam-mjpegstreamer :cam-settings="currentCam"></webcam-mjpegstreamer>
+                        <webcam-mjpegstreamer :cam-settings="currentCam" />
                     </template>
                     <template v-else-if="currentCam.service === 'mjpegstreamer-adaptive'">
-                        <webcam-mjpegstreamer-adaptive :cam-settings="currentCam"></webcam-mjpegstreamer-adaptive>
+                        <webcam-mjpegstreamer-adaptive :cam-settings="currentCam" />
                     </template>
                     <template v-else-if="currentCam.service === 'uv4l-mjpeg'">
-                        <webcam-uv4l-mjpeg :cam-settings="currentCam"></webcam-uv4l-mjpeg>
+                        <webcam-uv4l-mjpeg :cam-settings="currentCam" />
                     </template>
                     <template v-else-if="currentCam.service === 'ipstream'">
-                        <webcam-ipstreamer :cam-settings="currentCam"></webcam-ipstreamer>
+                        <webcam-ipstreamer :cam-settings="currentCam" />
                     </template>
                     <template v-else-if="currentCam.service === 'hlsstream'">
-                        <webcam-hlsstreamer :cam-settings="currentCam"></webcam-hlsstreamer>
+                        <webcam-hlsstreamer :cam-settings="currentCam" />
+                    </template>
+                    <template v-else-if="currentCam.service === 'webrtc-camerastreamer'">
+                        <webcam-webrtc-camerastreamer :cam-settings="currentCam" />
                     </template>
                     <template v-else>
                         <p class="text-center py-3 font-italic">{{ $t('Panels.WebcamPanel.UnknownWebcamService') }}</p>
@@ -75,9 +78,10 @@
 <script lang="ts">
 import Mjpegstreamer from '@/components/webcams/Mjpegstreamer.vue'
 import MjpegstreamerAdaptive from '@/components/webcams/MjpegstreamerAdaptive.vue'
-import Ipstreamer from '@/components/webcams/Ipstreamer.vue'
 import Hlsstreamer from '@/components/webcams/Hlsstreamer.vue'
+import Ipstreamer from '@/components/webcams/Ipstreamer.vue'
 import Uv4lMjpeg from '@/components/webcams/Uv4lMjpeg.vue'
+import WebrtcCameraStreamer from '@/components/webcams/WebrtcCameraStreamer.vue'
 import WebcamGrid from '@/components/webcams/WebcamGrid.vue'
 import Component from 'vue-class-component'
 import { Mixins, Prop } from 'vue-property-decorator'
@@ -95,6 +99,7 @@ import WebcamMixin from '@/components/mixins/webcam'
         'webcam-ipstreamer': Ipstreamer,
         'webcam-hlsstreamer': Hlsstreamer,
         'webcam-uv4l-mjpeg': Uv4lMjpeg,
+        'webcam-webrtc-camerastreamer': WebrtcCameraStreamer,
         'webcam-grid': WebcamGrid,
     },
 })

src/components/settings/SettingsWebcamsTab.vue

@@ -176,19 +176,22 @@
                         </v-col>
                         <v-col class="col-12 col-sm-6 text-center" align-self="center">
                             <template v-if="form.service === 'mjpegstreamer'">
-                                <webcam-mjpegstreamer :cam-settings="form"></webcam-mjpegstreamer>
+                                <webcam-mjpegstreamer :cam-settings="form" />
                             </template>
                             <template v-else-if="form.service === 'mjpegstreamer-adaptive'">
-                                <webcam-mjpegstreamer-adaptive :cam-settings="form"></webcam-mjpegstreamer-adaptive>
+                                <webcam-mjpegstreamer-adaptive :cam-settings="form" />
                             </template>
                             <template v-else-if="form.service === 'uv4l-mjpeg'">
-                                <webcam-uv4l-mjpeg :cam-settings="form"></webcam-uv4l-mjpeg>
+                                <webcam-uv4l-mjpeg :cam-settings="form" />
                             </template>
                             <template v-else-if="form.service === 'ipstream'">
-                                <webcam-ipstreamer :cam-settings="form"></webcam-ipstreamer>
+                                <webcam-ipstreamer :cam-settings="form" />
                             </template>
                             <template v-else-if="form.service === 'hlsstream'">
-                                <webcam-hlsstreamer :cam-settings="form"></webcam-hlsstreamer>
+                                <webcam-hlsstreamer :cam-settings="form" />
+                            </template>
+                            <template v-else-if="form.service === 'webrtc-camerastreamer'">
+                                <webcam-webrtc-camerastreamer :cam-settings="form" />
                             </template>
                             <template v-else>
                                 <p class="text-center py-3 font-italic">
@@ -223,6 +226,7 @@ import { GuiWebcamStateWebcam } from '@/store/gui/webcams/types'
 import Mjpegstreamer from '@/components/webcams/Mjpegstreamer.vue'
 import MjpegstreamerAdaptive from '@/components/webcams/MjpegstreamerAdaptive.vue'
 import Uv4lMjpeg from '@/components/webcams/Uv4lMjpeg.vue'
+import WebrtcCameraStreamer from '@/components/webcams/WebrtcCameraStreamer.vue'
 import Ipstreamer from '@/components/webcams/Ipstreamer.vue'
 import { mdiMenuDown, mdiDelete, mdiPencil, mdiWebcam } from '@mdi/js'
 import WebcamMixin from '@/components/mixins/webcam'
@@ -251,6 +255,7 @@ interface webcamForm {
         'webcam-mjpegstreamer-adaptive': MjpegstreamerAdaptive,
         'webcam-uv4l-mjpeg': Uv4lMjpeg,
         'webcam-ipstreamer': Ipstreamer,
+        'webcam-webrtc-camerastreamer': WebrtcCameraStreamer,
         'webcam-hlsstreamer': Hlsstreamer,
     },
 })
@@ -315,21 +320,11 @@ export default class SettingsWebcamsTab extends Mixins(BaseMixin, WebcamMixin) {
             { value: 'mjpegstreamer-adaptive', text: this.$t('Settings.WebcamsTab.MjpegstreamerAdaptive') },
             { value: 'uv4l-mjpeg', text: this.$t('Settings.WebcamsTab.Uv4lMjpeg') },
             { value: 'ipstream', text: this.$t('Settings.WebcamsTab.Ipstream') },
+            { value: 'webrtc-camerastreamer', text: this.$t('Settings.WebcamsTab.WebrtcCameraStreamer') },
             { value: 'hlsstream', text: this.$t('Settings.WebcamsTab.Hlsstream') },
         ]
     }
 
-    get webcamStyle() {
-        let transforms = ''
-        if (this.form.flipX) transforms += ' scaleX(-1)'
-        if (this.form.flipY) transforms += ' scaleY(-1)'
-        if (transforms.trimLeft().length) {
-            return { transform: transforms.trimLeft() }
-        }
-
-        return ''
-    }
-
     get configfiles() {
         return this.$store.getters['files/getDirectory']('config')?.childrens ?? []
     }

src/components/webcams/WebcamGrid.vue

@@ -5,19 +5,22 @@
         <v-row dense>
             <v-col v-for="webcam in webcams" :key="webcam.id" cols="6">
                 <template v-if="webcam.service === 'mjpegstreamer'">
-                    <webcam-mjpegstreamer :cam-settings="webcam"></webcam-mjpegstreamer>
+                    <webcam-mjpegstreamer :cam-settings="webcam" />
                 </template>
                 <template v-else-if="webcam.service === 'mjpegstreamer-adaptive'">
-                    <webcam-mjpegstreamer-adaptive :cam-settings="webcam"></webcam-mjpegstreamer-adaptive>
+                    <webcam-mjpegstreamer-adaptive :cam-settings="webcam" />
                 </template>
                 <template v-else-if="webcam.service === 'uv4l-mjpeg'">
-                    <webcam-uv4l-mjpeg :cam-settings="webcam"></webcam-uv4l-mjpeg>
+                    <webcam-uv4l-mjpeg :cam-settings="webcam" />
                 </template>
                 <template v-else-if="webcam.service === 'ipstream'">
-                    <webcam-ipstreamer :cam-settings="webcam"></webcam-ipstreamer>
+                    <webcam-ipstreamer :cam-settings="webcam" />
                 </template>
                 <template v-else-if="webcam.service === 'hlsstream'">
-                    <webcam-hlsstreamer :cam-settings="webcam"></webcam-hlsstreamer>
+                    <webcam-hlsstreamer :cam-settings="webcam" />
+                </template>
+                <template v-else-if="webcam.service === 'webrtc-camerastreamer'">
+                    <webcam-webrtc-camerastreamer :cam-settings="webcam" />
                 </template>
                 <template v-else>
                     <p class="text-center py-3 font-italic">{{ $t('Panels.WebcamPanel.UnknownWebcamService') }}</p>
@@ -35,6 +38,7 @@ import MjpegstreamerAdaptive from '@/components/webcams/MjpegstreamerAdaptive.vu
 import Uv4lMjpeg from '@/components/webcams/Uv4lMjpeg.vue'
 import Ipstreamer from '@/components/webcams/Ipstreamer.vue'
 import Hlsstreamer from '@/components/webcams/Hlsstreamer.vue'
+import WebrtcCameraStreamer from '@/components/webcams/WebrtcCameraStreamer.vue'
 import { GuiWebcamStateWebcam } from '@/store/gui/webcams/types'
 
 @Component({
@@ -44,6 +48,7 @@ import { GuiWebcamStateWebcam } from '@/store/gui/webcams/types'
         'webcam-uv4l-mjpeg': Uv4lMjpeg,
         'webcam-ipstreamer': Ipstreamer,
         'webcam-hlsstreamer': Hlsstreamer,
+        'webcam-webrtc-camerastreamer': WebrtcCameraStreamer,
     },
 })
 export default class WebcamGrid extends Mixins(BaseMixin) {

src/components/webcams/WebrtcCameraStreamer.vue

@@ -0,0 +1,187 @@
+<template>
+    <div>
+        <video
+            v-show="status === 'connected'"
+            ref="stream"
+            class="webcamStream"
+            :style="webcamStyle"
+            autoplay
+            muted
+            playsinline />
+        <v-row v-if="status !== 'connected'">
+            <v-col class="_webcam_webrtc_output text-center d-flex flex-column justify-center align-center">
+                <v-progress-circular v-if="status === 'connecting'" indeterminate color="primary" class="mb-3" />
+                <span class="mt-3">{{ status }}</span>
+            </v-col>
+        </v-row>
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Prop, Ref, Watch } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+
+@Component
+export default class WebrtcCameraStreamer extends Mixins(BaseMixin) {
+    private pc: RTCPeerConnection | null = null
+    private useStun = false
+    private remote_pc_id: string | null = null
+    private aspectRatio: null | number = null
+    private status: string = 'connecting'
+
+    @Prop({ required: true })
+    camSettings: any
+
+    @Prop({ default: null }) declare readonly printerUrl: string | null
+
+    @Ref() declare stream: HTMLVideoElement
+
+    get url() {
+        const baseUrl = this.camSettings.urlStream
+        let url = new URL(baseUrl, this.printerUrl === null ? this.hostUrl.toString() : this.printerUrl)
+        url.port = this.hostPort.toString()
+
+        if (baseUrl.startsWith('http') || baseUrl.startsWith('://')) url = new URL(baseUrl)
+
+        return decodeURIComponent(url.toString())
+    }
+
+    get webcamStyle() {
+        const output = {
+            transform: 'none',
+            aspectRatio: 16 / 9,
+        }
+
+        let transforms = ''
+        if ('flipX' in this.camSettings && this.camSettings.flipX) transforms += ' scaleX(-1)'
+        if ('flipX' in this.camSettings && this.camSettings.flipY) transforms += ' scaleY(-1)'
+        if (transforms.trimStart().length) output.transform = transforms.trimStart()
+
+        if (this.aspectRatio) output.aspectRatio = this.aspectRatio
+
+        return output
+    }
+
+    get streamConfig() {
+        let config: any = {
+            sdpSemantics: 'unified-plan',
+        }
+
+        if (this.useStun) {
+            config.iceServers = [{ urls: ['stun:stun.l.google.com:19302'] }]
+        }
+
+        return config
+    }
+
+    startStream() {
+        const isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1
+
+        this.pc = new RTCPeerConnection(this.streamConfig)
+        this.pc.addTransceiver('video', { direction: 'recvonly' })
+
+        this.pc.addEventListener(
+            'track',
+            (evt) => {
+                if (evt.track.kind == 'video' && this.$refs.stream) {
+                    // @ts-ignore
+                    this.$refs.stream.srcObject = evt.streams[0]
+                }
+            },
+            false
+        )
+
+        this.pc.addEventListener('connectionstatechange', () => {
+            this.status = (this.pc?.connectionState ?? '').toString()
+
+            if (['failed', 'disconnected'].includes(this.status)) {
+                setTimeout(async () => {
+                    await this.pc?.close()
+                    this.startStream()
+                }, 500)
+            }
+        })
+
+        fetch(this.url, {
+            body: JSON.stringify({
+                type: 'request',
+                //res: params.res
+            }),
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            method: 'POST',
+        })
+            .then((response) => response.json())
+            .then((answer) => {
+                this.remote_pc_id = answer.id
+                return this.pc?.setRemoteDescription(answer)
+            })
+            .then(() => this.pc?.createAnswer())
+            .then((answer) => this.pc?.setLocalDescription(answer))
+            .then(() => {
+                // wait for ICE gathering to complete
+                return new Promise((resolve) => {
+                    const checkState = () => {
+                        if (this.pc?.iceGatheringState === 'complete') {
+                            this.pc?.removeEventListener('icegatheringstatechange', checkState)
+                            resolve(true)
+                        }
+                    }
+
+                    if (this.pc?.iceGatheringState === 'complete') resolve(true)
+                    else this.pc?.addEventListener('icegatheringstatechange', checkState)
+                })
+            })
+            .then(() => {
+                const offer = this.pc?.localDescription
+                return fetch(this.url, {
+                    body: JSON.stringify({
+                        type: offer?.type,
+                        id: this.remote_pc_id,
+                        sdp: offer?.sdp,
+                    }),
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    method: 'POST',
+                })
+            })
+            .then((response: any) => {
+                if (isFirefox) this.status = 'connected'
+                return response.json()
+            })
+            .catch(function (e) {
+                window.console.error(e)
+            })
+    }
+
+    mounted() {
+        this.startStream()
+    }
+
+    beforeDestroy() {
+        this.pc?.close()
+    }
+
+    @Watch('url')
+    async changedUrl() {
+        await this.pc?.close()
+        this.startStream()
+    }
+}
+</script>
+
+<style scoped>
+.webcamStream {
+    width: 100%;
+}
+
+._webcam_webrtc_output {
+    aspect-ratio: calc(3 / 2);
+}
+
+video {
+    width: 100%;
+}
+</style>

src/locales/en.json

@@ -1067,7 +1067,8 @@
             "UrlStream": "URL Stream",
             "Uv4lMjpeg": "UV4L-MJPEG",
             "Vertically": "vertically",
-            "Webcams": "Webcams"
+            "Webcams": "Webcams",
+            "WebrtcCameraStreamer": "WebRTC (camera-streamer)"
         }
     },
     "ScrewsTiltAdjust": {