Git Product home page Git Product logo

qrfiletransfer's Introduction

QRFileTransfer

This tool allows you to transmit files between two devices relying EXCLUSIVELY on the Camera stream combined with QR image encoding/decoding. Therefore the two devices can work both offline, regardless of the platform and the hardware configuration, as long as both have a working camera.
Preconiditions:

  • Sender and Receiver devices have the camera access
  • The two devices are one in front of each other, so that both the camera points to the other screen
Reccomendations:
  • The distance between them is the shortest possible
  • The two devices are fixed while the transmission is ongoning
  • Make sure the QR images on both Sender and Receiver are fully visible. So, toggle off the camera view if displaed, and make sure no window covers the web page while the process is going. In case this happens, the process will pause until the next valid QR image will be detected.
  • Try to maintain the camera light the same while the process is going, to preserve the quality of the camera stream and simplify the work of QR images detection
  • The bigger is the size of the chunk, the smaller will be the "squares" drawn within the QR image and harder will be for the camera to detect the QR images from the camera feed. On the other hand, if the camera quality is higher than average (eg. Full HD) then the resulting resolution should make the recognization on bigger chunks possible.
How to use:
  • The Receiver device starts the session from "Receive file"
  • The Receiver device presses on "Start receiving" and allows the camera permission asked by the browser
  • The Sender device starts the session from "Send file" and picks the file which is intended to be transmitted to the Receiver device
  • The Sender device can change the chunk size if needed or just press directly on "Start sending"
  • The Sender device allows the camera permission asked by the browser
  • For both Sender and Receiver, you can click on "Toggle Camera" to hide/show the camera view, or click on "Toggle QR" to show the QR full screen (recommended) or not
How does it work:
  • The first QR image displayed by the Sender is providing the meta info so that the Receiver can detect it and configure itself, and start receiving the actual file chunks. Those meta info are file name, file size, number of chunks, chunk size, etc
  • The Receiver replies displaying a QR image to notify the Sender to start displaying the QR image chunks
  • The Sender starts displaying the QR Image for each file chunk
  • For each QR Image recognized by the Receiver's camera, if this is a file chunk QR image, it will "reply" to the Sender by displaying another QR image with the hash (SHA-256) of the decoded file chunk.
  • The Sender will detect the hash displayed by the Receiver and, if it matches with the expected hash value, it will proceed with the next chunk. If not, it will display a new QR image to the Receiver, providing the info that the last chunk was not valid and carrying over again the pending chunk to be detected and revalidated again (in this case the Receiver will drop the pending chunk in order to decode it again)
  • When the last chunk is received on the Receiver and then validated back on the Sender, then a last QR image is sent notifying the Receiver that the transmission is completed.
  • At this stage, the Receiver merges the collected chunks in a single Blob object and downloads it on the device's disk
Dependencies:
  • This tool is written using Vanilla Javascript, HTML and CSS, using the below 3rd-party libraries for QR encoding/decoding
  • QR-Code-generator for QR encoding
  • jsQR for QR decoding
Samples:

qrfiletransfer's People

Contributors

lucaiaco avatar

Stargazers

Max Schaefer avatar Nur Arifin Akbar avatar Walter Purcaro avatar  avatar George avatar Gabriel Emerenciano avatar Lihang Xu avatar  avatar  avatar Vladimir Hooke avatar Daniel Šulik avatar  avatar Александр Хухлаев avatar Douglas Mendes avatar Yong Kaisheng avatar  avatar Evan Widloski avatar Saehanseul Yi avatar now_its_dark avatar Logan King (DarkComet) avatar mseidler avatar  avatar Vitaliy Vorobyev avatar Teodor Atroshenko avatar FujiApple avatar Pablo Lamela avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.