More tweaks to switch camera button

Author: simonw

haiku.html

@@ -60,14 +60,14 @@
             ></path>
           </g>
         </svg></button
-      ><br />
+      >
       <button
         id="switchCameraBtn"
         style="background-color: transparent; border: none; cursor: pointer"
       >
         <svg
           xmlns="http://www.w3.org/2000/svg"
-          style="width: 40px; height: 40px"
+          style="width: 60px; height: 60px"
           height="24"
           viewBox="0 0 24 24"
           fill="none"
@@ -99,14 +99,6 @@
       let currentStream;
       let currentCamera = "front";
 
-      // Show switch button if more than one camera
-      navigator.mediaDevices.enumerateDevices().then(devices => {
-        const cameras = devices.filter(device => device.kind === 'videoinput');
-        if (cameras.length > 1) {
-          switchCameraBtn.style.display = "block";
-        }
-      });
-
       // Request access to the webcam
       function startCamera() {
         const constraints = {
@@ -119,6 +111,13 @@
           .then((stream) => {
             currentStream = stream;
             video.srcObject = stream;
+            // Show switch button if more than one camera
+            navigator.mediaDevices.enumerateDevices().then(devices => {
+              const cameras = devices.filter(device => device.kind === 'videoinput');
+              if (cameras.length > 1) {
+                switchCameraBtn.style.display = "block";
+              }
+            });
           })
           .catch((error) => {
             console.error("Error accessing the camera:", error);