From 9f64c6907b5d94fa6303fa63ae0b76d777316675 Mon Sep 17 00:00:00 2001
From: Noah Petherbridge <root@kirsle.net>
Date: Sun, 8 Dec 2024 17:46:50 -0800
Subject: [PATCH] Ideal vs. Max constraints for webcams

* Set 640x480 as the ideal constraint for most users.
* But if their webcam physically can't output that resolution, allow
  them to choose the nearest up to 1280x720.
---
 src/App.vue | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 70ed3a6..8c9f050 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -41,9 +41,16 @@ const configuration = {
 const FileUploadMaxSize = 1024 * 1024 * 8; // 8 MB
 const DebugChannelID = "barertc-debug";
 
+// Webcam sizes: ideal is 640x480 as this is the most friendly for end users, e.g. if everyone
+// broadcasted at 720p users on weaker hardware would run into problems sooner.
 const WebcamWidth = 640,
     WebcamHeight = 480;
 
+// For webcams that can not transmit at 640x480 (e.g. ultra widescreen), allow them to choose
+// the nearest resolution but no more than 720p.
+const WebcamMaxWidth = 1280,
+    WebcamMaxHeight = 720;
+
 export default {
     name: 'BareRTC',
     components: {
@@ -2197,8 +2204,8 @@ export default {
             let mediaParams = {
                 audio: true,
                 video: {
-                    width: { max: WebcamWidth },
-                    height: { max: WebcamHeight },
+                    width: { ideal: WebcamWidth, max: WebcamMaxWidth },
+                    height: { ideal: WebcamHeight, max: WebcamMaxHeight },
                 },
             };
 
@@ -2247,6 +2254,10 @@ export default {
                 this.webcam.videoDeviceID = stream.getVideoTracks()[0].getSettings().deviceId;
                 this.webcam.audioDeviceID = stream.getAudioTracks()[0].getSettings().deviceId;
 
+                // For debugging: log to the debug channel what the chosen resolution is for the user.
+                let videoSettings = stream.getVideoTracks()[0].getSettings();
+                this.DebugChannel(`navigator.getUserMedia(): chosen video resolution is ${videoSettings.width}x${videoSettings.height}`);
+
                 // Collect video and audio devices to let the user change them in their settings.
                 this.getDevices().then(() => {
                     // Store their names on localStorage in case we can reselect them by name