From 7ffb57806640938d2e090d4e0bba44920af09e5e Mon Sep 17 00:00:00 2001
From: Kohei Watanabe <nebel@fogtype.com>
Date: Fri, 29 Sep 2023 12:07:00 +0900
Subject: [PATCH] enumerateDevices() before getUserMedia()

---
 public/camera.html | 36 ++++++++++++++++++------------------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/public/camera.html b/public/camera.html
index caaf99e..af050d6 100644
--- a/public/camera.html
+++ b/public/camera.html
@@ -9,6 +9,24 @@
     <div id="player"></div>
     <div id="devices"></div>
     <script type="module">
+      const deviceId = location.hash.slice(1);
+      const playerElement = document.getElementById("player");
+      const videoElement = document.createElement("video");
+      const srcObject = await navigator.mediaDevices.getUserMedia({
+        video: {
+          deviceId,
+        },
+      });
+
+      Object.assign(videoElement, {
+        controls: "controls",
+        autoplay: true,
+        muted: true,
+        srcObject,
+      });
+
+      playerElement.append(videoElement);
+
       const devicesElement = document.getElementById("devices");
       const devices = (await navigator.mediaDevices.enumerateDevices()).filter(
         ({ kind }) => kind === "videoinput",
@@ -27,24 +45,6 @@
       }
 
       window.onhashchange = () => location.reload();
-
-      const deviceId = location.hash.slice(1);
-      const playerElement = document.getElementById("player");
-      const videoElement = document.createElement("video");
-      const srcObject = await navigator.mediaDevices.getUserMedia({
-        video: {
-          deviceId,
-        },
-      });
-
-      Object.assign(videoElement, {
-        controls: "controls",
-        autoplay: true,
-        muted: true,
-        srcObject,
-      });
-
-      playerElement.append(videoElement);
     </script>
   </body>
 </html>