
Security News
Vite Releases Technical Preview of Rolldown-Vite, a Rust-Based Bundler
Vite releases Rolldown-Vite, a Rust-based bundler preview offering faster builds and lower memory usage as a drop-in replacement for Vite.
react-qr-barcode-scanner
Advanced tools
A simple React Component using the client's webcam to read barcodes and QR codes.
This is a simple React component built in Typescript to provide a webcam-based barcode scanner using react-webcam and @zxing/library. This component works on Computers and Mobile Devices (iOS 11 and above and Android Phones).
Thanks to the initial repo: https://github.com/dashboardphilippines/react-webcam-barcode-scanner
npm i react-qr-barcode-scanner
Try a demo of the scanner here.
import { useState } from "react";
import BarcodeScanner from "react-qr-barcode-scanner";
function App() {
const [data, setData] = useState("Not Found");
return (
<>
<BarcodeScanner
width={500}
height={500}
onUpdate={(err, result) => {
if (result) setData(result.text);
else setData("Not Found");
}}
/>
<p>{data}</p>
</>
);
}
export default App;
Type: function
, Required, Argument: error
, result
Function that returns the result for every captured frame. Text from barcode can be accessed from result.getText()
if there is a result.
Type: function
, Optional, Argument: error
If passed to the component, this function is called when there is an error with the camera (rather than with with reading the QR code, which would be passed to onUpdate
). An example would be an error thrown when the user does not allow the required camera permission. This can be handled with an onError
function similar to this:
const onError = (error) => {
if (error.name === "NotAllowedError") {
// Handle messaging in our app after the user chooses to not allow the camera permissions
}
};
Type: number
or string
, Optional, Default: 100%
Type: number
or string
, Optional, Default: 100%
Type: environment
or user
, Optional, Default: environment
user
is the user-facing (front) camera, and environment
is the rear camera.
Type: boolean
, Optional
Turn the camera flashlight on or off.
Torch will only work if the correct facingMode
is selected. For example, if "user" is selected but the flashlight corresponds to the "environment" camera, then it will not turn on.
Torch will not turn on if a static value of true
is passed. The initial value must be false
, and then switched to true
after a timeout or after a user action.
Here is an example using a timeout:
const [torchEnabled, setTorchEnabled] = useState<boolean>(false);
useEffect(() => {
setTimeout(() => {
setTorchEnabled(true);
}, 2000);
}, []);
<BarcodeScanner
torch={torchEnabled}
onUpdate={(err, result) => {}}
/>
Type: number
, Optional, Default: 500
Type: MediaTrackConstraints
, Optional
Type: boolean
, Optional
This prop is a workaround for a bug where the browser freezes if the webcam component is unmounted or removed. See known issues for more about this issue.
Type: BarcodeFormat[] | BarcodeStringFormat[]
, Optional
Array of barcode formats to decode. If not provided, all formats will be used. A smaller list may improve the speed of the scan.
These formats are supported by ZXing:
1D product | 1D industrial | 2D |
---|---|---|
UPC-A | Code 39 | QR Code |
UPC-E | Code 128 | Data Matrix |
EAN-8 | ITF | Aztec |
EAN-13 | RSS-14 | PDF 417 |
The camera can only be accessed over https or localhost
Browser compatibility is limited by react-webcam's usage of the Stream API: https://caniuse.com/stream. On iOS-Devices with iOS < 14.3 camera access works only in native Safari and not in other Browsers (Chrome, etc) or Apps that use an UIWebView or WKWebView. iOS 14.3 (released in December 2020) now supports WebRTC in 3rd party browsers as well.
There is a bug in the react-webcam
package that causes the browser to freeze when the component is unmounted or removed, or the camera video constraints are changed (for example, switching cameras or navigating away from the screen with the camera component). Please see this thread regarding the reported issue: https://github.com/mozmorris/react-webcam/issues/244. As a workaround, react-qr-barcode-scanner
allows passing a stopStream
prop to stop the video streams when true
is passed, allowing you to close the stream before unmounting the component or doing some other action that may cause the freeze. I found I needed to set a timeout to wait one tick before dismissing the modal in my use case to prevent the freeze. PRs to improve this issue are welcome!
Example:
const [stopStream, setStopStream] = useState(false)
//...
const dismissQrReader = () => {
// Stop the QR Reader stream (fixes issue where the browser freezes when closing the modal) and then dismiss the modal one tick later
setStopStream(true)
setTimeout(() => closeModal(), 0)
}
//...
<Modal>
<BarcodeScanner onUpdate={onUpdate} stopStream={stopStream} />
<button onClick={dismissQrReader}>
</Modal>
We welcome contributions to react-qr-barcode-scanner.
If you have an idea for a new feature or have discovered a bug, please open an issue.
Please yarn build
in the root and docs_src
directories before pushing changes.
Don't forget to add a title and a description explaining the issue you're trying to solve and your proposed solution.
FAQs
A simple React Component using the client's webcam to read barcodes and QR codes.
The npm package react-qr-barcode-scanner receives a total of 9,256 weekly downloads. As such, react-qr-barcode-scanner popularity was classified as popular.
We found that react-qr-barcode-scanner demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Vite releases Rolldown-Vite, a Rust-based bundler preview offering faster builds and lower memory usage as a drop-in replacement for Vite.
Research
Security News
A malicious npm typosquat uses remote commands to silently delete entire project directories after a single mistyped install.
Research
Security News
Malicious PyPI package semantic-types steals Solana private keys via transitive dependency installs using monkey patching and blockchain exfiltration.