Создание QR-сканера: руководство по React Native Camera

В этом руководстве по React Native Camera мы создадим приложение для чтения QR-кода. Он сможет считывать QR-коды в режиме реального времени и отображать их содержимое на экране в момент обнаружения. Мы будем использовать CLI Quickstart React Native.

(Примечание. Если вам нужна помощь в настройке, вы всегда можете обратиться к странице «Начало работы с React Native» — не забудьте нажать кнопку «Быстрый запуск React Native CLI», так как «Быстрый запуск Expo CLI» предварительно выбран во время написания этой статьи.)

Почему React Native?

React Native — ценный фреймворк, который заимствует парадигму и принципы дизайна React, чтобы обеспечить молниеносную кроссплатформенную разработку быстрых пользовательских интерфейсов. Facebook, Airbnb, Uber и многие другие уже создали свои последние приложения с помощью React Native.

Что такое React Native Camera?

React Native Camera (RNCamera) — это обязательный компонент, когда речь идет о реализации функций камеры в приложении React Native. Этот компонент помогает вам взаимодействовать с собственной ОС с помощью некоторых простых функций, чтобы вы могли использовать аппаратное обеспечение устройства. Вы можете создавать свои приложения на основе этих функций, не заморачиваясь нативным кодом. RNCamera уже поддерживает:

• Фотографии
• Ролики
• Распознавание лиц
• Сканирование штрих-кода
• Распознавание текста (только для Android)

Обратите внимание, что RNCamera раньше выпускалась в двух вариантах:

1. RNCamera
2. RCTCamera (устарело)

…поэтому обязательно используйте RNCamera, чтобы получать последние обновления.

Примечание. React Native Camera в значительной степени основан на модуле камеры Expo, и переключаться между ними довольно легко.

Создание вашего первого приложения с помощью RNCamera

Прежде чем мы начнем наш QR-сканер React Native, нам нужно установить некоторые зависимости.

Установка зависимостей 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 , которое содержит массив всех штрих-кодов, распознанных камерой.

Примечание. Технология QR-кода onGoogleVisionBarcodesDetected доступна только на 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 абстрагирует нативные части модуля камеры в универсальный кросс-платформенный язык. Важно отметить, что некоторые функции будут доступны только на одной платформе или могут иметь другой способ написания на другой. Чтобы убедиться, что то, что вы собираетесь создать, поддерживается на всех необходимых вам платформах, всегда читайте документацию в качестве первого шага. Кроме того, всегда лучше протестировать пограничные случаи на разных устройствах после того, как вы закончите реализацию, чтобы быть уверенным в надежности вашего продукта.

Иди вперед и декодируй

Я надеюсь, что этот небольшой опыт разработки дополненной реальности был полезен, и теперь у вас есть базовое приложение React Native Camera, работающее на вашем телефоне или симуляторе. Не стесняйтесь оставлять комментарии, если у вас есть какие-либо вопросы или пожелания!