Airgapped QR Code Transfer
Airgapped QR Code Transfer is a simple web-based tool to transfer data between devices using QR codes. It allows for the transfer of files without the need for network connectivity, leveraging QR codes to encode and decode file data. This project uses Vue.js for the frontend and libraries like pako for compression, qrcode.js for QR code generation, and zbar-wasm for QR code scanning.
Live Online Demo
Receiver Setup:
- Open scanner.html in the receiver's browser.
- Allow access to the camera for scanning.
Sender Setup:
- Open generator.html in the sender's browser.
- Upload the file that needs to be transferred.
Transfer Process:
- Click the "Start Receiver" button in the receiver's browser and point it to the sender's screen.
- In the sender's browser, click "Choose file" and then click "Start Transfer."
- Wait for all parts to be transferred. The file will be downloaded on the receiver's device.
Features
- Data Sender Mode: Allows a user to select a file, compress it, and transfer it via QR codes.
- Data Receiver Mode: Allows a user to scan QR codes to receive and reconstruct the file.
- File Compression: Uses gzip compression to reduce the size of the data being transferred.
- QR Code Generation and Scanning: Uses qrcode.js for generation and zbar-wasm for scanning QR codes.
Getting Started
Prerequisites
A modern web browser (preferably Chrome or Firefox) that supports JavaScript and the WebRTC API.
Installing
git clone https://github.com/mohankumarelec/airgap-qr-transfer.git
cd airgap-qr-transfer
Open the generator.html
file in your browser for the sender interface:
open generator.html
Open the scanner.html
file in your browser for the receiver interface:
open scanner.html
Usage
Data Sender Mode
- Open
generator.html
in your browser.
- Select a file using the file input.
- Click the "Start Transfer" button to begin the transfer process.
- The application will compress the file, split it into chunks, and generate QR codes for each chunk.
- The generated QR codes will be displayed one by one, which can be scanned by the receiving device.
Data Receiver Mode
- Open
scanner.html
in your browser.
- Click the "Start Receiver" button to begin the receiving process.
- Use the device's camera to scan the QR codes generated by the sender.
- The application will decode the QR codes, reconstruct the file, and prompt you to download it once the transfer is complete.
How It Works
Data Sender (generator.html)
- File Selection: User selects a file from their device.
- Compression: The file is compressed using the pako library.
- Chunking: The compressed file is split into smaller chunks.
- QR Code Generation: Each chunk is encoded into a QR code using qrcode.js.
- Display QR Codes: The QR codes are displayed sequentially for the receiver to scan.
Data Receiver (scanner.html)
- QR Code Scanning: The device's camera scans QR codes using zbar-wasm.
- Decoding: Each QR code is decoded to extract the chunk of data.
- Reconstruction: The chunks are reassembled into the original compressed file.
- Decompression: The file is decompressed using pako.
- File Download: The reconstructed file is made available for download.
Contributing
Contributions are welcome! Please follow these steps:
- Fork the repository.
- Create a new branch (
git checkout -b feature-branch
).
- Make your changes.
- Commit your changes (
git commit -am 'Add new feature'
).
- Push to the branch (
git push origin feature-branch
).
- Create a new Pull Request.
License
This project is licensed under the MIT License - see the LICENSE file for details.
Acknowledgments
- Vue.js - JavaScript framework for building user interfaces.
- pako - Compression library.
- qrcode.js - QR code generation library.
- zbar-wasm - QR code scanning library.
More Information
For more information, visit the GitHub repository.