npm package: @hadss/react_native_media_processing
Description: RN media processing interface package
Latest version: 1.0.0-rc.1

# @hadss/react_native_media_processing

## 介绍

为 React Native 提供图片的清晰度增强及缩放能力。该库封装了VideoProcessingEngine能力，开发者可通过简洁接口在 RN 中实现清晰度增强功能。


## 工程目录

```
.
├─harmony                                             
|    ├─media_processing
│    │   └─src
│    │      ├─main
│    │          └─ets
│    │            ├─MediaProcessingModule.ets         // Turbo Modules接口ArkTS实现
│    │            ├─MediaProcessingModulePackage.ets     
│    │            └─MediaProcessingModuleSpec.ts      // Turbo Modules接口
|    └─media_processing.har  
├─src
│  ├─index.ts                                        // RN模块导出
│  └─turbo    
|     └─MediaProcessingModule.ts                      // RN Turbo Modules接口
```

## 安装与使用

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

<!-- tabs:start -->

**npm**

```bash
npm install @hadss/react_native_media_processing
```

**yarn**

```bash
yarn add @hadss/react_native_media_processing
```
下面的代码展示了这个库的基本使用场景：

**图片的清晰度增强及缩放能力使用示例** 
```jsx
import React, {useState, useEffect} from 'react';
import {
  SafeAreaView,
  ScrollView,
  StyleSheet,
  Text,
  Image,
  Button,
} from 'react-native';
import {MediaProcessing} from '@hadss/react_native_media_processing';
import {uriBase64} from './image';

function App(): JSX.Element {
  const [prevUri, setPrevUri] = useState('');
  const [afterUri, setAfterUri] = useState('');

  useEffect(() => {
    MediaProcessing.init();
    return () => {
      MediaProcessing.deinit();
    };
  }, []);

  const enhance = async (uri: string): Promise<void> => {
    setPrevUri(uri);
    const descBase64 = await MediaProcessing.enhanceDetail(uri, 1080, 1080);
    setAfterUri(descBase64 ?? '');
  };

  const onPressHttp = async (): Promise<void> => {
    await enhance(
      'https://img1.baidu.com/it/u=3287470634,1888300445&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=667',
    );
  };

  const onPressBase64 = async (): Promise<void> => {
    await enhance(uriBase64);
  };

  const onPressFile = async (): Promise<void> => {
    await enhance(
      'file://com.hadss.ohFeature/data/storage/el2/base/haps/entry/files/resfile/rose.png',
    );
  };

  return (
    <SafeAreaView>
      <ScrollView contentInsetAdjustmentBehavior="automatic">
        <Button onPress={onPressHttp} title="Http图片" />
        <Button onPress={onPressBase64} title="Base64图片" />
        <Button onPress={onPressFile} title="文件图片" />
        <Text>增强前：</Text>
        <Image
          style={styles.img}
          source={{
            uri: prevUri,
          }}
        />
        <Text>增强后：</Text>
        <Image
          style={styles.imgout}
          source={{
            uri: afterUri,
          }}
        />
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  img: {
    width: 500,
    height: 500,
  },
  imgout: {
    width: 600,
    height: 500,
  },
});

export default App;
```

## Link

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

首先需要使用DevEco Studio打开项目里的OpenHarmony工程，在工程根目录的`oh-package.json5`添加overrides字段：

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

### 引原生端代码

目前有两种方法：

