@hadss/react_native_media_processing

v1.0.0-rc.1

Published

17 days ago

RN media processing interface package

0High
0Medium
0Low

react-native media_processing

@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接口

安装与使用

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

npm

npm install @hadss/react_native_media_processing

yarn

yarn add @hadss/react_native_media_processing

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

图片的清晰度增强及缩放能力使用示例

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字段：

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

引原生端代码

目前有两种方法：

通过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，添加：

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，添加：

#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，添加：

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

f. 运行：

点击右上角的sync按钮

或者在终端执行：

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操作同步代码。

直接链接源码。
如需使用直接链接源码，请参考直接链接源码说明。

权限要求

如果uri使用网络图片，应用需要申请网络权限
在entry/src/main/module.json5中添加

  "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)

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@hadss/react_native_media_processing

介绍

工程目录

安装与使用

Link

引原生端代码

权限要求

API

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

约束与限制

设备限制