@ohmi/react-native-camera

v4.2.1-1.4.2

Published

4 months ago

A Camera component for React Native. Also reads barcodes.

Downloads

0High
0Medium
0Low

barcode camera code native qr react react-native

模板版本：v0.2.2

[!TIP] Gitee 地址

介绍

本项目基于react-native-camera开发。

安装与使用

请到三方库的 Releases 发布地址查看配套的版本信息：@ohmi/react-native-camera Releases 。对于未发布到npm的旧版本，请参考安装指南安装tgz包。

进入到工程目录并输入以下命令：

npm

npm install @ohmi/react-native-camera

yarn

yarn add @ohmi/react-native-camera

下面的代码展示了这个库的基本使用场景：

[!WARNING] 使用时 import 的库名不变。

photo example

import React, {useState, useRef} from 'react';
import {StyleSheet, Text, View, Button, Image} from 'react-native';
import {RNCamera} from 'react-native-camera';

export const PhotoDemo = () => {
  const cameraRef = useRef(null);
  const [capturedImage, setCapturedImage] = useState(null);

  const takePicture = async () => {
    if (cameraRef.current) {
      try {
        const options = {quality: 0.5, base64: false};
        const data = await cameraRef.current.takePictureAsync(options);
        setCapturedImage(data.uri);
      } catch (error) {
        console.error('拍照出错:', error);
      }
    }
  };

  return (
    <View style={styles.container}>
      {capturedImage ? (
        <Image source={{uri: capturedImage}} style={styles.capturedImage} />
      ) : (
        <RNCamera
          ref={cameraRef}
          style={styles.preview}
          type={RNCamera.Constants.Type.back}
          flashMode={RNCamera.Constants.FlashMode.off}
        />
      )}
      <Button title="拍照" onPress={takePicture} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  preview: {
    width: 300,
    height: 400,
    marginBottom: 20,
  },
  capturedImage: {
    width: 300,
    height: 400,
    marginBottom: 20,
  },
});

video example

import React, {useState, useRef} from 'react';
import {StyleSheet, Text, View, Button} from 'react-native';
import {RNCamera} from 'react-native-camera';

