Skip to content

Commit 6664223

Browse files
Allen-DynamsoftAllen-Dynamsoft
committed
-feat: add selectPhoto and takePhoto function
1 parent 4ffcde6 commit 6664223

3 files changed

Lines changed: 181 additions & 17 deletions

File tree

‎BarcodeReaderSimpleSample/App.js‎

Lines changed: 161 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,141 @@
1-
import React from 'react';
2-
import {Button, View} from 'react-native';
1+
import React, {useState} from 'react';
2+
import {
3+
Button,
4+
Modal,
5+
PermissionsAndroid,
6+
StyleSheet,
7+
Text,
8+
TouchableOpacity,
9+
View,
10+
} from 'react-native';
311
import {NavigationContainer} from '@react-navigation/native';
412
import {createNativeStackNavigator} from '@react-navigation/native-stack';
513
import BarcodeScanner from './BarcodeScanner';
6-
import {DynamsoftBarcodeReader} from 'henry-capture-vision-react-native';
14+
import {
15+
BarcodeResult,
16+
DCVBarcodeReader,
17+
EnumDBRPresetTemplate,
18+
} from 'henry-capture-vision-react-native';
19+
import {launchCamera, launchImageLibrary} from 'react-native-image-picker';
20+
21+
let mdbr;
22+
23+
const option = {
24+
mediaType: 'photo',
25+
maxWidth: 2000,
26+
maxHeight: 2000,
27+
quality: 0.8,
28+
};
29+
30+
const requestPermissions = async () => {
31+
try {
32+
if (
33+
!(await PermissionsAndroid.check(PermissionsAndroid.PERMISSIONS.CAMERA))
34+
) {
35+
await PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.CAMERA);
36+
}
37+
} catch (err) {
38+
console.log(err);
39+
}
40+
};
41+
42+
const decodeFile = async filePath => {
43+
try {
44+
return await mdbr.decodeFile(filePath);
45+
} catch (err) {
46+
return null;
47+
}
48+
};
49+
50+
const mergeResultsText = (results: BarcodeResult[]) => {
51+
let str = '';
52+
if (results && results.length > 0) {
53+
for (let i = 0; i < results.length; i++) {
54+
str +=
55+
results[i].barcodeFormatString + ': ' + results[i].barcodeText + ' \n';
56+
}
57+
} else {
58+
str = 'No barcode detected.';
59+
}
60+
return str;
61+
};
62+
63+
const useImagePicker = (imagePickerLauncher, setModalVisible, setModalText) => {
64+
imagePickerLauncher(option).then(res => {
65+
if (res.didCancel) {
66+
setModalVisible(false);
67+
return false;
68+
}
69+
decodeFile(res.assets[0].uri.split('file://')[1]).then(results => {
70+
let str = mergeResultsText(results);
71+
setModalVisible(true);
72+
setModalText(str);
73+
});
74+
});
75+
setModalText('Decoding...');
76+
setModalVisible(true);
77+
};
778

