apps/BareRTC
1
0
Fork 0
Code Issues 14 Pull Requests Packages Projects Releases Wiki Activity

Ideal vs. Max constraints for webcams

Browse Source 
* 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.
This commit is contained in:
Noah 2024-12-08 17:46:50 -08:00
parent 1b43948a9e
commit 9f64c6907b
1 changed files with 13 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/App.vue
View File

@ -41,9 +41,16 @@ const configuration = {
const FileUploadMaxSize = 1024 * 1024 * 8; // 8 MB const FileUploadMaxSize = 1024 * 1024 * 8; // 8 MB
const DebugChannelID = "barertc-debug"; 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, const WebcamWidth = 640,
WebcamHeight = 480; 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 { export default {
name: 'BareRTC', name: 'BareRTC',
components: { components: {
@ -2197,8 +2204,8 @@ export default {
let mediaParams = { let mediaParams = {
audio: true, audio: true,
video: { video: {
width: { max: WebcamWidth }, width: { ideal: WebcamWidth, max: WebcamMaxWidth },
height: { max: WebcamHeight }, height: { ideal: WebcamHeight, max: WebcamMaxHeight },
}, },
}; };
@ -2247,6 +2254,10 @@ export default {
this.webcam.videoDeviceID = stream.getVideoTracks()[0].getSettings().deviceId; this.webcam.videoDeviceID = stream.getVideoTracks()[0].getSettings().deviceId;
this.webcam.audioDeviceID = stream.getAudioTracks()[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. // Collect video and audio devices to let the user change them in their settings.
this.getDevices().then(() => { this.getDevices().then(() => {
// Store their names on localStorage in case we can reselect them by name // Store their names on localStorage in case we can reselect them by name