svelte-scan-qrcode
Scan QR Code on browser by open camera or upload QR Code image. Support open cameras on Android and iOS browsers.
How to use
-
Install @kuiper/svelte-scan-qrcode
npm install --save @kuiper/svelte-scan-qrcode
Simple with bind:scanResult
to get scan result
<script lang="ts">
import { ScanQRCode } from "@kuiper/svelte-scan-qrcode";
let result = "";
</script>
<ScanQRCode bind:scanResult={result} options={{}} />
Custom with enableQRCodeReaderButton
and options
<script lang="ts">
import { goto } from "$app/navigation";
import { ScanQRCode } from "@kuiper/svelte-scan-qrcode";
let result = "";
function _onPermissionError() {
alert("Permission rejected");
location.reload();
}
function _onResulted() {
if (result.includes("love")) {
goto("/result"); // go to result page
}
}
</script>
<ScanQRCode
bind:scanResult={result}
enableQRCodeReaderButton={true}
options={{
onPermissionError: () => _onPermissionError(),
onResulted: () => _onResulted(),
}}
/>
-
Props
- scanResult
- Type
string
. - Use
bind:scanResult
to get scan result.
- enableQRCodeReaderButton
- Type
boolean
. - Set to true for enable upload QR Code image button. After user uploaded image
@kuiper/svelte-scan-qrcode
package will read QR Code from image.
- options
- Types
{ onPermissionError?: Function; onResulted?: Function; }
- onPermissionError function will call if
@kuiper/svelte-scan-qrcode
package request camera get rejected. - onResulted function will call if the
@kuiper/svelte-scan-qrcode
package gets the scan result from QR Code.