store: Add allowed protocols in video store

* Add allowed protocols in video store and video configuration menu

src/stores/video.ts

@@ -30,6 +30,7 @@ export const useVideoStore = defineStore('video', () => {
   console.debug('[WebRTC] Using webrtc-adapter for', adapter.browserDetails)
 
   const allowedIceIps = useStorage<string[]>('cockpit-allowed-stream-ips', [])
+  const allowedIceProtocols = useStorage<string[]>('cockpit-allowed-stream-protocols', [])
   const activeStreams = ref<{ [key in string]: StreamData | undefined }>({})
   const mainWebRTCManager = new WebRTCManager(webRTCSignallingURI.val, rtcConfiguration)
   const availableIceIps = ref<string[]>([])
@@ -691,6 +692,7 @@ export const useVideoStore = defineStore('video', () => {
   return {
     availableIceIps,
     allowedIceIps,
+    allowedIceProtocols,
     namesAvailableStreams,
     videoStoringDB,
     tempVideoChunksDB,

src/views/ConfigurationVideoView.vue

@@ -15,6 +15,12 @@
           available IPs, like those from WiFi and Hotspot connections, preventing lag and stuttering in your video
           streams.
         </p>
+        <br />
+        <p>
+          Additionally, you can choose specific protocols that will be permitted for use in your video streams. This
+          selection allows you to choose protocols that could perform better in your network infrastructure, enhancing
+          the quality of your video streams.
+        </p>
       </div>
 
       <div class="flex w-[30rem] flex-wrap">
@@ -30,6 +36,21 @@
           hint="IP Addresses of the Vehicle allowed to be used for the WebRTC ICE Routing. Usually, the IP of the tether/cabled interface. Blank means any route. E.g: 192.168.2.2"
         />
       </div>
+
+      <div class="flex w-[30rem] flex-wrap">
+        <v-combobox
+          v-model="allowedIceProtocols"
+          multiple
+          :items="availableICEProtocols"
+          label="Allowed WebRTC protocols"
+          class="w-full my-3 uri-input"
+          variant="outlined"
+          chips
+          clearable
+          hint="Specific protocols allowed to be used for the WebRTC. Blank means any protocol will be supported."
+          persistent-hint
+        />
+      </div>
     </template>
   </BaseConfigurationView>
 </template>
@@ -41,6 +62,12 @@ import { useVideoStore } from '@/stores/video'
 
 import BaseConfigurationView from './BaseConfigurationView.vue'
 
+/**
+ * Available ICE protocols as described in
+ * https://developer.mozilla.org/en-US/docs/Web/API/RTCIceCandidate/protocol
+ */
+const availableICEProtocols = ['udp', 'tcp']
+
 const videoStore = useVideoStore()
-const { allowedIceIps, availableIceIps } = storeToRefs(videoStore)
+const { allowedIceIps, allowedIceProtocols, availableIceIps } = storeToRefs(videoStore)
 </script>