Merge pull request #159 from Genymobile/dev/player-50-camera-widget

[Player-59] camera widget

Author: jparez

.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:
 

doc/assets/ic_camera.svg

@@ -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",

package-lock.json

@@ -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();

package.json

@@ -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);
                 }
             }
         });