[Player-59] camera widget

.nvmrc

@@ -1 +1 @@
-v16
+v20

CONTRIBUTING.md

@@ -24,6 +24,7 @@ request. It's not mandatory at all, but feel free to open an issue to present yo
 
 To start working on the Genymotion device web player, all you need if an HTML page to instanciate a player from your
 local copy of this repository.
+
 Build the player in dev mode:
 
 ```sh

README.md

@@ -51,7 +51,9 @@ A Modern, WebRTC compatible, Web browser:
 
 ## 📦 Installation
 
-### 📥 Install via NPM / Yarn
+### 📥 Install via NPM / Yarn 
+
+**Node.js 20 or later is required.**
 
 Using yarn:
 

package.json

@@ -8,8 +8,9 @@
     ],
     "types": "dist/index.d.ts",
     "engines": {
-        "node": ">=16"
+        "node": ">=20"
     },
+
     "scripts": {
         "test": "vitest run",
         "test:ui": "vitest --ui",
@@ -43,6 +44,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

@@ -69,6 +69,9 @@ export default class DeviceRenderer {
         // Event callbacks
         this.callbacks = {};
 
+        // Plugins/Widgets registry
+        this.widgets = [];
+
         // Event listeners
         this.allListeners = [];
 
@@ -77,10 +80,6 @@ export default class DeviceRenderer {
         this.signalingDataChannel = null;
         this.cameraSender = null;
         this.microphoneSender = null;
-        this.sdpConstraints = {
-            offerToReceiveAudio: true,
-            offerToReceiveVideo: true,
-        };
 
         // last accessed x/y position
         this.x = 0;
@@ -435,7 +434,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 +470,7 @@ export default class DeviceRenderer {
 
         const config = {
             iceServers: iceServers,
+            bundlePolicy: 'max-compat',
         };
 
         if (!this.peerConnection) {
@@ -488,6 +489,13 @@ 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
@@ -971,6 +979,24 @@ export default class DeviceRenderer {
             return;
         }
 
+        // Cleanup specific widget resources dynamically
+        this.widgets.forEach((widget) => {
+            if (widget && typeof widget.destroy === 'function') {
+                widget.destroy();
+            }
+        });
+
+        if (this.store && this.store.destroy) {
+            this.store.destroy();
+        }
+
+        if (this.fileUploaderWorkerBlobSRC) {
+            URL.revokeObjectURL(this.fileUploaderWorkerBlobSRC);
+            this.fileUploaderWorkerBlobSRC = null;
+        }
+
+        this.emit('destroyed');
+
         this.removeAllListeners();
         this.disconnect();
         this.peerConnectionStats?.destroy();

src/DeviceRendererFactory.js

@@ -78,9 +78,7 @@ const defaultOptions = {
  * Setup & create instances of the device renderer
  */
 export default class DeviceRendererFactory {
-    constructor() {
-        this.instances = [];
-    }
+    constructor() {}
 
     /**
      * Setup a device renderer instance in the given dom element, for the device instance identified by its instanceWebRTCUrl.
@@ -170,8 +168,6 @@ export default class DeviceRendererFactory {
         instance.toolbarManager = new ToolbarManager(instance);
         instance.tooltipManager = new TooltipManager(instance);
 
-        this.instances.push(instance);
-
         this.loadPlugins(instance);
         this.loadToolbar(instance);
         instance.onWebRTCReady();
@@ -253,7 +249,8 @@ export default class DeviceRendererFactory {
                 }
                 // eslint-disable-next-line no-unused-expressions
                 if (plugin.class) {
-                    new plugin.class(instance, ...args);
+                    const widget = new plugin.class(instance, ...args);
+                    instance.widgets.push(widget);
                 }
             }
         });

src/components/GmDropdown.js

@@ -97,8 +97,9 @@ export class GmDropdown extends HTMLElement {
      * Supported formats:
      * - String: 'Item Label'
      * - Object (Rich HTML): { element: HTMLElement, value: 'val' }
+     * - Object (Plain): { value: 'val', valueToDisplay: 'Display Text' }
      * Re-renders the options and clears the value if it's no longer present.
-     * @param {Array<string|{element: HTMLElement, value: any}>} newItems - List of items.
+     * @param {Array<string|{element: HTMLElement, value: any}|{value: any, valueToDisplay: string}>} newItems - List of items.
      */
     set items(newItems) {
         this.#items = newItems;
@@ -224,6 +225,8 @@ export class GmDropdown extends HTMLElement {
                 optionDiv.innerHTML = item;
             } else if (item.element instanceof HTMLElement) {
                 optionDiv.appendChild(item.element);
+            } else if (item.valueToDisplay) {
+                optionDiv.textContent = item.valueToDisplay;
             } else {
                 return;
             }

src/index.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