export const VideoDemo = () => {
  const cameraRef = useRef(null);
  const [isRecording, setIsRecording] = useState(false);
  const [isPaused, setIsPaused] = useState(false);
  const [videoUri, setVideoUri] = useState(null);

  const startRecording = async () => {
    if (cameraRef.current) {
      try {
        const options = {quality: RNCamera.Constants.VideoQuality['720p']};
        const videoRecordPromise = cameraRef.current.recordAsync(options);

        if (videoRecordPromise) {
          setIsRecording(true);
          const data = await videoRecordPromise;
          setVideoUri(data.uri);
          setIsRecording(false);
        }
      } catch (error) {
        console.error('录制视频出错:', error);
      }
    }
  };

  const stopRecording = () => {
    if (cameraRef.current) {
      cameraRef.current.stopRecording();
      setIsRecording(false);
    }
  };

  const pauseRecording = () => {
    if (cameraRef.current) {
      cameraRef.current.pausePreview();
      setIsPaused(true);
    }
  };

  const resumeRecording = () => {
    if (cameraRef.current) {
      cameraRef.current.resumePreview();
      setIsPaused(false);
    }
  };

  return (
    <View style={styles.container}>
      <RNCamera
        ref={cameraRef}
        style={styles.preview}
        type={RNCamera.Constants.Type.back}
        flashMode={RNCamera.Constants.FlashMode.off}
        captureAudio={true}
        onRecordingStart={()=>{}}
      />
      <View style={styles.buttonContainer}>
        {!isRecording && <Button title="开始录制" onPress={startRecording} />}
        {isRecording && !isPaused && (
          <Button title="暂停录制" onPress={pauseRecording} />
        )}
        {isRecording && isPaused && (
          <Button title="恢复录制" onPress={resumeRecording} />
        )}
        {isRecording && <Button title="停止录制" onPress={stopRecording} />}
      </View>
      {videoUri && (
        <Text style={styles.videoUriText}>视频保存路径: {videoUri}</Text>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  preview: {
    width: 300,
    height: 400,
    marginBottom: 20,
  },
  buttonContainer: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    width: '100%',
    backgroundColor: '#000',
    padding: 4,
  },
  videoUriText: {
    textAlign: 'center',
  },
  videoPlayer: {
    width: 300,
    height: 400,
    marginBottom: 20,
  },
});

Link

目前 HarmonyOS 暂不支持 AutoLink，所以 Link 步骤需要手动配置。

首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 harmony

1.在工程根目录的 `oh-package.json` 添加 overrides字段

{
  ...
  "overrides": {
    "@rnoh/react-native-openharmony" : "./react_native_openharmony"
  }
}

2.引入原生端代码

目前有两种方法：

通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）；
直接链接源码。

方法一：通过 har 包引入 (推荐)

[!TIP] har 包位于三方库安装路径的 harmony 文件夹下。

打开 entry/oh-package.json5，添加以下依赖

"dependencies": {
    "@rnoh/react-native-openharmony": "file:../react_native_openharmony",
    "@ohmi/react-native-camera": "file:../../node_modules/@ohmi/react-native-camera/harmony/camera.har"
  }

点击右上角的 sync 按钮

或者在终端执行：

cd entry
ohpm install

方法二：直接链接源码

[!TIP] 如需使用直接链接源码，请参考直接链接源码说明

3.配置 CMakeLists 和引入 RTNCameraPackage

打开 entry/src/main/cpp/CMakeLists.txt，添加：

project(rnapp)
cmake_minimum_required(VERSION 3.4.1)
set(CMAKE_SKIP_BUILD_RPATH TRUE)
set(RNOH_APP_DIR "${CMAKE_CURRENT_SOURCE_DIR}")
set(NODE_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../node_modules")
+ set(OH_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules")
set(RNOH_CPP_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../../react-native-harmony/harmony/cpp")
set(LOG_VERBOSITY_LEVEL 1)
set(CMAKE_ASM_FLAGS "-Wno-error=unused-command-line-argument -Qunused-arguments")
set(CMAKE_CXX_FLAGS "-fstack-protector-strong -Wl,-z,relro,-z,now,-z,noexecstack -s -fPIE -pie")
set(WITH_HITRACE_SYSTRACE 1) # for other CMakeLists.txt files to use
add_compile_definitions(WITH_HITRACE_SYSTRACE)

add_subdirectory("${RNOH_CPP_DIR}" ./rn)

# RNOH_BEGIN: manual_package_linking_1
add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package)
+ add_subdirectory("${OH_MODULES}/@ohmi/react-native-camera/src/main/cpp" ./camera)
# RNOH_END: manual_package_linking_1

file(GLOB GENERATED_CPP_FILES "./generated/*.cpp")

add_library(rnoh_app SHARED
    ${GENERATED_CPP_FILES}
    "./PackageProvider.cpp"
    "${RNOH_CPP_DIR}/RNOHAppNapiBridge.cpp"
)
target_link_libraries(rnoh_app PUBLIC rnoh)

# RNOH_BEGIN: manual_package_linking_2
target_link_libraries(rnoh_app PUBLIC rnoh_sample_package)
+ target_link_libraries(rnoh_app PUBLIC rnoh_camera)
# RNOH_END: manual_package_linking_2

打开 entry/src/main/cpp/PackageProvider.cpp，添加：

#include "RNOH/PackageProvider.h"
#include "generated/RNOHGeneratedPackage.h"
#include "SamplePackage.h"
+ #include "RTNCameraPackage.h"

using namespace rnoh;

std::vector<std::shared_ptr<Package>> PackageProvider::getPackages(Package::Context ctx) {
    return {
        std::make_shared<RNOHGeneratedPackage>(ctx),
        std::make_shared<SamplePackage>(ctx),
+       std::make_shared<RTNCameraPackage>(ctx),
    };
}

4.在 ArkTs 侧引入 RTNCameraView 组件

找到 function buildCustomRNComponent()，一般位于 entry/src/main/ets/pages/index.ets 或 entry/src/main/ets/rn/LoadBundle.ets，添加：

  ...
+ import { RTNCameraView } from "@ohmi/react-native-camera";

@Builder
export function buildCustomRNComponent(ctx: ComponentBuilderContext) {
  ...
+ if (ctx.componentName === RTNCameraView.NAME) {
+   RTNCameraView({
+     ctx: ctx.rnComponentContext,
+     tag: ctx.tag,
+   })
+ }
...
}
...

在entry/src/main/ets/pages/index.ets中，如果当前文件中存在arkTsComponentNames数组(后续版本新增内容)，则需要在其中追加：RTNCameraView.NAME;

  ...
 const arkTsComponentNames: Array<string> = [..., RTNCameraView.NAME]; 
  ...

5.在 ArkTs 侧引入 RTNCameraPackage

打开 entry/src/main/ets/RNPackagesFactory.ts，添加：

  ...
+ import { RTNCameraPackage } from "@ohmi/react-native-camera/ts";

export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
  return [
    new SamplePackage(ctx),
+   new RTNCameraPackage(ctx),
  ];
}

6.运行

点击右上角的 sync 按钮

或者在终端执行：

cd entry
ohpm install

然后编译、运行即可。

约束与限制

兼容性

本文档内容基于以下版本验证通过：

RNOH：0.72.50; SDK：5.0.2.126 ; IDE：DevEco Studio 5.0.7.210; ROM：5.0.0.135;

权限要求

以下权限中有system_basic 权限，而默认的应用权限是 normal ，只能使用 normal 等级的权限，所以可能会在安装hap包时报错9568289，请参考文档修改应用等级为 system_basic

在 entry 目录下的module.json5中添加权限

打开 entry/src/main/module.json5，添加：

...
"requestPermissions": [
+  {
+    "name": "ohos.permission.CAMERA",
+    "reason": "$string:camera_reason",
+    "usedScene": {
+      "abilities": [
+        "EntryAbility"
+      ],
+      "when":"inuse"
+    }
+  },
+  {
+    "name": "ohos.permission.MICROPHONE",
+    "reason": "$string:microphone_reason",
+    "usedScene": {
+      "abilities": [
+        "EntryAbility"
+      ],
+      "when":"inuse"
+    }
+  },
]

在 entry 目录下添加申请以上权限的原因

打开 entry/src/main/resources/base/element/string.json，添加：

...
{
  "string": [
+    {
+      "name": "camera_reason",
+      "value": "使用相机"
+    },
+    {
+      "name": "microphone_reason",
+      "value": "使用麦克风"
+    },
  ]
}

鸿蒙属性要求

onRecordingStart：开始录制视频的回调,(由于鸿蒙平台差异，如果是视频录制模式，此参数必填，拍照模式不用填写)，可参照视频录制功能demo实现。

属性

[!TIP] "Platform"列表示该属性在原三方库上支持的平台。

[!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。

| Name | Description | Type | Required | Platform | HarmonyOS Support | | ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------- | -------- | -------- | ----------------- | | zoom | This property specifies the zoom value of the camera. Ranges from 0 to 1. Default to 0 | number | no | All | yes | | maxZoom | The maximum zoom value of the camera. Defaults to 0. | number | no | All | yes | | type | This property defines which camera on the phone the component is using. Possible values: | 'front'/'back' | no | All | yes | | focusMode | Camera focus mode. Default: on | 'on'/'off' | no | All | yes | | zoomMode | Enable the pinch to zoom gesture. Default: on | 'on'/'off' | no | All | yes | | zoom | Control the zoom. Default: 1.0 | number | no | All | yes | | maxZoom | Maximum zoom allowed (but not beyond what camera allows). Default: undefined (camera default max) | number | no | All | yes | | cameraId | For selecting from multiple cameras on Android devices. See 2492 for more info. Can be retrieved with | string | no | All | yes | | flashMode | Determines the state of the camera flash. Has the following possible states | string | no | All | yes | | ratio | A string representing the camera ratio in the format 'height:width'. Default is "4:3". | string | no | All | yes | | pictureSize | This prop has a different behaviour for Android and iOS and should rarely be set. | string | no | All | yes | | autoFocusPointOfInterest | Setting this property causes the auto focus feature of the camera to attempt to focus on the part of the image at this coordiate. | object | no | all | yes | | captureAudio | Android only. Enable or disable the shutter sound when capturing a photo. Default: true | Boolean | no | Android | yes | | ratioOverlay | Show a guiding overlay in the camera preview for the selected ratio. Does not crop image as of v9.0. Example: '16:9' | String | no | iOS | yes | | ratioOverlayColor | Any color with alpha. Default: '#ffffff77' | String | no | All | yes | | resetFocusTimeout | Dismiss tap to focus after this many milliseconds. Default 0 (disabled). Example: 5000 is 5 seconds. | Number | no | All | yes | | keepAudioSession | (iOS Only) When the camera is unmounted, it will release any audio session it acquired (if captureAudio=true) so other media can continue playing. However, this might not be always desirable (e.g., if video is played afterwards) and can be disabled by setting it to true. Setting this to true, means your app will not release the audio session. Note: other apps might still "steal" the audio session from your app. | Boolean | no | iOS | no | | focusDepth | Manually set camera focus. Only works with autoFocus off. The value 0 is minimum focus depth, 1 is maximum focus depth. For a medium focus depth, for example, you could use 0.5. | number | no | all | no | | whiteBalance | A camera’s white balance setting allows you to control the color temperature in your photos by cooling down or warming up the colors. | string | no | all | yes | | exposure | Value: float from 0 to 1.0, or -1 (default) for auto. | string | no | all | yes | | useNativeZoom | Boolean to turn on native pinch to zoom. Works with the maxZoom property on iOS. | Boolean | no | iOS | yes | | permissionDialogTitle | Android Permissions dialog title | sting | no | android | no | | permissionDialogMessage | Android Permissions dialog message | string | no | android | no | | androidRecordAudioPermissionOptions | Android recording permission options | sting | no | android | no | | androidCameraPermissionOptions | Android camera permission options | sting | no | android | no | | notAuthorizedView | By default a Camera not authorized message will be displayed when access to the camera has been denied, if set displays the passed react element instead of the default one. | element | no | all | yes | | pendingAuthorizationView | By default a will be displayed while the component is waiting for the user to grant/deny access to the camera, if set displays the passed react element instead of the default one. | element | no | all | yes | | rectOfInterest | An {x: , y:, width:, height: } object which defines the rect of interst as normalized coordinates from (0,0) top left corner to (1,1) bottom right corner. | object | no | all | no | | cameraViewDimensions | An {width:, height: } object which defines the width and height of the cameraView. This prop is used to adjust the effect of Aspect Raio for rectOfInterest area on Android | object | no | android | no | | playSoundOnCapture | Boolean to turn on or off the camera's shutter sound (default false). Note that in some countries, the shutter sound cannot be turned off. | boolean | no | all | yes | | playSoundOnRecord | Boolean to turn on or off the camera's record sound (default false) | boolean | no | all | yes | | videoStabilizationMode | The video stabilization mode used for a video recording. | string | no | all | no | | defaultVideoQuality | This option specifies the quality of the video to be taken. The possible values are：2160p,1080p,720p,480p,4:3,288p | string | no | all | yes | | barCodeTypes | An array of barcode types to search for. Defaults to all types listed above. No effect if onBarCodeRead is undefined. | string | no | all | yes | | googleVisionBarcodeType | Like barCodeTypes, but applies to the Firebase MLKit barcode detector. | string | no | all | partially | | googleVisionBarcodeMode | Google Visual bar code pattern | string | no | all | no | | detectedImageInEvent | When detectedImageInEvent is false (default), onBarCodeRead / onBarcodesDetected only gives metadata, but not the image (bytes/base64) itself. | boolean | no | all | yes | | faceDetectionMode | Face detection mode | string | no | all | no | | faceDetectionLandmarks | Face detection coordinates | object | no | all | partially | | faceDetectionClassifications | Facial examination type | string | no | all | no | | onSubjectAreaChanged | This event is triggered when substantial changes are detected in the following objects | function | no | ios | no | | onCameraReady | Camera ready callback | function | no | all | yes | | onMountError | An incorrect callback occurred | function | no | all | yes | | onStatusChange | Callbacks for camera state changes | function | no | all | yes | | onAudioInterrupted | A callback when an audio session is interrupted or cannot be started for any reason | function | no | ios | no | | onAudioConnected | Audio is connected to a callback | function | no | ios | yes | | onPictureTaken | A callback when taking a photo | function | no | ios | yes | | onRecordingStart | Start the callback for recording the video | function | no | ios | yes | | onRecordingEnd | The callback to stop recording the video | function | no | ios | yes | | onTap | Touch the camera preview view's callback | function | no | all | yes | | onDoubleTap | Double-click the callback for the camera preview view | function | no | all | yes | | onBarCodeRead | Scan successful callback | function | no | all | yes | | onGoogleVisionBarcodesDetected | Callback when a Google visual barcode is detected | function | no | all | yes | | onFaceDetectionError | Face detection error callback | function | no | all | yes | | onFacesDetected | Face detection callback | function | no | all | yes | | onTextRecognized | Check the callback when the text is reached | function | no | all | yes |

静态方法

| Name | Description | Type | Required | Platform | HarmonyOS Support | | -------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------- | -------- | ----------------- | | detectFacesAsync | Detect faces in local images. | Promise<Face[]> | No | All | Yes | | takePictureAsync | Returns a promise with TakePictureResponse. | Promise | No | All | Yes | | recordAsync | Returns a promise with RecordResponse. | Promise | All | Yes | Yes | | refreshAuthorizationStatus | Allows to make RNCamera check Permissions again and set status accordingly. | Promise | All | Yes | Yes | | stopRecording | Should be called after recordAsync() to make the promise be fulfilled and get the video uri.. | Promise | All | Yes | Yes | | pausePreview | Pauses the preview. The preview can be resumed again by using resumePreview(). | Promise | All | Yes | Yes | | resumePreview | Resumes the preview after pausePreview() has been called. | Promise | All | Yes | Yes | | getSupportedRatiosAsync | Android only. Returns a promise. The promise will be fulfilled with an object with an array containing strings with all camera aspect ratios supported by the device. | Promise<string[]> | All | Yes | Yes | | checkIfVideoIsValid | Check that the video is valid | Promise | All | Yes | Yes | | getCameraIdsAsync | Returns a promise. The promise will be fulfilled with an array containing objects with all camera IDs and type supported by the device. | Promise<HardwareCamera[]> | All | Yes | Yes | | isRecording | iOS only. Returns a promise. The promise will be fulfilled with a boolean indicating if currently recording is started or stopped. | Promise | All | Yes | Yes |

遗留问题

[ ] onSubjectAreaChanged 不支持：当检测到以下对象发生实质性更改时将触发此事件 issue#1
[ ] keepAudioSession 不支持：保持音频会话 issue#2
[ ] whiteBalance：不支持白平衡 issue#3
[ ] permissionDialogTitle，不支持：配置安卓权限对话框标题 issue#4
[ ] permissionDialogMessage，不支持：配置安卓权限对话框标题 issue#5
[ ] androidRecordAudioPermissionOptions，不支持：配置安卓录音权限选项 issue#6
[ ] androidCameraPermissionOptions，不支持：配置安卓相机权限选项 issue#7
[ ] rectOfInterest，不支持：配置感兴趣的矩形区域属性 issue#8
[ ] googleVisionBarcodeMode issue#9
[ ] cameraViewDimensions，不支持：设置相机尺寸属性 issue#10
[ ] googleVisionBarcodeMode，不支持：设置谷歌视觉条码模式 issue#11
[ ] faceDetectionMode，不支持：设置人脸检测模式 issue#12
[ ] faceDetectionClassifications，不支持：设置面部检查类型 issue#13
[ ] recordAsync，不支持：异步录制视频设置optionissue#14
[ ] faceDetectionLandmarks属性，部分支持缺少脸颊耳朵坐标点issue#15
[ ] onGoogleVisionBarcodesDetected回调函数，兼容性支持,只返回onBarCodeRead部分属性issue#16
[ ] googleVisionBarcodeType属性，兼容性支持barCodeTypes部分支持类型issue#17

其他

开源协议

本项目基于 The MIT License (MIT) ，请自由地享受和参与开源。