1. **通过har包引入（在IDE完善相关功能后该方法会被遗弃，目前首选此方法）。**

    >**说明：**
    >har包位于三方库安装路径的`harmony`文件夹下。

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

    ```
    "dependencies":{
        "@rnoh/react-native-openharmony": "file:../react_native_openharmony",
        "@hadss/react_native_media_processing": "file:../../node_modules/@hadss/react_native_media_processing/harmony/media_processing.har",
      }
    ```

    b. 配置CMakeLists和引入RNOHGeneratedPackage：

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

    ```diff
    project(rnapp)
    cmake_minimum_required(VERSION 3.4.1)
    set(CMAKE_SKIP_BUILD_RPATH TRUE)
    set(OH_MODULE_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules")
    set(RNOH_APP_DIR "${CMAKE_CURRENT_SOURCE_DIR}")
    
    set(RNOH_CPP_DIR "${OH_MODULE_DIR}/@rnoh/react-native-openharmony/src/main/cpp")
    set(RNOH_GENERATED_DIR "${CMAKE_CURRENT_SOURCE_DIR}/generated")
    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")
    add_compile_definitions(WITH_HITRACE_SYSTRACE)
    set(WITH_HITRACE_SYSTRACE 1) # for other CMakeLists.txt files to use
    + file(GLOB GENERATED_CPP_FILES "./generated/*.cpp")
    
    add_subdirectory("${RNOH_CPP_DIR}" ./rn)
    
    add_library(rnoh_app SHARED
    +    ${GENERATED_CPP_FILES}
        "./PackageProvider.cpp"
        "${RNOH_CPP_DIR}/RNOHAppNapiBridge.cpp"
    )
    
    target_link_libraries(rnoh_app PUBLIC rnoh)
    ```

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

    ```diff
    #include "RNOH/PackageProvider.h"
    + #include "generated/RNOHGeneratedPackage.h"
    
    using namespace rnoh;
    
    std::vector<std::shared_ptr<Package>> PackageProvider::getPackages(Package::Context ctx) {
        return {
    +        std::make_shared<RNOHGeneratedPackage>(ctx)
        };
    }
    ```

    d. 在ArkTs侧引入AvoidModulePackage：

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

    ```diff
      ...
    + import { MediaProcessingModulePackage } from '@hadss/react_native_media_processing/ts';;
    
    export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
      return [
    +   new MediaProcessingModulePackage(ctx),
      ];
    }
    ```

    f. 运行：

    点击右上角的`sync`按钮

    或者在终端执行：

    ```bash
    cd entry
    ohpm install
    ```
    然后编译、运行即可。
> **说明**
> 若项目启动时报错：can not find record '&@rnoh/react-native-openharmony/generated/ts&X.X.X'。需在entry\oh_modules@rnoh\react-native-openharmony\ts.ts文件中添加export * from './generated/ts'，并删除.cxx文件夹、build文件夹，然后执行sync操作同步代码。

2. **直接链接源码。**

    如需使用直接链接源码，请参考[直接链接源码说明](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/link-source-code.md)。


### 权限要求

- 如果uri使用网络图片，应用需要申请网络权限

  在`entry/src/main/module.json5`中添加

```json
  "requestPermissions": [
    {
      "name": "ohos.permission.INTERNET",
    }
  ]
```

##  API

>**说明：**
>"Platform"列表示支持的平台，All表示支持所有平台。


### 图片清晰度增强及缩放接口

**MediaProcessing**
| Name                | Description                                          | Type     | Platform  |
| ------------------- | -----------------------------------------------------| -------- | --------- |
| init                | 初始化环境。                                          | () => Promise\<void\> | OpenHarmony|
| enhanceDetail       | 图片内容的清晰度增强及缩放能力。                        | enhanceDetail(uri: string, width: number, height: number, level?: number, mimeType?: string) => Promise\<string \| undefined\> | OpenHarmony|
| deinit              | 释放处理资源。                                        | () => Promise\<void\> | OpenHarmony|

**enhanceDetail接口参数**
| Name        | Description                                                      | Type       | DefaultValue  | Platform  |
| :---------- | :----------------------------------------------------------------| :--------- | :--------    | :-------- |
| uri         | 参数支持传入网络图片，base64格式数据，和file字符串的本地文件。        | string     | - |  OpenHarmony |
| width       | 输出图片的宽度                                                   | number      | - | OpenHarmony |
| height      | 输出图片的高度                                                   | number      | - | OpenHarmony |
| level?       | 输出质量档位，4个质量档位（0-NONE，1-LOW，2-MEDIUM，3-HIGH）        | number     | 3 | OpenHarmony |
| mimeType?    | 输出图片格式                                                     | string     |  image/png | OpenHarmony |

**说明：**
enhanceDetail默认返回png格式的base64字符串。增强失败时返回undefined。最小支持的分辨率是512*512。
参考：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-videoprocessingengine#imageprocessor


## 约束与限制

### 设备限制

支持的设备类型：手机、平板、2in1.

支持的手机系统：​​HarmonyOS 5.1.0 Release及以上版本。

​API版本​​：>= 5.1.0 (18)