Comments (8)
Switching to using the worklet hook fixed the issue.
import React, { useEffect, useState } from "react"
import { Image, View } from "react-native"
import { useQRData } from "app/hooks/useQRAddress"
import { Camera, useCameraDevices, useFrameProcessor } from "react-native-vision-camera"
import { useNavigation } from "app/navigation/schema"
import { scanBarcodes, BarcodeFormat, Barcode } from "vision-camera-code-scanner"
import { runOnJS } from "react-native-reanimated"
export const QRScanner: React.FC = () => {
const navigation = useNavigation()
const { setQRData } = useQRData()
const [hasPermission, setHasPermission] = React.useState(false)
const devices = useCameraDevices()
const device = devices.back
const [barcodes, setBarcodes] = useState<Barcode[]>([])
const frameProcessor = useFrameProcessor(frame => {
"worklet"
const detectedBarcodes = scanBarcodes(frame, [BarcodeFormat.QR_CODE])
runOnJS(setBarcodes)(detectedBarcodes)
}, [])
const requestPermissions = async () => {
const status = await Camera.requestCameraPermission()
setHasPermission(status === "authorized")
}
useEffect(() => {
requestPermissions()
}, [])
useEffect(() => {
if (barcodes.length > 0) {
setQRData(barcodes[0].displayValue)
navigation.goBack()
}
}, [barcodes, navigation, setQRData])
return (
<View style={{ flex: 1 }}>
{device !== null && hasPermission && (
<>
<Camera
device={device}
isActive={true}
frameProcessor={frameProcessor}
frameProcessorFps={5}
style={{ position: "absolute", top: 0, left: 0, right: 0, bottom: 0 }}
/>
<Image
source={require("../../assets/images/overlay.png")}
style={{ height: "100%", width: "100%", position: "absolute", top: 0, zIndex: 100 }}
/>
</>
)}
</View>
)
}
from vision-camera-code-scanner.
this works. Thanks @kierangillen
from vision-camera-code-scanner.
I've tried multiple times
Show exactly how
from vision-camera-code-scanner.
@alexrififi I tried the setup following the docs, camera and everything works but NOTHING happens when i bring barcode/qrcode in front of the camera
from vision-camera-code-scanner.
same issue here, I also followed the doc and set up all, I am sure it detects the barcode but barcodes/detected barcodes getting an empty array / undefined simultaneously,
from vision-camera-code-scanner.
On hook useScanBarcodes, you need pass a array of types, try change the bar code format passed.
These are the options available
export declare enum BarcodeFormat {
UNKNOWN = -1,
ALL_FORMATS = 0,
CODE_128 = 1,
CODE_39 = 2,
CODE_93 = 4,
CODABAR = 8,
DATA_MATRIX = 16,
EAN_13 = 32,
EAN_8 = 64,
ITF = 128,
QR_CODE = 256,
UPC_A = 512,
UPC_E = 1024,
PDF417 = 2048,
AZTEC = 4096
}
const [frameProcessor, barcodes] = useScanBarcodes([BarcodeFormat.EAN_13], {
checkInverted: true,
});
from vision-camera-code-scanner.
Did it, infact I'm trying the exact component that's given in example but still it's not working. It's not even detecting the barcode, the component is not re rendered at all @matheusmhq
from vision-camera-code-scanner.
I'm also seeing the same issue.
from vision-camera-code-scanner.
Related Issues (20)
- XCode build failure with "ld: symbol(s) not found for architecture arm64" HOT 10
- Should we create a new public fork for this repository? HOT 8
- ERROR ReferenceError: Can't find variable: _setGlobalConsole HOT 3
- Canβt recognize the QR code of Etherscan. HOT 2
- Could not build Objective-C module 'vision_camera_code_scanner' HOT 9
- scanBarcodes returns undefined upon scanning a QR code HOT 6
- The camera flickers when using frameProcessor HOT 1
- Warning: Can't perform a React state update on an unmounted component. HOT 2
- Add Auto zoom to Scan QR code HOT 1
- Port to react-native-vision-camera v3 HOT 10
- Unable to build with Vision Camera 3.0.0-rc4 HOT 29
- Failed to build in Apple M1 HOT 4
- DO NOT USE THIS LIBRARY, THIS DOES NOT WORK AT ALL HOT 6
- This Package needs update to support RNVC v3 HOT 4
- MRZ Scan ? HOT 2
- Crashes on startup on Xcode 15 HOT 7
- Problem with react native vision camera v3 HOT 7
- ERROR Frame Processor threw an error: Property '__scanOCR' doesn't exist HOT 2
- [ios] Crash when app reloads
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vision-camera-code-scanner.