Skip to content

Latest commit

 

History

History
118 lines (87 loc) · 3.14 KB

README.md

File metadata and controls

118 lines (87 loc) · 3.14 KB
Raw

react-qrvideo

Transfer data through QR codes.

This project can be useful for people who need to transfer data between devices, when they do not have an Internet connection (Wi-Fi or mobile data) or bluetooth.

This project was developed to be executed in React-Native with Redux and runs on expo.

By performing multiple tests, I managed to transfer 10 kb / s on average, without losing image quality in QR sequences (to be able to scan correctly, even on devices with small screens). However theoretically, it could be transferred up to a speed of 43 kb / s

At the moment the project only allows to transfer objects of type JSON, however, later on I hope to be able to add transfer of other types of files.

Features!

  • Generates QR code sequence from an object of type JSON
  • Compress JSON objects for a smaller number of QR images
  • Read the QR code sequence using the expo scanner
  • When the entire sequence is scanned, it decompresses and returns the JSON object
  • You can configure the size of generated QRs

Dependencies

  • "expo": "^20.0.0",
  • "history": "^4.7.2",
  • "immutable": "^3.8.1",
  • "jsonpack": "^1.1.5",
  • "react": "16.0.0-alpha.12",
  • "react-native": "^0.47.0",
  • "react-native-qrcode-svg": "^5.0.2",
  • "react-router-redux": "^4.0.8",
  • "redux": "^3.7.2",
  • "redux-immutable-state-invariant": "^2.0.0",
  • "redux-logger": "^3.0.6",
  • "redux-observable": "^0.16.0",
  • "redux-persist": "^4.9.1",
  • "redux-persist-transform-encrypt": "^1.0.2",
  • "remote-redux-devtools": "^0.5.12",
  • "rxjs": "^5.4.3"

Installation

$ yarn add react-qrvideo

or

$ npm install react-qrvideo --save

Usage

Include reducer
import { qrReducer as DataQr } from '../components/react-qrvideo';

const reducersJson = {
  // Your reducer ...
};

reducersJson[DATA_QR] = DataQr;
export default combineReducers(reducersJson);
QR Secuence from JSON
import { QRVideo } from 'react-qrvideo';

render() {
  const sampleJson = {name: 'Yamil', email: 'yamilquery@gmail', github: 'yamilquery'};
    return(
        <QRVideo
          json{sampleJSon}
          size={300}
          speed={50}
          density={300}
        />
    );
}
QR Scanner for Secuence
import { QRVideo } from 'react-qrvideo';

render() {
    return(
        <QRVideo
          isScanner
          onComplete={data => { alert(JSON.stringify(data)); }}
        />
    );
}

Props

Name Description Type Required Default Value
isScanner Activating this value will activate the scanning mode boolean No false
json JSON object to be transferred by QR stream Object No null
size QR size number No 300
speed QR sequence speed in milliseconds number No 250
density Character density per QR number No 400
onComplete Callback function when scan finished Function No () => {}

Author

Yamil Diaz Aguirre

Want to contribute? Great!