Merge pull request #1675 from handellm/resolution_updates

Add 180p and 360p resolutions, and pausing of the self-view.
webrtc · Sep 4, 2024 · 87fca4e · 87fca4e
2 parents db528b6 + de44fec
commit 87fca4e
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 8 deletions.
diff --git a/src/content/getusermedia/resolution/index.html b/src/content/getusermedia/resolution/index.html
@@ -81,11 +81,13 @@ <h1><a href="//webrtc.github.io/samples/" title="WebRTC samples homepage">WebRTC
     <p>Click a button to call <code>getUserMedia()</code> with appropriate resolution.</p>
 
     <div id="buttons">
-        <button id="qvga">QVGA</button>
-        <button id="vga">VGA</button>
-        <button id="hd">HD</button>
-        <button id="full-hd">Full HD</button>
-        <button id="televisionFourK">Television 4K (3840x2160)</button>
+        <button id="p180">180p (180x320)</button>
+        <button id="qvga">QVGA (240x320)</button>
+        <button id="p360">360p (360x640)</button>
+        <button id="vga">VGA (480x640)</button>
+        <button id="hd">HD/720p (720x1280)</button>
+        <button id="full-hd">Full HD/1080p (1080x1920)</button>
+        <button id="televisionFourK">Television 4K/2160p (3840x2160)</button>
         <button id="cinemaFourK">Cinema 4K (4096x2160)</button>
         <button id="eightK">8K</button>
     </div>
@@ -100,6 +102,7 @@ <h1><a href="//webrtc.github.io/samples/" title="WebRTC samples homepage">WebRTC
         </div>
         <input id="sizelock" type="checkbox">Lock video size<br>
         <input id="aspectlock" type="checkbox">Lock aspect ratio<br>
+        <input id="pausevideo" type="checkbox">Pause video<br>
     </div>
     <p id="errormessage"></p>
 

diff --git a/src/content/getusermedia/resolution/js/main.js b/src/content/getusermedia/resolution/js/main.js
@@ -12,8 +12,10 @@ const dimensions = document.querySelector('#dimensions');
 const video = document.querySelector('video');
 let stream;
 
-const vgaButton = document.querySelector('#vga');
 const qvgaButton = document.querySelector('#qvga');
+const p180Button = document.querySelector('#p180');
+const vgaButton = document.querySelector('#vga');
+const p360Button = document.querySelector('#p360');
 const hdButton = document.querySelector('#hd');
 const fullHdButton = document.querySelector('#full-hd');
 const cinemaFourKButton = document.querySelector('#cinemaFourK');
@@ -27,18 +29,27 @@ const widthInput = document.querySelector('div#width input');
 const widthOutput = document.querySelector('div#width span');
 const aspectLock = document.querySelector('#aspectlock');
 const sizeLock = document.querySelector('#sizelock');
+const pauseVideo = document.querySelector('#pausevideo');
 
 let currentWidth = 0;
 let currentHeight = 0;
 
-vgaButton.onclick = () => {
-  getMedia(vgaConstraints);
+p180Button.onclick = () => {
+  getMedia(p180Constraints);
 };
 
 qvgaButton.onclick = () => {
   getMedia(qvgaConstraints);
 };
 
+p360Button.onclick = () => {
+  getMedia(p360Constraints);
+};
+
+vgaButton.onclick = () => {
+  getMedia(vgaConstraints);
+};
+
 hdButton.onclick = () => {
   getMedia(hdConstraints);
 };
@@ -59,10 +70,26 @@ eightKButton.onclick = () => {
   getMedia(eightKConstraints);
 };
 
+pauseVideo.onchange = () => {
+  if (pauseVideo.checked) {
+    video.pause();
+  } else {
+    video.play();
+  }
+};
+
+const p180Constraints = {
+  video: {width: {exact: 320}, height: {exact: 180}}
+};
+
 const qvgaConstraints = {
   video: {width: {exact: 320}, height: {exact: 240}}
 };
 
+const p360Constraints = {
+  video: {width: {exact: 640}, height: {exact: 360}}
+};
+
 const vgaConstraints = {
   video: {width: {exact: 640}, height: {exact: 480}}
 };

diff --git a/src/content/getusermedia/resolution/js/test.js b/src/content/getusermedia/resolution/js/test.js
@@ -29,6 +29,8 @@ describe('getUserMedia resolutions', () => {
   });
 
   const buttonToResolution = {
+    'p180': 320,
+    'p360': 640,
     'qvga': 320,
     'vga': 640,
     'hd': 1280,