lukegbcom/ee-qrcode: feature detect buttons

This commit is contained in:
Luke Granger-Brown 2022-05-01 15:01:19 +01:00
parent 5193dd028a
commit f30eeb8008

View file

@ -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>
<button onClick={() => setRunning('screen')}>Start Screen Capture</button>
<button onClick={() => setRunning('camera')}>Start Webcam Capture</button>
</span>
<StartCaptureButtons setRunning={setRunning} />
)}</p>
{(scannedData !== null) ? <p><QRCodeSVG value={fixData(scannedData)} /></p> : null}
{(scannedData !== null) ? <p><tt>{fixData(scannedData)}</tt></p> : null}