-
-> [!TIP] [Github address](https://github.com/react-native-oh-library/react-native-camera-kit)
+> [!TIP] [GitHub Repository](https://github.com/react-native-oh-library/react-native-camera-kit)
## Installation and Usage
-Find the matching version information in the release address of a third-party library: [@react-native-oh-library/react-native-camera-kit Releases](https://github.com/react-native-oh-library/react-native-camera-kit/releases). For older versions that are not published to npm, please refer to the [installation guide](/en/tgz-usage-en.md) to install the tgz package.
+Please check the Releases page of the third-party library for compatible version information:
+
+| Third-party Library Version | Release Information | Supported RN Version |
+| ---------- | ------------------------------------------------------------ | ---------- |
+| 14.0.1 | [@react-native-oh-library/react-native-camera-kit Releases](https://github.com/react-native-oh-library/react-native-camera-kit/releases) | 0.72 |
+| 15.1.1 | [@react-native-ohos/react-native-camera-kit Releases]() | 0.77 |
-Go to the project directory and execute the following instruction:
+For older versions not published to npm, please refer to the [Installation Guide](/en/tgz-usage.md) for installing tgz packages.
+Navigate to your project directory and enter the following commands:
#### npm
```bash
+# 0.72
npm install @react-native-oh-tpl/react-native-camera-kit
+
+# 0.77
+npm install @react-native-ohos/react-native-camera-kit
```
#### yarn
```bash
+# 0.72
yarn add @react-native-oh-tpl/react-native-camera-kit
+
+# 0.77
+yarn add @react-native-ohos/react-native-camera-kit
```
-The following code shows the basic use scenario of the repository:
+The following code demonstrates basic usage scenarios of this library:
-> [!WARNING] The name of the imported repository remains unchanged.
+> [!WARNING] The import library name remains unchanged when using.
### camera example
``` js
import React, {useRef, useState} from 'react';
@@ -81,7 +94,7 @@ export const CameraDemo: React.FC = (): JSX.Element => {
/>
-
+
zoom:{zoom}error:{errorStr}photo:{photo}
@@ -157,19 +170,22 @@ const styles = StyleSheet.create({
},
});
-
```
-## Use Codegen
-If this repository has been adapted to `Codegen`, generate the bridge code of the third-party library by using the `Codegen`. For details, see [Codegen Usage Guide](/en/codegen.md).
+## Using Codegen
+
+> [!TIP] 0.77 does not require Codegen
+
+This library has been adapted for `Codegen`. Before using it, you need to proactively generate the bridge code for the third-party library. For details, please refer to the [Codegen Usage Documentation](/en/codegen.md).
+
## Link
-Currently, HarmonyOS does not support AutoLink. Therefore, you need to manually configure the linking.
+Currently, HarmonyOS does not support AutoLink, so the Link step needs to be configured manually.
-Open the `harmony` directory of the HarmonyOS project in DevEco Studio.
+First, open the HarmonyOS project `harmony` in your project using DevEco Studio
-### 1. Adding the overrides Field to oh-package.json5 File in the Root Directory of the Project
+### 1. Add overrides field to `oh-package.json` in the project root directory
```json
{
@@ -180,16 +196,20 @@ Open the `harmony` directory of the HarmonyOS project in DevEco Studio.
}
```
-### 2. Introducing Native Code
+### 2. Import native code
-Currently, two methods are available:
+There are currently two methods:
+1. Import through har package (this method will be deprecated after IDE improves related functions, currently preferred);
+2. Directly link to the source code.
-Method 1 (recommended): Use the HAR file.
+Method 1: Import through har package (recommended)
-> [!TIP] The HAR file is stored in the `harmony` directory in the installation path of the third-party library.
+> [!TIP] The har package is located in the `harmony` folder of the third-party library installation path.
-Open `entry/oh-package.json5` file and add the following dependencies:
+Open `entry/oh-package.json5` and add the following dependencies
+
+- 0.72
```json
"dependencies": {
@@ -198,27 +218,103 @@ Open `entry/oh-package.json5` file and add the following dependencies:
}
```
-Click the `sync` button in the upper right corner.
+- 0.77
+
+```json
+"dependencies": {
+ "@rnoh/react-native-openharmony": "file:../react_native_openharmony",
+ "@react-native-ohos/react-native-camera-kit": "file:../../node_modules/@react-native-ohos/react-native-camera-kit/harmony/camera_kit.har"
+ }
+```
+
+Click the `sync` button in the upper right corner
-Alternatively, run the following instruction on the terminal:
+Or execute in the terminal:
```bash
cd entry
ohpm install
```
-Method 2: Directly link to the source code.
+Method 2: Directly link to source code
+
+> [!TIP] For directly linking to source code, please refer to [Direct Link Source Code Instructions](/en/link-source-code.md)
+
+
+### 3. Configure CMakeLists and introduce CameraKitPackage
+
+> [!TIP] If using version 7.22, please skip this chapter
+
+Open `entry/src/main/cpp/CMakeLists.txt` and add:
+
+```cmake
+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}/@react-native-ohos/react-native-camera-kit/src/main/cpp" ./camera-kit)
+# 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_kit)
+# RNOH_END: manual_package_linking_2
+```
+
+Open `entry/src/main/cpp/PackageProvider.cpp` and add:
+
+```c++
+#include "RNOH/PackageProvider.h"
+#include "generated/RNOHGeneratedPackage.h"
+#include "SamplePackage.h"
++ #include "CameraKitPackage.h"
-> [!TIP] For details, see [Directly Linking Source Code](/en/link-source-code.md).
+using namespace rnoh;
-### 3. Configuring CMakeLists and Introducing xxx Package
+std::vector> PackageProvider::getPackages(Package::Context ctx) {
+ return {
+ std::make_shared(ctx),
+ std::make_shared(ctx),
++ std::make_shared(ctx)
+ };
+}
+```
+
+
+### 4. Introduce RTNCameraKitView component on the ArkTs side
-Open `entry/src/main/cpp/CMakeLists.txt` and add the following code:
+Find `function buildCustomRNComponent()`, usually located in `entry/src/main/ets/pages/index.ets` or `entry/src/main/ets/rn/LoadBundle.ets`, add:
```diff
...
+// 0.72
+ import { RTNCameraKitView } from "@react-native-oh-tpl/react-native-camera-kit";
+// 0.77
++ import { RTNCameraKitView } from "@react-native-ohos/react-native-camera-kit";
+
@Builder
export function buildCustomRNComponent(ctx: ComponentBuilderContext) {
...
@@ -231,27 +327,27 @@ export function buildCustomRNComponent(ctx: ComponentBuilderContext) {
...
}
...
-> [!TIP] If the repository uses a mixed solution, the component name needs to be added.
-
-Find the constant `arkTsComponentNames` in `entry/src/main/ets/pages/index.ets` or `entry/src/main/ets/rn/LoadBundle.ets` and add the component name to the array.
+```
+In `entry/src/main/ets/pages/index.ets`, if there is an `arkTsComponentNames` array (new content in later versions) in the current file, you need to append: `RTNCameraKitView.NAME`;
-```diff
-const arkTsComponentNames: Array = [
- SampleView.NAME,
- GeneratedSampleView.NAME,
- PropsDisplayer.NAME,
-+ RTNCameraKitView.NAME
- ];
+```ts
+ ...
+ const arkTsComponentNames: Array = [..., RTNCameraKitView.NAME];
+ ...
```
-### 4. Introducing RTNCameraKitPackage to ArkTS
+### 5. Introduce RTNCameraKitPackage on the ArkTs side
-Open the `entry/src/main/ets/RNPackagesFactory.ts` file and add the following code:
+Open `entry/src/main/ets/RNPackagesFactory.ts` and add:
```diff
...
+// 0.72
+ import { RTNCameraKitPackage } from "@react-native-oh-tpl/react-native-camera-kit/ts";
+// 0.77
++ import { RTNCameraKitPackage } from "@react-native-ohos/react-native-camera-kit/ts";
+
export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
return [
new SamplePackage(ctx),
@@ -260,34 +356,39 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
}
```
-### 5. Running
+### 5. Run
-Click the `sync` button in the upper right corner.
+Click the `sync` button in the upper right corner
-Alternatively, run the following instruction on the terminal:
+Or execute in the terminal:
```bash
cd entry
ohpm install
```
-Then build and run the code.
+Then compile and run.
-## Constraints
+## Constraints and Limitations
### Compatibility
-To use this repository, you need to use the correct React-Native and RNOH versions. In addition, you need to use DevEco Studio and the ROM on your phone.
+To use this library, you need to use the correct React-Native and RNOH versions. Additionally, you need to use compatible DevEco Studio and phone ROM versions.
+
+Please check the corresponding Releases page of the third-party library for Release compatibility information:
-Check the release version information in the release address of the third-party library: [@react-native-oh-library/react-native-camera-kit Releases](https://github.com/react-native-oh-library/react-native-camera-kit/releases)
+| Third-party Library Version | Release Information | Supported RN Version |
+| ---------- | ------------------------------------------------------------ | ---------- |
+| 14.0.1 | [@react-native-oh-library/react-native-camera-kit Releases](https://github.com/react-native-oh-library/react-native-camera-kit/releases) | 0.72 |
+| 15.1.1 | [@react-native-ohos/react-native-camera-kit Releases]() | 0.77 |
### Permission Requirements
-The following permissions include the `system_basic` permission, but the default application permission is `normal`. Only the `normal` permission can be used. Therefore, the error * 9568289 * * * may be reported during the installation of the HAP package. For details, see [Document](https://developer.huawei.com/consumer/en/doc/harmonyos-guides-V5/bm-tool-V5#EN_TOPIC_0000001884757326__%E5%AE%89%E8%A3%85hap%E6%97%B6%E6%8F%90%E7%A4%BAcode9568289-error-install-failed-due-to-grant-request-permissions-failed) Change the application level to `system_basic`.
+The following permissions include `system_basic` permission, while the default application permission is `normal`, which can only use `normal` level permissions. Therefore, you may encounter error **9568289** when installing the hap package. Please refer to the [documentation](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/bm-tool-V5#ZH-CN_TOPIC_0000001884757326__%E5%AE%89%E8%A3%85hap%E6%97%B6%E6%8F%90%E7%A4%BAcode9568289-error-install-failed-due-to-grant-request-permissions-failed) to modify the application level to `system_basic`
-#### Add permissions to the module.json5 file in the entry directory.
+#### Add permissions to module.json5 in the entry directory
-Open `entry/src/main/module.json5` and add the following information:
+Open `entry/src/main/module.json5` and add:
```diff
...
@@ -325,9 +426,9 @@ Open `entry/src/main/module.json5` and add the following information:
]
```
-#### Add the reason for applying for the preceding permission to the entry directory.
+#### Add reasons for requesting the above permissions in the entry directory
-Open `entry/src/main/resources/base/element/string.json` and add the following information:
+Open `entry/src/main/resources/base/element/string.json` and add:
```diff
...
@@ -335,58 +436,58 @@ Open `entry/src/main/resources/base/element/string.json` and add the following i
"string": [
+ {
+ "name": "camera_reason",
-+ "value": "camera_reason"
++ "value": "Using camera"
+ },
+ {
+ "name": "location_reason",
-+ "value": "location_reason"
++ "value": "Getting current location"
+ },
+ {
+ "name": "microphone_reason",
-+ "value": "microphone_reason"
++ "value": "Using microphone"
+ },
]
}
```
-## Properties
-
-> [!tip] The **Platform** column indicates the platform where the properties are supported in the original third-party library.
-
-> [!tip] If the value of **HarmonyOS Support** is **yes**, it means that the HarmonyOS platform supports this property; **no** means the opposite; **partially** means some capabilities of this property are supported. The usage method is the same on different platforms and the effect is the same as that of iOS or Android.
-
-**Camera**: CameraComponent
-
+## Props
+
+> [!TIP] The 'Platform' list shows the platforms supported by this attribute on the original third-party library.
+
+> [!TIP] The column 'HarmonyOS Support' marked as' yes' indicates that the HarmonyOS platform supports this attribute; No means not supported; Partially indicates partial support. The usage method is consistent across platforms, and the effect is comparable to that of iOS or Android.
+
+**Camera Props**: Camera components
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ---------------------------- | ------------------------------------------------------------ | --------------------- | -------- | -------- | ----------------- |
+| ref | Reference on the camera view | Ref | no | All | yes |
+| style | Style to apply on the camera view | StyleProp\ | no | All | yes |
+| flashMode | Camera flash mode. Default: FlashMode.FLASH_MODE_CLOSE | FlashMode.FLASH_MODE_CLOSE / FlashMode.FLASH_MODE_OPEN / FlashMode.FLASH_MODE_AUTO / FlashMode.FLASH_MODE_ALWAYS_OPEN | no | All | yes |
+| focusMode | Camera focus mode. Default: FOCUS_MODE_AUT | FOCUS_MODE_CONTINUOUS_AUTO / FOCUS_MODE_AUTO / FOCUS_MODE_LOCKED / FocusMode.FOCUS_MODE_MANUAL | 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 |
+| onZoom | Callback when user makes a pinch gesture, regardless of what the zoom prop was set to. Returned event contains zoom. Ex: onZoom={(e) => console.log(e.nativeEvent.zoom)}. | Function | no | All | yes |
+| torchMode | Toggle flash light when camera is active. Default: off | 'on'`/`'off' | no | All | yes |
+| cameraType | Choose what camera to use. Default: `CameraType. | 'front'/'back' | no | All | yes |
+| onOrientationChange | Callback when physical device orientation changes. Returned event contains orientation. Ex: onOrientationChange={(event) => console.log(event.nativeEvent.orientation)}. Use import { Orientation } from 'react-native-camera-kit'; if (event.nativeEvent.orientation === Orientation.PORTRAIT) { ... } to understand the new value | Function | no | iOS | yes |
+| onError | Android only. Callback when camera fails to initialize. Ex: onError={(e) => console.log(e.nativeEvent.errorMessage)}. | Function | no | Android | yes |
+| shutterPhotoSound | 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 |
+| resetFocusWhenMotionDetected | Dismiss tap to focus when focus area content changes. Native iOS feature, see documentation: https://developer.apple.com/documentation/avfoundation/avcapturedevice/1624644-subjectareachangemonitoringenabl?language=objc). Default true. | Boolean | no | iOS | no |
+| resizeMode | Determines the scaling and cropping behavior of content within the view. cover (resizeAspectFill on iOS) scales the content to fill the view completely, potentially cropping content if its aspect ratio differs from the view. contain (resizeAspect on iOS) scales the content to fit within the view's bounds without cropping, ensuring all content is visible but may introduce letterboxing. Default behavior depends on the specific use case. | 'cover' / 'contain' | no | iOS | no |
+| onCaptureButtonPressIn | Callback when iPhone capture button is pressed in. Ex: onCaptureButtonPressIn={() => console.log("volume button pressed in")} | Function | no | iOS | yes |
+| onCaptureButtonPressOut | Callback when iPhone capture button is released. Ex: onCaptureButtonPressOut={() => console.log("volume button released")} | Function | no | iOS | no |
+
+**ScanCode**:Scan code component
+
| Name | Description | Type | Required | Platform | HarmonyOS Support |
| ------------------- | ------------------------------------------------------------ | --------------------- | -------- | -------- | ----------------- |
| ref | Reference on the camera view | Ref | no | All | yes |
| style | Style to apply on the camera view | StyleProp\ | no | All | yes |
-| flashMode | Camera flash mode. Default: `auto` | 'on'`/`'off'`/`'auto' | 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 |
-| onZoom | Callback when user makes a pinch gesture, regardless of what the zoom prop was set to. Returned event contains zoom. Ex: onZoom={(e) => console.log(e.nativeEvent.zoom)}. | Function | no | All | yes |
-| torchMode | Toggle flash light when camera is active. Default: off | 'on'`/`'off' | no | All | yes |
-| cameraType | Choose what camera to use. Default: `CameraType. | 'front'/'back' | no | All | yes |
-| onOrientationChange | Callback when physical device orientation changes. Returned event contains orientation. Ex: onOrientationChange={(event) => console.log(event.nativeEvent.orientation)}. Use import { Orientation } from 'react-native-camera-kit'; if (event.nativeEvent.orientation === Orientation.PORTRAIT) { ... } to understand the new value | Function | no | iOS | yes |
-| onError | Android only. Callback when camera fails to initialize. Ex: onError={(e) => console.log(e.nativeEvent.errorMessage)}. | Function | no | Android | yes |
-| shutterPhotoSound |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 |
-| resetFocusWhenMotionDetected | Dismiss tap to focus when focus area content changes. Native iOS feature, see documentation: https://developer.apple.com/documentation/avfoundation/avcapturedevice/1624644-subjectareachangemonitoringenabl?language=objc). Default true. | Boolean | no | iOS | no |
-| resizeMode | Determines the scaling and cropping behavior of content within the view. cover (resizeAspectFill on iOS) scales the content to fill the view completely, potentially cropping content if its aspect ratio differs from the view. contain (resizeAspect on iOS) scales the content to fit within the view's bounds without cropping, ensuring all content is visible but may introduce letterboxing. Default behavior depends on the specific use case. | 'cover' / 'contain' | no | iOS | no |
-| onCaptureButtonPressIn | Callback when iPhone capture button is pressed in. Ex: onCaptureButtonPressIn={() => console.log("volume button pressed in")} | Function | no | iOS | yes |
-| onCaptureButtonPressOut | Callback when iPhone capture button is released. Ex: onCaptureButtonPressOut={() => console.log("volume button released")} | Function | no | iOS | no |
-
-**ScanCode**: ScanCodeComponent
-
-| Name | Description | Type | Required | Platform | HarmonyOS Support |
-| ------------------- | ------------------------------------------------------------ | --------------------- | -------- | -------- | ----------------- |
-| ref | Reference on the camera view | Ref | no | All | yes |
-| style | Style to apply on the camera view | StyleProp\ | no | All | yes |
-| flashMode | Get secret value | 'on'`/`'off'`/`'auto' | no | All | yes |
+| flashMode | Get secret value | FlashMode.FLASH_MODE_CLOSE / FlashMode.FLASH_MODE_ALWAYS_OPEN | 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 |
@@ -396,33 +497,32 @@ Open `entry/src/main/resources/base/element/string.json` and add the following i
| onOrientationChange | Callback when physical device orientation changes. Returned event contains orientation. Ex: onOrientationChange={(event) => console.log(event.nativeEvent.orientation)}. Use import { Orientation } from 'react-native-camera-kit'; if (event.nativeEvent.orientation === Orientation.PORTRAIT) { ... } to understand the new value | Function | no | iOS | no |
| onError | Android only. Callback when camera fails to initialize. Ex: onError={(e) => console.log(e.nativeEvent.errorMessage)}. | Function | no | Android | yes |
| resetFocusTimeout | Dismiss tap to focus after this many milliseconds. Default 0 (disabled). Example: 5000 is 5 seconds. | Number | no | All | yes |
-| scanThrottleDelay | Duration between scan detection in milliseconds. Default 2000 (2s) if you need to dynamically set this value, you need to add the key parameter to force refresh this component | Number | no | All | yes |
+| scanThrottleDelay | Duration between scan detection in milliseconds. Default 2000 (2s) | Number | no | All | yes |
| scanBarcode | Enable barcode scanner. Default: `false` | boolean | no | All | yes |
| showFrame | Show frame in barcode scanner. Default: `false` | boolean | no | All | yes |
| laserColor | Color of barcode scanner laser visualization. Default: `red` | string | no | All | yes |
| frameColor | Color of barcode scanner frame visualization. Default: `yellow` | string | no | All | yes |
| onReadCode | Callback when scanner successfully reads barcode. Returned event contains `codeStringValue`. Default: `null`. Ex: `onReadCode={(event) => console.log(event.nativeEvent.codeStringValue)} | Function | no | All | yes |
+| barcodeFrameSize15.1.1+ | Frame size of barcode scanner. Default: `{ width: 300, height: 150 }` | object | no | All | yes |
-## Methods
-
+## Static Methods
| Name | Description | Type | Required | Platform | HarmonyOS Support |
| ------------------------------------ | ------------------------------------------------------------ | -------------------- | -------- | -------- | ----------------- |
| capture | Capture image as JPEG. | Promise | No | All | Yes |
| requestDeviceCameraAuthorization | `AVAuthorizationStatusAuthorized` returns `true` otherwise, returns `false` | Promise | No | All | Yes |
| checkDeviceCameraAuthorizationStatus | `AVAuthorizationStatusAuthorized` returns `true` otherwise, returns `false` | Promise | All | Yes | Yes |
+## outstanding issues
-## Known Issues
-
-- [ ] The sensor rotation angle cannot be queried. [issue#1](https://github.com/react-native-oh-library/react-native-camera-kit/issues/1)
-- [ ] The front camera cannot be used for code scanning. [issue#2](https://github.com/react-native-oh-library/react-native-camera-kit/issues/2)
-- [ ] The flashMode and torchMode attributes cannot be set at the same time. [issue#3](https://github.com/react-native-oh-library/react-native-camera-kit/issues/3)
-- [ ] The onCaptureButtonPressOut attribute is not supported. [issue#4](https://github.com/react-native-oh-library/react-native-camera-kit/issues/4)
-- [ ] The resetFocusWhenMotionDetected attribute is not supported. [issue#5](https://github.com/react-native-oh-library/react-native-camera-kit/issues/5)
-- [ ] The resizeMode attribute is not supported currently. [issue#6](https://github.com/react-native-oh-library/react-native-camera-kit/issues/6)
+- [ ] Not supporting querying sensor rotation angle [issue#1](https://github.com/react-native-oh-library/react-native-camera-kit/issues/1)
+- [ ] Does not support scanning with a front camera [issue#2](https://github.com/react-native-oh-library/react-native-camera-kit/issues/2)
+- [ ] Cannot set both flashMode and torchMode properties simultaneously [issue#3](https://github.com/react-native-oh-library/react-native-camera-kit/issues/3)
+- [ ] The onCaptureButtons PressOut property is currently not supported [issue#4](https://github.com/react-native-oh-library/react-native-camera-kit/issues/4)
+- [ ] The resetFocusWhenMotionDetected property is currently not supported [issue#5](https://github.com/react-native-oh-library/react-native-camera-kit/issues/5)
+- [ ] The resizeMode property is currently not supported [issue#6](https://github.com/react-native-oh-library/react-native-camera-kit/issues/6)
-## Others
+## Other
-## License
+## Open Source Protocol
-This project is licensed under [The MIT License (MIT)](https://github.com/teslamotors/react-native-camera-kit/blob/master/LICENSE).
+This project is based on [The MIT License (MIT)]( https://github.com/teslamotors/react-native-camera-kit/blob/master/LICENSE )Please enjoy and participate freely in open source.
diff --git a/zh-cn/react-native-camera-kit.md b/zh-cn/react-native-camera-kit.md
index 7141fd30102c1ba613abc561a603fa74f43fa4b9..04bcd8e03313b469208d3924bd3b9adde8a2d017 100644
--- a/zh-cn/react-native-camera-kit.md
+++ b/zh-cn/react-native-camera-kit.md
@@ -18,23 +18,37 @@
## 安装与使用
-请到三方库的 Releases 发布地址查看配套的版本信息:[@react-native-oh-library/react-native-camera-kit Releases](https://github.com/react-native-oh-library/react-native-camera-kit/releases) 。对于未发布到npm的旧版本,请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。
+请到三方库的 Releases 发布地址查看配套的版本信息:
-进入到工程目录并输入以下命令:
+| 三方库版本 | 发布信息 | 支持RN版本 |
+| ---------- | ------------------------------------------------------------ | ---------- |
+| 14.0.1 | [@react-native-oh-library/react-native-camera-kit Releases](https://github.com/react-native-oh-library/react-native-camera-kit/releases) | 0.72 |
+| 15.1.1 | [@react-native-ohos/react-native-camera-kit Releases]() | 0.77 |
+
+对于未发布到npm的旧版本,请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。
+进入到工程目录并输入以下命令:
#### npm
```bash
+# 0.72
npm install @react-native-oh-tpl/react-native-camera-kit
+
+# 0.77
+npm install @react-native-ohos/react-native-camera-kit
```
#### yarn
```bash
+# 0.72
yarn add @react-native-oh-tpl/react-native-camera-kit
+
+# 0.77
+yarn add @react-native-ohos/react-native-camera-kit
```
@@ -159,10 +173,14 @@ const styles = StyleSheet.create({
```
+
## 使用 Codegen
+> [!TIP] 0.77 不需要执行Codegen
+
本库已经适配了 `Codegen` ,在使用前需要主动执行生成三方库桥接代码,详细请参考[ Codegen 使用文档](/zh-cn/codegen.md)。
+
## Link
目前 HarmonyOS 暂不支持 AutoLink,所以 Link 步骤需要手动配置。
@@ -193,6 +211,8 @@ const styles = StyleSheet.create({
打开 `entry/oh-package.json5`,添加以下依赖
+- 0.72
+
```json
"dependencies": {
"@rnoh/react-native-openharmony": "file:../react_native_openharmony",
@@ -200,6 +220,15 @@ const styles = StyleSheet.create({
}
```
+- 0.77
+
+```json
+"dependencies": {
+ "@rnoh/react-native-openharmony": "file:../react_native_openharmony",
+ "@react-native-ohos/react-native-camera-kit": "file:../../node_modules/@react-native-ohos/react-native-camera-kit/harmony/camera_kit.har"
+ }
+```
+
点击右上角的 `sync` 按钮
或者在终端执行:
@@ -213,14 +242,81 @@ ohpm install
> [!TIP] 如需使用直接链接源码,请参考[直接链接源码说明](/zh-cn/link-source-code.md)
-### 3.在 ArkTs 侧引入 RTNCameraKitView 组件
+
+### 3.配置CMakeLists 和引入 CameraKitPackage
+
+> [!TIP] 若使用的是 7.22 版本,请跳过本章
+
+打开 `entry/src/main/cpp/CMakeLists.txt`,添加:
+
+```cmake
+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}/@react-native-ohos/react-native-camera-kit/src/main/cpp" ./camera-kit)
+# 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_kit)
+# RNOH_END: manual_package_linking_2
+```
+
+打开 `entry/src/main/cpp/PackageProvider.cpp`,添加:
+
+```c++
+#include "RNOH/PackageProvider.h"
+#include "generated/RNOHGeneratedPackage.h"
+#include "SamplePackage.h"
++ #include "CameraKitPackage.h"
+
+using namespace rnoh;
+
+std::vector> PackageProvider::getPackages(Package::Context ctx) {
+ return {
+ std::make_shared(ctx),
+ std::make_shared(ctx),
++ std::make_shared(ctx)
+ };
+}
+```
+
+
+### 4.在 ArkTs 侧引入 RTNCameraKitView 组件
找到 `function buildCustomRNComponent()`,一般位于 `entry/src/main/ets/pages/index.ets` 或 `entry/src/main/ets/rn/LoadBundle.ets`,添加:
```diff
...
+// 0.72
+ import { RTNCameraKitView } from "@react-native-oh-tpl/react-native-camera-kit";
+// 0.77
++ import { RTNCameraKitView } from "@react-native-ohos/react-native-camera-kit";
+
@Builder
export function buildCustomRNComponent(ctx: ComponentBuilderContext) {
...
@@ -242,14 +338,18 @@ export function buildCustomRNComponent(ctx: ComponentBuilderContext) {
...
```
-### 4.在 ArkTs 侧引入 RTNCameraKitPackage
+### 5.在 ArkTs 侧引入 RTNCameraKitPackage
打开 `entry/src/main/ets/RNPackagesFactory.ts`,添加:
```diff
...
+// 0.72
+ import { RTNCameraKitPackage } from "@react-native-oh-tpl/react-native-camera-kit/ts";
+// 0.77
++ import { RTNCameraKitPackage } from "@react-native-ohos/react-native-camera-kit/ts";
+
export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
return [
new SamplePackage(ctx),
@@ -277,7 +377,12 @@ ohpm install
要使用此库,需要使用正确的 React-Native 和 RNOH 版本。另外,还需要使用配套的 DevEco Studio 和 手机 ROM。
-请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息:[@react-native-oh-library/react-native-camera-kit Releases](https://github.com/react-native-oh-library/react-native-camera-kit/releases)
+请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息:
+
+| 三方库版本 | 发布信息 | 支持RN版本 |
+| ---------- | ------------------------------------------------------------ | ---------- |
+| 14.0.1 | [@react-native-oh-library/react-native-camera-kit Releases](https://github.com/react-native-oh-library/react-native-camera-kit/releases) | 0.72 |
+| 15.1.1 | [@react-native-ohos/react-native-camera-kit Releases]() | 0.77 |
### 权限要求
@@ -355,59 +460,60 @@ ohpm install
**Camera**:相机组件
-| Name | Description | Type | Required | Platform | HarmonyOS Support |
-|-----------------|----------------------|----------|----------|-------------|-------------------|
-| ref | Reference on the camera view | Ref | no | All | yes |
-| style | Style to apply on the camera view | StyleProp\ | no | All | yes |
-| flashMode | Camera flash mode. Default: `auto` | 'on'`/`'off'`/`'auto' | 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 |
-| onZoom | Callback when user makes a pinch gesture, regardless of what the zoom prop was set to. Returned event contains zoom. Ex: onZoom={(e) => console.log(e.nativeEvent.zoom)}. | Function | no | All | yes |
-| torchMode | Toggle flash light when camera is active. Default: off | 'on'`/`'off' | no | All | yes |
-| cameraType | Choose what camera to use. Default: `CameraType. | 'front'/'back' | no | All | yes |
-| onOrientationChange | Callback when physical device orientation changes. Returned event contains orientation. Ex: onOrientationChange={(event) => console.log(event.nativeEvent.orientation)}. Use import { Orientation } from 'react-native-camera-kit'; if (event.nativeEvent.orientation === Orientation.PORTRAIT) { ... } to understand the new value | Function | no | iOS | yes |
-| onError | Android only. Callback when camera fails to initialize. Ex: onError={(e) => console.log(e.nativeEvent.errorMessage)}. | Function | no | Android | yes |
-| shutterPhotoSound |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 |
-| resetFocusWhenMotionDetected | Dismiss tap to focus when focus area content changes. Native iOS feature, see documentation: https://developer.apple.com/documentation/avfoundation/avcapturedevice/1624644-subjectareachangemonitoringenabl?language=objc). Default true. | Boolean | no | iOS | no |
-| resizeMode | Determines the scaling and cropping behavior of content within the view. cover (resizeAspectFill on iOS) scales the content to fill the view completely, potentially cropping content if its aspect ratio differs from the view. contain (resizeAspect on iOS) scales the content to fit within the view's bounds without cropping, ensuring all content is visible but may introduce letterboxing. Default behavior depends on the specific use case. | 'cover' / 'contain' | no | iOS | no |
-| onCaptureButtonPressIn | Callback when iPhone capture button is pressed in. Ex: onCaptureButtonPressIn={() => console.log("volume button pressed in")} | Function | no | iOS | yes |
-| onCaptureButtonPressOut | Callback when iPhone capture button is released. Ex: onCaptureButtonPressOut={() => console.log("volume button released")} | Function | no | iOS | no |
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ---------------------------- | ------------------------------------------------------------ | --------------------- | -------- | -------- | ----------------- |
+| ref | Reference on the camera view | Ref | no | All | yes |
+| style | Style to apply on the camera view | StyleProp\ | no | All | yes |
+| flashMode | Camera flash mode. Default: FlashMode.FLASH_MODE_CLOSE | FlashMode.FLASH_MODE_CLOSE / FlashMode.FLASH_MODE_OPEN / FlashMode.FLASH_MODE_AUTO / FlashMode.FLASH_MODE_ALWAYS_OPEN | no | All | yes |
+| focusMode | Camera focus mode. Default: FOCUS_MODE_AUT | FOCUS_MODE_CONTINUOUS_AUTO / FOCUS_MODE_AUTO / FOCUS_MODE_LOCKED / FocusMode.FOCUS_MODE_MANUAL | 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 |
+| onZoom | Callback when user makes a pinch gesture, regardless of what the zoom prop was set to. Returned event contains zoom. Ex: onZoom={(e) => console.log(e.nativeEvent.zoom)}. | Function | no | All | yes |
+| torchMode | Toggle flash light when camera is active. Default: off | 'on'`/`'off' | no | All | yes |
+| cameraType | Choose what camera to use. Default: `CameraType. | 'front'/'back' | no | All | yes |
+| onOrientationChange | Callback when physical device orientation changes. Returned event contains orientation. Ex: onOrientationChange={(event) => console.log(event.nativeEvent.orientation)}. Use import { Orientation } from 'react-native-camera-kit'; if (event.nativeEvent.orientation === Orientation.PORTRAIT) { ... } to understand the new value | Function | no | iOS | yes |
+| onError | Android only. Callback when camera fails to initialize. Ex: onError={(e) => console.log(e.nativeEvent.errorMessage)}. | Function | no | Android | yes |
+| shutterPhotoSound | 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 |
+| resetFocusWhenMotionDetected | Dismiss tap to focus when focus area content changes. Native iOS feature, see documentation: https://developer.apple.com/documentation/avfoundation/avcapturedevice/1624644-subjectareachangemonitoringenabl?language=objc). Default true. | Boolean | no | iOS | no |
+| resizeMode | Determines the scaling and cropping behavior of content within the view. cover (resizeAspectFill on iOS) scales the content to fill the view completely, potentially cropping content if its aspect ratio differs from the view. contain (resizeAspect on iOS) scales the content to fit within the view's bounds without cropping, ensuring all content is visible but may introduce letterboxing. Default behavior depends on the specific use case. | 'cover' / 'contain' | no | iOS | no |
+| onCaptureButtonPressIn | Callback when iPhone capture button is pressed in. Ex: onCaptureButtonPressIn={() => console.log("volume button pressed in")} | Function | no | iOS | yes |
+| onCaptureButtonPressOut | Callback when iPhone capture button is released. Ex: onCaptureButtonPressOut={() => console.log("volume button released")} | Function | no | iOS | no |
**ScanCode**:扫码组件
-| Name | Description | Type | Required | Platform | HarmonyOS Support |
-|-----------------|----------------------|----------|----------|-------------|-------------------|
-| ref | Reference on the camera view | Ref | no | All | yes |
-| style | Style to apply on the camera view | StyleProp\ | no | All | yes |
-| flashMode | Get secret value | 'on'`/`'off'`/`'auto' | 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 |
-| onZoom | Callback when user makes a pinch gesture, regardless of what the zoom prop was set to. Returned event contains zoom. Ex: onZoom={(e) => console.log(e.nativeEvent.zoom)}. | Function | no | All | yes |
-| torchMode | Toggle flash light when camera is active. Default: off | 'on'`/`'off' | no | All | yes |
-| cameraType | Choose what camera to use. Default: `CameraType. | 'front'/'back' | no | All | no |
-| onOrientationChange | Callback when physical device orientation changes. Returned event contains orientation. Ex: onOrientationChange={(event) => console.log(event.nativeEvent.orientation)}. Use import { Orientation } from 'react-native-camera-kit'; if (event.nativeEvent.orientation === Orientation.PORTRAIT) { ... } to understand the new value | Function | no | iOS | no |
-| onError | Android only. Callback when camera fails to initialize. Ex: onError={(e) => console.log(e.nativeEvent.errorMessage)}. | Function | no | Android | yes |
-| resetFocusTimeout | Dismiss tap to focus after this many milliseconds. Default 0 (disabled). Example: 5000 is 5 seconds. | Number | no | All | yes |
-| scanThrottleDelay | Duration between scan detection in milliseconds. Default 2000 (2s) if you need to dynamically set this value, you need to add the key parameter to force refresh this component | Number | no | All | yes |
-| scanBarcode | Enable barcode scanner. Default: `false` | boolean | no | All | yes |
-| showFrame | Show frame in barcode scanner. Default: `false` | boolean | no | All | yes |
-| laserColor | Color of barcode scanner laser visualization. Default: `red` | string | no | All | yes |
-| frameColor | Color of barcode scanner frame visualization. Default: `yellow` | string | no | All | yes |
-| onReadCode | Callback when scanner successfully reads barcode. Returned event contains `codeStringValue`. Default: `null`. Ex: `onReadCode={(event) => console.log(event.nativeEvent.codeStringValue)} | Function | no | All | yes |
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ------------------- | ------------------------------------------------------------ | --------------------- | -------- | -------- | ----------------- |
+| ref | Reference on the camera view | Ref | no | All | yes |
+| style | Style to apply on the camera view | StyleProp\ | no | All | yes |
+| flashMode | Get secret value | FlashMode.FLASH_MODE_CLOSE / FlashMode.FLASH_MODE_ALWAYS_OPEN | 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 |
+| onZoom | Callback when user makes a pinch gesture, regardless of what the zoom prop was set to. Returned event contains zoom. Ex: onZoom={(e) => console.log(e.nativeEvent.zoom)}. | Function | no | All | yes |
+| torchMode | Toggle flash light when camera is active. Default: off | 'on'`/`'off' | no | All | yes |
+| cameraType | Choose what camera to use. Default: `CameraType. | 'front'/'back' | no | All | no |
+| onOrientationChange | Callback when physical device orientation changes. Returned event contains orientation. Ex: onOrientationChange={(event) => console.log(event.nativeEvent.orientation)}. Use import { Orientation } from 'react-native-camera-kit'; if (event.nativeEvent.orientation === Orientation.PORTRAIT) { ... } to understand the new value | Function | no | iOS | no |
+| onError | Android only. Callback when camera fails to initialize. Ex: onError={(e) => console.log(e.nativeEvent.errorMessage)}. | Function | no | Android | yes |
+| resetFocusTimeout | Dismiss tap to focus after this many milliseconds. Default 0 (disabled). Example: 5000 is 5 seconds. | Number | no | All | yes |
+| scanThrottleDelay | Duration between scan detection in milliseconds. Default 2000 (2s) | Number | no | All | yes |
+| scanBarcode | Enable barcode scanner. Default: `false` | boolean | no | All | yes |
+| showFrame | Show frame in barcode scanner. Default: `false` | boolean | no | All | yes |
+| laserColor | Color of barcode scanner laser visualization. Default: `red` | string | no | All | yes |
+| frameColor | Color of barcode scanner frame visualization. Default: `yellow` | string | no | All | yes |
+| onReadCode | Callback when scanner successfully reads barcode. Returned event contains `codeStringValue`. Default: `null`. Ex: `onReadCode={(event) => console.log(event.nativeEvent.codeStringValue)} | Function | no | All | yes |
+| barcodeFrameSize15.1.1+ | Frame size of barcode scanner. Default: `{ width: 300, height: 150 }` | object | no | All | yes |
## 静态方法
-| Name | Description | Type | Required | Platform | HarmonyOS Support |
-| ----- | ------------------- | ---------- | -------- | -------- | ----------------- |
-| capture | Capture image as JPEG. | Promise | No | All | Yes |
-| requestDeviceCameraAuthorization | `AVAuthorizationStatusAuthorized` returns `true` otherwise, returns `false` | Promise | No | All | Yes |
-| checkDeviceCameraAuthorizationStatus | `AVAuthorizationStatusAuthorized` returns `true` otherwise, returns `false` | Promise | All | Yes |Yes|
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ------------------------------------ | ------------------------------------------------------------ | -------------------- | -------- | -------- | ----------------- |
+| capture | Capture image as JPEG. | Promise | No | All | Yes |
+| requestDeviceCameraAuthorization | `AVAuthorizationStatusAuthorized` returns `true` otherwise, returns `false` | Promise | No | All | Yes |
+| checkDeviceCameraAuthorizationStatus | `AVAuthorizationStatusAuthorized` returns `true` otherwise, returns `false` | Promise | All | Yes | Yes |
## 遗留问题