feat(Camera): adding plugin to manage camera injection

Author: fatoldsun00

package.json

@@ -43,6 +43,7 @@
         "@babel/preset-env": "^7.18.6",
         "@fullhuman/postcss-purgecss": "5.0.0",
         "@vitest/ui": "^4.0.15",
+        "@vitejs/plugin-basic-ssl": "^2.1.0",
         "autoprefixer": "10.4.14",
         "babel-eslint": "^10.1.0",
         "eslint": "^7.32.0",

src/DeviceRenderer.js

@@ -435,7 +435,8 @@ export default class DeviceRenderer {
         }
         // creating SDP offer
         try {
-            const description = await this.peerConnection.createOffer(this.sdpConstraints);
+            const description = await this.peerConnection.createOffer();
+            log.debug('Generated SDP Offer:', description.sdp);
             this.setLocalDescription(description);
         } catch (error) {
             this.onWebRTCConnectionError(error);
@@ -470,6 +471,7 @@ export default class DeviceRenderer {
 
         const config = {
             iceServers: iceServers,
+            bundlePolicy: 'max-compat',
         };
 
         if (!this.peerConnection) {
@@ -488,6 +490,11 @@ export default class DeviceRenderer {
             this.useWebsocketAsDataChannel = true;
         }
 
+        // Add transceivers to receive audio and video (VM screen/audio)
+        // This replaces the legacy offerToReceiveAudio/Video constraints
+        this.peerConnection.addTransceiver('audio', {direction: 'recvonly'});
+        this.peerConnection.addTransceiver('video', {direction: 'recvonly'});
+
         this.peerConnection.onicecandidate = (event) => {
             if (typeof event.candidate === 'undefined') {
                 // Nothing we can do

src/assets/images/ic_camera_disabled.svg

@@ -156,7 +156,7 @@ export class GmDropdown extends HTMLElement {
         if (typeof item === 'string') {
             return item;
         }
-        return item.valueToDisplay ?? item.element?.textContent ?? item.value;
+        return item.label ?? item.valueToDisplay ?? item.element?.textContent ?? item.value;
     }
 
     /**
@@ -175,7 +175,7 @@ export class GmDropdown extends HTMLElement {
                 if (typeof item === 'string') {
                     display = item;
                 } else {
-                    display = item.valueToDisplay ?? item.element?.innerHTML ?? item.value;
+                    display = item.label ?? item.valueToDisplay ?? item.element?.innerHTML ?? item.value;
                 }
             }
             this.selectedValueDiv.innerHTML = display || 'Select...';
@@ -213,6 +213,8 @@ export class GmDropdown extends HTMLElement {
                 optionDiv.innerHTML = item;
             } else if (item.element instanceof HTMLElement) {
                 optionDiv.appendChild(item.element);
+            } else if (item.label || item.valueToDisplay) {
+                optionDiv.textContent = item.label || item.valueToDisplay;
             } else {
                 return;
             }

src/components/GmDropdown.js

@@ -1,4 +1,3 @@
-
 /*
  * Import main SCSS file for webpack to process and bundle styles
  * This ensures all styles are included in the final build