From 542d9208a9de0369c4298afb0eb19e5031cc7b35 Mon Sep 17 00:00:00 2001
From: Niklas Gruhn <niklas@gruhn.me>
Date: Fri, 15 Dec 2023 13:48:18 +0100
Subject: [PATCH] docs: simple demo that renders camera capabilities

---
 docs/public/select-camera-demo.html | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/docs/public/select-camera-demo.html b/docs/public/select-camera-demo.html
index 92064974..80f1eb2d 100644
--- a/docs/public/select-camera-demo.html
+++ b/docs/public/select-camera-demo.html
@@ -11,6 +11,8 @@
 <ul></ul>
 <br>
 <video autoplay muted playsinline></video>
+<h3>Capabilities:</h3>
+<pre id="capabilities"></pre>
 
 <script>
 const listEl = document.querySelector("ul")
@@ -23,10 +25,11 @@
     .map(({ label, deviceId }) => {
       const el = document.createElement('li')
 
-      if (deviceId == currentDeviceId)
-        el.innerHTML = `<a href="#" onclick="selectCamera('${deviceId}')">${label}</a> [PREFERRED]`
-      else
+      if (deviceId == currentDeviceId) {
         el.innerHTML = `<a href="#" onclick="selectCamera('${deviceId}')">${label}</a>`
+      } else {
+        el.innerHTML = `<a href="#" onclick="selectCamera('${deviceId}')">${label}</a>`
+      }
 
       return el
     })
@@ -65,6 +68,9 @@
       videoTrack.getSettings().deviceId,
       await navigator.mediaDevices.enumerateDevices()
     )
+
+    const capEl = document.querySelector("#capabilities")
+    capEl.innerText = JSON.stringify(videoTrack.getCapabilities(), null, 2)
   } catch (error) {
     console.error(error)
   }