recorder fixes - last track, can play events; recorder.mjs

note: recorder.mjs not used

src/applets/videoPlayer/scripts/content.mjs

@@ -29,16 +29,23 @@ document.addEventListener('DOMContentLoaded', async () => {
     debug("added video player element", videoPlayerElement);
 });
 
+// ToDo: this was firing multiple times - test this
+
+// Define the handleCanPlay function
+const handleCanPlay = ()=> {
+    mh.sendMessage(c.DASH, m.PLAYER_CANPLAY);
+}
 
 // Listen for data transfer events to load new media
 mh.onDataTransfer(async (blob) => {
 
+    // remove previous event listener
+    videoPlayerElement.removeEventListener('canplay', handleCanPlay);
+
     debug("received data transfer", blob);
     if (blob) {
         videoPlayerElement.src = URL.createObjectURL(blob);
-        videoPlayerElement.addEventListener('canplay', () => {
-            mh.sendMessage(c.DASH, m.PLAYER_CANPLAY);
-        });
+        videoPlayerElement.addEventListener('canplay', handleCanPlay);
     }
     else
         debug("failed load player media - invalid blob", blob);

src/applets/videoPlayer/scripts/dash.mjs

@@ -157,14 +157,19 @@ async function loadVideoFromStorage(buffer = "") {
  * @returns {Promise<MediaStreamConstraints>} The media constraints.
  */
 async function getMediaConstraints() {
-    const trackData = storage.contents.trackData || [];
+    const trackData =await storage.get('trackData');
 
+    // Use the most recent tracks if they exist
     const latestAudioTrack = trackData
         .filter(track => track.kind === 'audio')
-        .reduce((latest, current) => new Date(current.time) > new Date(latest.time) ? current : latest, {});
+        .reduce((latest, current) => new Date(current.time) > new Date(latest.time) ? current : latest, trackData.find(track => track.kind === 'audio') || {});
     const latestVideoTrack = trackData
         .filter(track => track.kind === 'video')
-        .reduce((latest, current) => new Date(current.time) > new Date(latest.time) ? current : latest, {});
+        .reduce((latest, current) => new Date(current.time) > new Date(latest.time) ? current : latest, trackData.find(track => track.kind === 'video') || {});
+
+    // Debugging
+    debug("Latest audio track device:", latestAudioTrack);
+    debug("Latest video track:", latestVideoTrack);
 
     const devices = await navigator.mediaDevices.enumerateDevices();
 
@@ -231,6 +236,7 @@ addMediaButton.addEventListener('click', async () => {
 async function startRecording() {
     // Get media based on the last used devices
     const constraints = await getMediaConstraints();
+    debug("Recording with constraints:", constraints);
 
     // Get user media with updated constraints
     const stream = await navigator.mediaDevices.getUserMedia(constraints);

src/applets/videoPlayer/scripts/recorder.mjs

@@ -1,3 +1,8 @@
+/**
+ * @module recorder
+ * @description This module is responsible for recording video and audio from the user's camera and microphone.
+ * Only used in recorder.html, which is not currently exposed to the user.
+ */
 import '../styles/style.scss';
 import {arrayBufferToBase64} from './base64.mjs';
 
@@ -20,10 +25,6 @@ const fileButton = document.getElementById('fileButton');
 let audioEnabled = true;
 let videoEnabled = true;
 
-// get data from URL params
-const params = new URLSearchParams(window.location.search);
-const previewAspectRatio = params.get('aspectRatio') || 16 / 9;
-
 let arrayBuffer = null;
 let mediaRecorder;
 let recordedChunks = [];
@@ -168,25 +169,33 @@ navigator.mediaDevices.ondevicechange = async () => {
     await populateDeviceList();
 };
 
-const constraints = {
-    audio: true,
-    video: {
-        aspectRatio: previewAspectRatio,
-        width: {max: 1280},
-        height: {max: 720}
-    }
-};
-
+/**
+ * Get media devices based on the current settings
+ * @returns {Promise<void>}
+ */
 async function getMedia() {
+// ToDo: store constraints with trackData and reuse those
+// get the trackInfo.settings.deviceId with trackInfo.kind === 'video' and the highest resolution based on trackInfo.settings.height
+
+    const videoSettings = storage.contents['trackData']
+        .filter(trackInfo => trackInfo.kind === 'video' && trackInfo.readyState === 'live')
+        .sort((a, b) => b.settings.height - a.settings.height)[0].settings || null;
+
+    const audioSettings = storage.contents['trackData']
+        .filter(trackInfo => trackInfo.kind === 'audio' && trackInfo.readyState === 'live')
+        .pop()?.settings || null;
+
     const constraints = {
-        audio: audioEnabled,
+        audio: audioSettings ? audioSettings.deviceId : audioEnabled,
         video: videoEnabled ? {
-            aspectRatio: previewAspectRatio,
-            width: {max: 1280},
-            height: {max: 720}
+            aspectRatio: videoSettings?.aspectRatio ||  16 / 9,
+            height: {max: videoSettings?.height || 720},
+            deviceId: videoSettings.deviceId
         } : false
     };
 
+    debug('recorder media constraints:', constraints);
+
     try {
         videoElement.srcObject = await navigator.mediaDevices.getUserMedia(constraints);
     } catch (error) {