From 76e9f2eeebc7646c5c1489083c59c04cf4d9f807 Mon Sep 17 00:00:00 2001 From: Markus Handell Date: Tue, 17 Dec 2024 15:14:42 +0100 Subject: [PATCH 1/5] Add support for getDisplayMedia to enable variable resolution entry into MediaRecorder. --- src/content/getusermedia/record/index.html | 4 ++++ src/content/getusermedia/record/js/main.js | 11 ++++++----- 2 files changed, 10 insertions(+), 5 deletions(-) diff --git a/src/content/getusermedia/record/index.html b/src/content/getusermedia/record/index.html index 774840760..8e9663226 100644 --- a/src/content/getusermedia/record/index.html +++ b/src/content/getusermedia/record/index.html @@ -44,6 +44,10 @@

WebRTC
+ diff --git a/src/content/getusermedia/record/js/main.js b/src/content/getusermedia/record/js/main.js index d8089fb33..d29440d01 100644 --- a/src/content/getusermedia/record/js/main.js +++ b/src/content/getusermedia/record/js/main.js @@ -16,6 +16,7 @@ let mediaRecorder; let recordedBlobs; +const sourceSelect = document.querySelector('#source'); const codecPreferences = document.querySelector('#codecPreferences'); const errorMsgElement = document.querySelector('span#errorMsg'); @@ -144,7 +145,7 @@ function stopRecording() { function handleSuccess(stream) { recordButton.disabled = false; - console.log('getUserMedia() got stream:', stream); + console.log('getMedia() got stream:', stream); window.stream = stream; const gumVideo = document.querySelector('video#gum'); @@ -161,11 +162,11 @@ function handleSuccess(stream) { async function init(constraints) { try { - const stream = await navigator.mediaDevices.getUserMedia(constraints); + const stream = await navigator.mediaDevices[sourceSelect.value](constraints); handleSuccess(stream); } catch (e) { - console.error('navigator.getUserMedia error:', e); - errorMsgElement.innerHTML = `navigator.getUserMedia error:${e.toString()}`; + console.error('getMedia error:', e); + errorMsgElement.innerHTML = `getMedia error:${e.toString()}`; } } @@ -174,7 +175,7 @@ document.querySelector('button#start').addEventListener('click', async () => { const hasEchoCancellation = document.querySelector('#echoCancellation').checked; const constraints = { audio: { - echoCancellation: {exact: hasEchoCancellation} + echoCancellation: hasEchoCancellation }, video: { width: 1280, height: 720 From 60c2635c5e95e1871e99e5e1ab37e58fb4e2dde5 Mon Sep 17 00:00:00 2001 From: Markus Handell Date: Tue, 17 Dec 2024 15:23:44 +0100 Subject: [PATCH 2/5] Fix --- src/content/getusermedia/record/js/main.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/content/getusermedia/record/js/main.js b/src/content/getusermedia/record/js/main.js index d29440d01..3663baa88 100644 --- a/src/content/getusermedia/record/js/main.js +++ b/src/content/getusermedia/record/js/main.js @@ -145,7 +145,7 @@ function stopRecording() { function handleSuccess(stream) { recordButton.disabled = false; - console.log('getMedia() got stream:', stream); + console.log(`${sourceSelect.value} got stream:`, stream); window.stream = stream; const gumVideo = document.querySelector('video#gum'); @@ -165,8 +165,8 @@ async function init(constraints) { const stream = await navigator.mediaDevices[sourceSelect.value](constraints); handleSuccess(stream); } catch (e) { - console.error('getMedia error:', e); - errorMsgElement.innerHTML = `getMedia error:${e.toString()}`; + console.error(`${sourceSelect.value} error:`, e); + errorMsgElement.innerHTML = `${sourceSelect.value} error:${e.toString()}`; } } From 6731ea3ed99309a6811f1a6e6304296a4eda2421 Mon Sep 17 00:00:00 2001 From: Markus Handell Date: Wed, 18 Dec 2024 09:52:48 +0100 Subject: [PATCH 3/5] Fix UX 101 --- src/content/getusermedia/record/css/main.css | 2 +- src/content/getusermedia/record/index.html | 7 ++---- src/content/getusermedia/record/js/main.js | 26 ++++++++++++-------- 3 files changed, 19 insertions(+), 16 deletions(-) diff --git a/src/content/getusermedia/record/css/main.css b/src/content/getusermedia/record/css/main.css index 6abc518e5..a56fc754a 100644 --- a/src/content/getusermedia/record/css/main.css +++ b/src/content/getusermedia/record/css/main.css @@ -9,7 +9,7 @@ margin: 0 3px 10px 0; padding-left: 2px; padding-right: 2px; - width: 99px; + width: 120px; } button:last-of-type { diff --git a/src/content/getusermedia/record/index.html b/src/content/getusermedia/record/index.html index 8e9663226..14af94cbf 100644 --- a/src/content/getusermedia/record/index.html +++ b/src/content/getusermedia/record/index.html @@ -44,11 +44,8 @@

WebRTC
- - + + diff --git a/src/content/getusermedia/record/js/main.js b/src/content/getusermedia/record/js/main.js index 3663baa88..3217d7e11 100644 --- a/src/content/getusermedia/record/js/main.js +++ b/src/content/getusermedia/record/js/main.js @@ -16,7 +16,6 @@ let mediaRecorder; let recordedBlobs; -const sourceSelect = document.querySelector('#source'); const codecPreferences = document.querySelector('#codecPreferences'); const errorMsgElement = document.querySelector('span#errorMsg'); @@ -145,7 +144,7 @@ function stopRecording() { function handleSuccess(stream) { recordButton.disabled = false; - console.log(`${sourceSelect.value} got stream:`, stream); + console.log('Got stream:', stream); window.stream = stream; const gumVideo = document.querySelector('video#gum'); @@ -160,18 +159,22 @@ function handleSuccess(stream) { codecPreferences.disabled = false; } -async function init(constraints) { +async function init(constraints, isGetDisplayMedia) { try { - const stream = await navigator.mediaDevices[sourceSelect.value](constraints); + console.log(constraints, isGetDisplayMedia) + const stream = isGetDisplayMedia ? + await navigator.mediaDevices.getDisplayMedia(constraints) : + await navigator.mediaDevices.getUserMedia(constraints); handleSuccess(stream); } catch (e) { - console.error(`${sourceSelect.value} error:`, e); - errorMsgElement.innerHTML = `${sourceSelect.value} error:${e.toString()}`; + console.error('Source open error:', e); + errorMsgElement.innerHTML = `Source error: ${e.toString()}`; } } -document.querySelector('button#start').addEventListener('click', async () => { - document.querySelector('button#start').disabled = true; +async function onStart(isGetDisplayMedia) { + document.querySelector('button#start-gum').disabled = true; + document.querySelector('button#start-gdm').disabled = true; const hasEchoCancellation = document.querySelector('#echoCancellation').checked; const constraints = { audio: { @@ -182,5 +185,8 @@ document.querySelector('button#start').addEventListener('click', async () => { } }; console.log('Using media constraints:', constraints); - await init(constraints); -}); + await init(constraints, isGetDisplayMedia); +} + +document.querySelector('button#start-gum').addEventListener('click', async () => { await onStart(false) }); +document.querySelector('button#start-gdm').addEventListener('click', async () => { await onStart(true) }); From 0de5965e418a03f6e9507346f313dc01f795db51 Mon Sep 17 00:00:00 2001 From: Markus Handell Date: Wed, 18 Dec 2024 09:55:37 +0100 Subject: [PATCH 4/5] Fixie --- src/content/getusermedia/record/js/main.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/content/getusermedia/record/js/main.js b/src/content/getusermedia/record/js/main.js index 3217d7e11..fcf7e8b79 100644 --- a/src/content/getusermedia/record/js/main.js +++ b/src/content/getusermedia/record/js/main.js @@ -161,7 +161,6 @@ function handleSuccess(stream) { async function init(constraints, isGetDisplayMedia) { try { - console.log(constraints, isGetDisplayMedia) const stream = isGetDisplayMedia ? await navigator.mediaDevices.getDisplayMedia(constraints) : await navigator.mediaDevices.getUserMedia(constraints); @@ -188,5 +187,9 @@ async function onStart(isGetDisplayMedia) { await init(constraints, isGetDisplayMedia); } -document.querySelector('button#start-gum').addEventListener('click', async () => { await onStart(false) }); -document.querySelector('button#start-gdm').addEventListener('click', async () => { await onStart(true) }); +document.querySelector('button#start-gum').addEventListener('click', async () => { + await onStart(false) +}); +document.querySelector('button#start-gdm').addEventListener('click', async () => { + await onStart(true) +}); From f44d3b66ba86d79c6a7a68e816b1659bc111654a Mon Sep 17 00:00:00 2001 From: Markus Handell Date: Wed, 18 Dec 2024 09:58:07 +0100 Subject: [PATCH 5/5] Real fixz --- src/content/getusermedia/record/js/main.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/getusermedia/record/js/main.js b/src/content/getusermedia/record/js/main.js index fcf7e8b79..a9e2a664c 100644 --- a/src/content/getusermedia/record/js/main.js +++ b/src/content/getusermedia/record/js/main.js @@ -188,8 +188,8 @@ async function onStart(isGetDisplayMedia) { } document.querySelector('button#start-gum').addEventListener('click', async () => { - await onStart(false) + await onStart(false); }); document.querySelector('button#start-gdm').addEventListener('click', async () => { - await onStart(true) + await onStart(true); });