lona-html5-qrcode

lona-html5-qrcode provides Html5-QRCode bindings for Lona

Demo

(This demo is available in test-script/test_script.py)

Installation

lona-html5-qrcode can be installed using pip

pip install lona lona-html5-qrcode

Usage

from lona.html import HTML, H1, Div
from lona import App, View

from lona_html5_qrcode.html import Html5QRCodeScanner

app = App(__file__)


@app.route('/')
class QRCodeView(View):
    def handle_scan_result(self, scanner, data):
        scanner.stop()
        self.result.set_text(f'{json.dumps(data)}\n')

    def handle_request(self, request):
        self.result = Div()

        return HTML(
            H1('QRCodeScanner'),
            self.result,
            Html5QRCodeScanner(
                handle_scan_result=self.handle_scan_result,
            ),
        )


app.run()

Arguments

Default html5-qrcode config

{
    'fps': 10,
    'qrbox': {
        'width': 100,
        'height': 100,
    },
    'rememberLastUsedCamera': True,
}

Themes

When theme is set, a CSS class named f'html5-qrcode-{theme}' gets added to Html5QRCodeScanner. This class then can be used for theming.

lona-html5-qrcode comes with a list of default themes builtin.

Properties

Methods

Troubleshooting

Camera access is only supported in secure context like https or localhost

Html5-QRCode uses the browser media API scan QR-Codes. The browser grants access to this API only in secure contexts. To get around this in development, use the Chrome flag unsafely-treat-insecure-origin-as-secure, like shown below.