879
function HomeScreen({navigation}) {
980
(async () => {
1081
// Initialize the license so that you can use full feature of the Barcode Reader module.
1182
try {
12-
await DynamsoftBarcodeReader.initLicense('DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9');
83+
await DCVBarcodeReader.initLicense(
84+
'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9',
85+
);
86+
87+
mdbr = await DCVBarcodeReader.createInstance();
88+
await mdbr.updateRuntimeSettings(
89+
EnumDBRPresetTemplate.IMAGE_READ_RATE_FIRST,
90+
);
1391
} catch (e) {
1492
console.log(e);
1593
}
1694
})();
1795

96+
const [modalVisible, setModalVisible] = useState(false);
97+
const [modalText, setModalText] = useState('');
98+
1899
return (
19-
<View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
100+
<View style={styles.contentView}>
101+
<Modal
102+
animationType="slide"
103+
transparent={true}
104+
visible={modalVisible}
105+
onRequestClose={() => {
106+
setModalVisible(!modalVisible);
107+
}}>
108+
<TouchableOpacity
109+
activeOpacity={1}
110+
onPress={() => {
111+
console.log('false');
112+
setModalVisible(false);
113+
}}
114+
style={styles.centeredView}>
115+
<View style={styles.modalView}>
116+
<Text style={styles.modalText}>{modalText}</Text>
117+
</View>
118+
</TouchableOpacity>
119+
</Modal>
120+
121+
<Button
122+
title="Take Photo"
123+
onPress={() => {
124+
requestPermissions().then(() => {
125+
// eslint-disable-next-line react-hooks/rules-of-hooks
126+
useImagePicker(launchCamera, setModalVisible, setModalText);
127+
});
128+
}}
129+
/>
130+
<View style={styles.splitView} />
131+
<Button
132+
title="Select Photo"
133+
onPress={() => {
134+
// eslint-disable-next-line react-hooks/rules-of-hooks
135+
useImagePicker(launchImageLibrary, setModalVisible, setModalText);
136+
}}
137+
/>
138+
<View style={styles.splitView} />
20139
<Button
21140
title="Start Scanning"
22141
onPress={() => navigation.navigate('Barcode')}
@@ -38,4 +157,41 @@ function App() {
38157
);
39158
}
40159

160+
const styles = StyleSheet.create({
161+
contentView: {
162+
flex: 1,
163+
alignItems: 'center',
164+
justifyContent: 'center',
165+
flexDirection: 'column',
166+
},
167+
centeredView: {
168+
flex: 1,
169+
backgroundColor: '#00000000',
170+
justifyContent: 'center',
171+
alignItems: 'center',
172+
marginTop: 20,
173+
},
174+
modalView: {
175+
margin: 20,
176+
backgroundColor: 'white',
177+
borderRadius: 20,
178+
padding: 35,
179+
alignItems: 'center',
180+
shadowColor: '#000',
181+
shadowOffset: {
182+
width: 0,
183+
height: 2,
184+
},
185+
shadowOpacity: 0.25,
186+
shadowRadius: 4,
187+
elevation: 5,
188+
},
189+
modalText: {
190+
textAlign: 'center',
191+
},
192+
splitView: {
193+
height: 100,
194+
},
195+
});
196+
41197
export default App;

‎BarcodeReaderSimpleSample/BarcodeScanner.js‎

Lines changed: 19 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import React from 'react';
2-
import {Text, Dimensions} from 'react-native';
2+
import {Text} from 'react-native';
33
import {
44
DynamsoftBarcodeReader,
55
DynamsoftCameraView,
66
EnumBarcodeFormat,
7-
EnumTorchState
7+
EnumTorchState,
88
} from 'henry-capture-vision-react-native';
99

1010
class BarcodeScanner extends React.Component {
@@ -16,6 +16,8 @@ class BarcodeScanner extends React.Component {
1616
// Create a barcode reader instance.
1717
this.reader = await DynamsoftBarcodeReader.createInstance();
1818

19+
await this.reader.resetRuntimeSettings();
20+
1921
// Get the current runtime settings of the barcode reader.
2022
let settings = await this.reader.getRuntimeSettings();
2123

@@ -24,16 +26,20 @@ class BarcodeScanner extends React.Component {
2426
settings.expectedBarcodesCount = 0;
2527

2628
// Set the barcode format to read.
27-
settings.barcodeFormatIds = EnumBarcodeFormat.BF_ONED | EnumBarcodeFormat.BF_QR_CODE | EnumBarcodeFormat.BF_PDF417 | EnumBarcodeFormat.BF_DATAMATRIX;
29+
settings.barcodeFormatIds =
30+
EnumBarcodeFormat.BF_ONED |
31+
EnumBarcodeFormat.BF_QR_CODE |
32+
EnumBarcodeFormat.BF_PDF417 |
33+
EnumBarcodeFormat.BF_DATAMATRIX;
2834

2935
// Apply the new runtime settings to the barcode reader.
3036
await this.reader.updateRuntimeSettings(settings);
3137

32-
// Add a result listener. The result listener will handle callback when barcode result is returned.
33-
this.reader.addResultListener((results) => {
38+
// Add a result listener. The result listener will handle callback when barcode result is returned.
39+
this.reader.addResultListener(results => {
3440
// Update the newly detected barcode results to the state.
35-
this.setState({results: results})
36-
})
41+
this.setState({results: results});
42+
});
3743

3844
// Enable video barcode scanning.
3945
// If the camera is opened, the barcode reader will start the barcode decoding thread when you triggered the startScanning.
@@ -60,24 +66,25 @@ class BarcodeScanner extends React.Component {
6066
let results = this.state.results;
6167
if (results && results.length > 0) {
6268
for (var i = 0; i < results.length; i++) {
63-
barcode_text += results[i].barcodeFormatString + ':' + results[i].barcodeText + '\n';
69+
barcode_text +=
70+
results[i].barcodeFormatString + ':' + results[i].barcodeText + '\n';
6471
}
6572
}
6673

6774
return (
6875
<DynamsoftCameraView
6976
style={{
70-
flex: 1
77+
flex: 1,
7178
}}
7279
ref={ref => {
7380
this.scanner = ref;
7481
}}
7582
overlayVisible={true}
7683
torchButton={{
77-
visible: true
84+
visible: true,
7885
}}
79-
torchState={ EnumTorchState.OFF }
80-
// scanRegionVisible={true}
86+
torchState={EnumTorchState.OFF}
87+
// scanRegionVisible={true}
8188
// scanRegion={region} // Set scan region.
8289
>
8390
<Text

‎BarcodeReaderSimpleSample/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
"henry-capture-vision-react-native": "^1.1.2",
1616
"react": "17.0.2",
1717
"react-native": "0.67.2",
18+
"react-native-image-picker": "^4.10.0",
1819
"react-native-safe-area-context": "^4.2.5",
1920
"react-native-screens": "^3.13.1"
2021
},

0 commit comments

Comments
 (0)