lukegbcom/ee-qrcode: feature detect buttons

web/lukegbcom/pages/tools/ee-qrcode.js

@@ -128,6 +128,19 @@ function fixData(srcData) {
   return srcData.replace(/[$][$]$/, '')
 }
 
+function StartCaptureButtons({ setRunning }) {
+  const isBrowser = typeof window !== 'undefined'
+  const hasScreenCapture = isBrowser && typeof navigator.mediaDevices.getDisplayMedia === 'function';
+  const hasWebcamCapture = isBrowser && typeof navigator.mediaDevices.getUserMedia === 'function';
+
+  return (
+    <span suppressHydrationWarning={true}>
+      {hasScreenCapture ? <button onClick={() => setRunning('screen')}>Start Screen Capture</button> : null}
+      {hasWebcamCapture ? <button onClick={() => setRunning('camera')}>Start Webcam Capture</button> : null}
+    </span>
+  )
+}
+
 export default function EsimMangler() {
   const [running, setRunning] = useState(false)
   const [scannedData, setScannedData] = useState(null)
@@ -149,10 +162,7 @@ export default function EsimMangler() {
           <p>EE, as of 2022-05-01, still generates not-quite-spec-compliant eSIM QR Codes, which get rejected by some Android devices - including the Pixel series of devices.</p>
           <p>This page is intended to generate a fixed version of the QR code (which happens entirely on your computer!).</p>
           <p>{running ? <button onClick={() => setRunning(false)}>Stop Capture</button> : (
-            <span>
+            <StartCaptureButtons setRunning={setRunning} />
-              <button onClick={() => setRunning('screen')}>Start Screen Capture</button>
-              <button onClick={() => setRunning('camera')}>Start Webcam Capture</button>
-            </span>
           )}</p>
           {(scannedData !== null) ? <p><QRCodeSVG value={fixData(scannedData)} /></p> : null}
           {(scannedData !== null) ? <p><tt>{fixData(scannedData)}</tt></p> : null}