react-qrvideo

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!