lukegb/depot
1
0
Fork 0
Code Issues 1 Pull requests Projects Packages Activity Actions

lukegbcom/ee-qrcode: feature detect buttons

Browse source
This commit is contained in:
Luke Granger-Brown 2022-05-01 15:01:19 +01:00
parent 5193dd028a
commit f30eeb8008
1 changed files with 17 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
web/lukegbcom/pages/tools/ee-qrcode.js
View file

@ -128,6 +128,19 @@ function fixData(srcData) {
return srcData.replace(/[$][$]$/, '') 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() { export default function EsimMangler() {
const [running, setRunning] = useState(false) const [running, setRunning] = useState(false)
const [scannedData, setScannedData] = useState(null) const [scannedData, setScannedData] = useState(null)
@ -149,17 +162,14 @@ 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>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>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> : ( <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> )}</p>
{(scannedData !== null) ? <p><QRCodeSVG value={fixData(scannedData)} /></p> : null} {(scannedData !== null) ? <p><QRCodeSVG value={fixData(scannedData)} /></p> : null}
{(scannedData !== null) ? <p><tt>{fixData(scannedData)}</tt></p> : null} {(scannedData !== null) ? <p><tt>{fixData(scannedData)}</tt></p> : null}
{(running != false) ? <CodeScanner filterSymbols={esimQrcodeFilter} onResult={(result) => { {(running != false) ? <CodeScanner filterSymbols={esimQrcodeFilter} onResult={(result) => {
setScannedData(result) setScannedData(result)
setRunning(false) setRunning(false)
}} captureType={running} /> : null} }} captureType={running} /> : null}
</div> </div>
</main> </main>
</div> </div>