สร้างเครื่องสแกน QR: บทช่วยสอนเกี่ยวกับกล้อง React Native

ในบทช่วยสอน React Native Camera นี้ เราจะสร้างแอปตัวอ่านโค้ด QR จะสามารถอ่านรหัส QR ได้แบบเรียลไทม์และแสดงเนื้อหาไปยังหน้าจอเมื่อตรวจพบ เราจะใช้ CLI Quickstart ของ React Native

(หมายเหตุ: หากคุณต้องการความช่วยเหลือในการตั้งค่านี้ คุณสามารถดูหน้าเริ่มต้นใช้งาน React Native ได้เสมอ อย่าลืมคลิกที่ปุ่ม “React Native CLI Quickstart” เนื่องจากจะมีการเลือก “Expo CLI Quickstart” ไว้ล่วงหน้า ในการเขียนบทความนี้)

ทำไมต้อง React Native?

React Native เป็นเฟรมเวิร์กอันทรงคุณค่าที่ยืมกระบวนทัศน์และหลักการออกแบบของ React เพื่อเปิดใช้งานการพัฒนา UI ที่รวดเร็วและข้ามแพลตฟอร์มได้อย่างรวดเร็ว Facebook, Airbnb, Uber และอื่นๆ อีกมากมายมีแอพล่าสุดที่สร้างด้วย React Native แล้ว

React Native Camera คืออะไร?

React Native Camera (RNCamera) เป็น องค์ประกอบ ที่นำไปใช้ได้จริงเมื่อต้องนำฟังก์ชันการทำงานของกล้องไปใช้ในแอป React Native ส่วนประกอบนี้ช่วยให้คุณสื่อสารกับระบบปฏิบัติการดั้งเดิมผ่านฟังก์ชันง่ายๆ บางอย่าง คุณจึงสามารถใช้ฮาร์ดแวร์ของอุปกรณ์ได้ คุณสามารถสร้างแอปโดยใช้ฟังก์ชันเหล่านี้โดยไม่ต้องยุ่งยากกับโค้ดเนทีฟ RNCamera รองรับแล้ว:

• ภาพถ่าย
• วิดีโอ
• การตรวจจับใบหน้า
• การสแกนบาร์โค้ด
• การจดจำข้อความ (Android เท่านั้น)

โปรดทราบว่า RNCamera เคยมาในสองรสชาติ:

1. RNCกล้อง
2. RCTCamera (เลิกใช้แล้ว)

…ดังนั้นโปรดใช้ RNCamera เพื่อให้คุณได้รับการอัปเดตล่าสุดต่อไป

หมายเหตุ: React Native Camera นั้นใช้โมดูลกล้อง Expo เป็นหลัก และการสลับไปมาระหว่างสองสิ่งนี้ทำได้ง่ายมาก

การสร้างแอปแรกของคุณโดยใช้ RNCamera

ก่อนที่เราจะเริ่มต้นเครื่องสแกน React Native QR มีการพึ่งพาบางอย่างที่เราจำเป็นต้องติดตั้ง

การติดตั้งการพึ่งพา RNCamera

การตั้งค่าของเราต้องมี JDK เวอร์ชัน 1.7 ขั้นต่ำ (ซึ่งคุณน่าจะมี) และหากคุณใช้ Android คุณจะต้องใช้ buildToolsVersion ใหม่กว่า 25.0.2 (เพื่อให้แน่ใจว่ามีรายการที่มีรายละเอียดและเป็นปัจจุบันมากขึ้นในเอกสาร)

ขั้นแรก เริ่มต้นด้วยการสร้างโปรเจ็กต์ React Native ใหม่:

 react-native init CameraExample

ตอนนี้ มาปรับใช้เวอร์ชันแรกของ React Native Camera ตัวอย่างบนโทรศัพท์ของเรา

 cd CameraExample react-native run-android

ควรมีลักษณะเหมือนภาพหน้าจอด้านล่าง:

ตอนนี้ได้เวลาติดตั้งแพ็คเกจ react-native-camera ในโครงการของเรา เราจะใช้ตัวเลือก "การติดตั้งอัตโนมัติเป็นส่วนใหญ่พร้อมการตอบสนองแบบเนทีฟ" (มีอย่างอื่นเช่นการติดตั้งอัตโนมัติเป็นส่วนใหญ่ด้วย CocoaPods และการติดตั้งแบบแมนนวล แต่เราจะยึดตามตัวเลือกแรกเนื่องจากจะมีประสิทธิภาพมากที่สุด) เพียงเรียกใช้:

 npm install react-native-camera --save react-native link react-native-camera

คุณต้องเพิ่มการอนุญาตต่อไปนี้ใน android/app/src/main/AndroidManifest.xml :

 package="com.cameraexample"> <uses-permission android:name="android.permission.INTERNET" /> + <uses-permission android:name="android.permission.CAMERA" /> + <uses-permission android:name="android.permission.RECORD_AUDIO"/> + <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" /> + <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> <application android:name=".MainApplication"

