https://github.com/pexmor/qr-io
Minimal app for reproducing and sharing QR codes.
https://github.com/pexmor/qr-io
javascript qr-scanner qrcode qrcode-generator websocket
Last synced: 3 months ago
JSON representation
Minimal app for reproducing and sharing QR codes.
- Host: GitHub
- URL: https://github.com/pexmor/qr-io
- Owner: PexMor
- License: mit
- Created: 2023-11-01T09:47:43.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-05T15:39:13.000Z (5 months ago)
- Last Synced: 2025-01-05T16:29:31.897Z (5 months ago)
- Topics: javascript, qr-scanner, qrcode, qrcode-generator, websocket
- Language: TypeScript
- Homepage: https://pexmor.github.io/qr-io/
- Size: 323 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# qr-io
Minimal app for reproducing and sharing QR codes.
the app Git Pages hosted.
**TL;DR:** `python -mhttp.server -d docs 8088`
## Use cases
The app has two foreseen usages simple (without server) and
complex (with server).
### Simple
The elementary usecase is to just scan and show the QR for further scanning.
### Complex with Config
In this case it is expected that you have a server listening on some web URL and is using either **WebSocket** or plain **HTTP POST**.
> **Note:** such server is included in this repo and with help of [ngrok.com](https://ngrok.com/) you can run demo server right from your desktop. See instructions below [Receiving Server](#receiving-sever)
## How to configure
In case you want to configure the server you can create simple QR code containing simple JSON structure (Note: the single and double quotes matter).
### QREncode simple config
The following is a minimal self configured server url.
```bash
# create endpoint and show url
ngrok http 8080
# make config QR from that url
qrencode -t UTF-8 '{"mode":"auto-send","url":"https://.ngrok.io"}'
```
### Receiving sever
The more complete example below is showing how to start **ngrok** with nodejs server and handle all the configuration within your browser.
```bash
# create endpoint and show url
ngrok http 8080
# install deps
yarn
# start server at port 8080 it will read the ngrok info automatically
yarn server
# open http://localhost:8080
# it will show config url (a json inside QR)
# read it by https://pexmor.github.io/qr-io/ -> button "config"
# after that every scanned QR is sent over to http://localhost:8080 page
```
## Sub licenses
This simple but usabe QR I/O project would not be possible without other libraries. These used in browser are listed below. There some other used by server to check those please have a look at [package.json](package.json).
| Part | Link | License |
| ----------------- | -------------------------------------------- | ------------------------------------------------------------------------------ |
| PureCSS | | [BSD](https://github.com/pure-css/pure/blob/master/LICENSE) |
| HTML5 QR Scanner | | [Apache-2.0](https://github.com/mebjas/html5-qrcode/blob/master/LICENSE) |
| QR Code generator | | [BSD-2-clause](https://github.com/danielgjackson/qrcodejs/blob/master/LICENSE) |
## Final notes
Ideas:
- [py/01_easyocr.py](py/01_easyocr.py) - OCR experiment on image postprocessing at the server
- - another OCR experiment, hosted in your browser