คุณจะต้องตั้งค่ากลยุทธ์มิติใน android/app/build.gradle ซึ่งไม่มีค่าเริ่มต้นและคุณจะได้รับข้อผิดพลาดหากคุณไม่ได้กำหนดไว้:

 defaultConfig { applicationId "com.cameraexample" minSdkVersion rootProject.ext.minSdkVersion + missingDimensionStrategy 'react-native-camera', 'general' targetSdkVersion rootProject.ext.targetSdkVersion versionCode 1 versionName "1.0"

หมายเหตุ: โดยปกติ กลยุทธ์มิติข้อมูลควรตั้งค่าเป็นแบบ general ดังข้างต้น อย่างไรก็ตาม คุณสามารถตั้งค่าเป็น mlkit แทนได้ หากคุณต้องการใช้ MLKit สำหรับการจดจำข้อความ/ใบหน้า/บาร์โค้ด

หลังจากการติดตั้ง คุณจะต้องใช้ run-android เพื่อติดตั้งการพึ่งพาใหม่:

 react-native run-android

หากทุกอย่างเป็นไปด้วยดี คุณควรเห็นหน้าจอต้อนรับ React Native เดิมบนอุปกรณ์หรือโปรแกรมจำลองของคุณอีกครั้ง

การตั้งค่ากล้อง

ขั้นแรก เริ่มต้นด้วยการแก้ไข App.js และนำเข้า RNCamera ที่นั่น:

 import { RNCamera } from 'react-native-camera';

ต่อไป เราจะแก้ไขฟังก์ชันการ render เพื่อรวม RNCamera ที่นำเข้าใหม่ของเรา สังเกตแอตทริบิวต์ style ที่เพิ่มลงในกล้องเพื่อให้เต็มหน้าจอ หากไม่มีสไตล์เหล่านี้ คุณอาจไม่เห็นการเรนเดอร์กล้องบนหน้าจอของคุณ เนื่องจากจะไม่ใช้พื้นที่:

 render() { return ( <View style={styles.container}> - <Text style={styles.welcome}>Welcome to React Native!</Text> - <Text style={styles.instructions}>To get started, edit App.js</Text> - <Text style={styles.instructions}>{instructions}</Text> + <RNCamera + ref={ref => { + this.camera = ref; + }} + style={{ + flex: 1, + width: '100%', + }} + > + </RNCamera> </View> ); }

หลังจากเพิ่มโค้ดนี้แล้ว อินเทอร์เฟซของคุณควรเปิดกล้องแบบเต็มหน้าจอ เช่นเดียวกับภาพหน้าจอด้านล่าง:

ตอนนี้เราสามารถเห็นบาร์โค้ด (ดังที่เราเห็นรหัส QR ทดสอบของเราแสดงบนจอภาพด้านบน) แต่เรายังอ่านไม่ได้ ลองใช้อัลกอริธึมของ RNCamera เพื่อจดจำสิ่งที่เขียนอยู่ภายในแต่ละอัน

การอ่านข้อมูลบาร์โค้ด

ในการอ่านข้อมูลบาร์โค้ด เราจะใช้อุปกรณ์ onGoogleVisionBarcodesDetected เพื่อให้เราสามารถเรียกใช้ฟังก์ชันและดึงข้อมูลได้ มาเพิ่มในองค์ประกอบ <RNCamera> และเชื่อมโยงไปยังฟังก์ชัน barcodeRecognized เพื่อดูแล โปรดทราบว่า onGoogleVisionBarcodesDetected จะส่งคืนวัตถุที่มีคุณสมบัติ barcodes ซึ่งมีอาร์เรย์ของบาร์โค้ดทั้งหมดที่รู้จักในกล้อง

หมายเหตุ: เทคโนโลยี onGoogleVisionBarcodesDetected QR code ใช้งานได้บน Android เท่านั้น แต่ถ้าคุณต้องการวิธีการข้ามแพลตฟอร์ม คุณควรเลือกใช้ onBarCodeRead รองรับเพียงบาร์โค้ดเดียวในแต่ละครั้ง โดยใช้เป็นข้อมูลสำรองที่เหลือเป็นแบบฝึกหัดสำหรับผู้อ่าน

<RNCamera> ของเราควรดูแลอย่างไรหลังจากเพิ่ม onGoogleVisionBarcodesDetected :

 <RNCamera ref={ref => { this.camera = ref; }} style={{ flex: 1, width: '100%', }} onGoogleVisionBarcodesDetected={this.barcodeRecognized} > </RNCamera>

และตอนนี้ เราสามารถจัดการบาร์โค้ดใน App.js ด้วยฟังก์ชันด้านล่าง ซึ่งจะเตือนเราเมื่อตรวจพบบาร์โค้ดเท่านั้นและควรแสดงเนื้อหาบนหน้าจอ:

 barcodeRecognized = ({ barcodes }) => { barcodes.forEach(barcode => console.warn(barcode.data)) };

นี่คือลักษณะการทำงาน:

การแสดงภาพซ้อนทับบาร์โค้ด

ภาพหน้าจอก่อนหน้านี้แสดงข้อมูลที่มีอยู่ในบาร์โค้ด แต่ไม่อนุญาตให้เราทราบว่าข้อความใดเป็นของบาร์โค้ดใด สำหรับสิ่งนี้ เราจะเจาะลึกลงไปใน barcodes ที่ส่งคืนจาก onGoogleVisionBarcodesDetected และพยายามระบุบาร์โค้ดแต่ละอันบนหน้าจอของเรา

แต่ก่อนอื่น เราจะต้องบันทึกบาร์โค้ดที่รู้จักลงในสถานะเพื่อให้เราสามารถเข้าถึงได้และแสดงการซ้อนทับตามข้อมูลที่มีอยู่ ตอนนี้เราจะปรับเปลี่ยนฟังก์ชันที่กำหนดไว้ก่อนหน้านี้ให้มีลักษณะดังนี้:

 barcodeRecognized = ({ barcodes }) => this.setState({ barcodes });

ตอนนี้เราจะต้องเพิ่มวัตถุ state ที่เริ่มต้นให้กับอาร์เรย์บาร์โค้ดที่ว่างเปล่าเพื่อไม่ให้เกิดข้อผิดพลาดในฟังก์ชันการ render นเดอร์ของเรา:

 export default class App extends Component<Props> { state = { barcodes: [], } // ...

ตอนนี้เรามาสร้างฟังก์ชัน renderBarCodes ซึ่งควรเพิ่มภายในองค์ประกอบ <RNCamera> :

 <RNCamera ref={ref => { this.camera = ref; }} style={{ flex: 1, width: '100%', }} onGoogleVisionBarcodesDetected={this.barcodeRecognized} > {this.renderBarcodes()} </RNCamera>

ฟังก์ชันนี้ควรนำบาร์โค้ดที่รู้จักจากรัฐมาแสดงบนหน้าจอ:

 renderBarcodes = () => ( <View> {this.state.barcodes.map(this.renderBarcode)} </View> );

โปรดสังเกตว่าการแมปชี้ไปที่การ renderBarcode บาร์โค้ดซึ่งควรแสดงบาร์โค้ดแต่ละรายการบนหน้าจอ ฉันได้เพิ่มสไตล์เล็กน้อยเพื่อให้เราจดจำได้ง่าย:

 renderBarcode = ({ bounds, data }) => ( <React.Fragment key={data + bounds.origin.x}> <View style={{ borderWidth: 2, borderRadius: 10, position: 'absolute', borderColor: '#F00', justifyContent: 'center', backgroundColor: 'rgba(255, 255, 255, 0.9)', padding: 10, ...bounds.size, left: bounds.origin.x, top: bounds.origin.y, }} > <Text style={{ color: '#F00', flex: 1, position: 'absolute', textAlign: 'center', backgroundColor: 'transparent', }}>{data}</Text> </View> </React.Fragment> );

บาร์โค้ดแต่ละอันที่รู้จักมี:

• คุณสมบัติ bounds ที่จะบอกเราว่าพบบาร์โค้ดที่ใดบนหน้าจอของเรา ซึ่งเราจะใช้เพื่อแสดงการซ้อนทับสำหรับบาร์โค้ดนั้น
• คุณสมบัติ data ที่แสดงให้เราเห็นสิ่งที่เข้ารหัสในบาร์โค้ดนั้น
• คุณสมบัติ type ที่บอกเราว่าเป็นบาร์โค้ดประเภทใด (2D, QR ฯลฯ )

การใช้พารามิเตอร์ทั้งสามอย่างที่เรามีในฟังก์ชันการเรนเดอร์ด้านบนจะให้ผลลัพธ์ดังต่อไปนี้:

การปรับใช้ข้ามแพลตฟอร์ม

ดังที่กล่าวไว้ RNCamera ย่อส่วนดั้งเดิมของโมดูลกล้องเป็นภาษาข้ามแพลตฟอร์มสากล สิ่งสำคัญคือต้องทราบว่าคุณลักษณะบางอย่างจะพร้อมใช้งานบนแพลตฟอร์มเดียวเท่านั้นหรืออาจมีวิธีการเขียนบนแพลตฟอร์มอื่นที่ต่างออกไป เพื่อให้แน่ใจว่าสิ่งที่คุณต้องการสร้างได้รับการสนับสนุนบนแพลตฟอร์มทั้งหมดที่คุณต้องการ โปรดอ่านเอกสารประกอบเป็นขั้นตอนแรกเสมอ นอกจากนี้ จะดีกว่าเสมอที่จะทดสอบ Edge Case บนอุปกรณ์ต่างๆ หลังจากที่คุณติดตั้งใช้งานเสร็จแล้ว เพื่อให้คุณมั่นใจในความทนทานของผลิตภัณฑ์ของคุณ

ออกไปและถอดรหัส

ฉันหวังว่าการพัฒนาความเป็นจริงเสริมเล็กน้อยนี้จะเป็นประโยชน์ และตอนนี้คุณมีแอป React Native Camera พื้นฐานที่ทำงานบนโทรศัพท์หรือเครื่องจำลองของคุณ อย่าลังเลที่จะแสดงความคิดเห็นหากคุณมีคำถามหรือคำขอใด ๆ!