调用鸿蒙硬能力：RN 集成 AI 语音与摄像头原生模块

爱学习的小齐哥哥

发布于 2025-6-10 19:50

浏览

0收藏

引言

HarmonyOS 5作为全场景分布式操作系统，深度整合了AI语音、摄像头等硬件能力，为开发者提供了丰富的原生API。对于React Native（RN）开发者而言，如何在RN应用中高效调用这些鸿蒙硬能力，是构建智能、交互丰富的应用的关键。本文将围绕AI语音（语音识别/合成）与摄像头（拍照/录像）两大核心场景，详细讲解RN与鸿蒙原生模块的集成方法、代码实现及实战技巧。

一、前置准备：环境与权限配置

1.1 开发环境要求
HarmonyOS SDK：安装最新版DevEco Studio（2025+），并配置HarmonyOS 5 SDK；

RN项目：基于react-native@0.73+创建HarmonyOS RN项目（需选择“HarmonyOS”作为目标平台）；

原生模块支持：确保项目已启用原生模块开发（默认开启）。

1.2 权限申请（关键！）

调用AI语音与摄像头需申请以下权限（在android/app/src/main/AndroidManifest.xml或ios/YourProject/Info.plist中配置）：
功能 Android权限 iOS权限（Info.plist）
麦克风（语音输入） <uses-permission android:name=“android.permission.RECORD_AUDIO” /> NSMicrophoneUsageDescription（描述）
相机（拍照/录像） <uses-permission android:name=“android.permission.CAMERA” /> NSCameraUsageDescription（描述）
位置（部分场景） <uses-permission android:name=“android.permission.ACCESS_FINE_LOCATION” /> NSLocationWhenInUseUsageDescription

RN中动态请求权限示例：
import { PermissionsAndroid, Platform } from ‘react-native’;

// 动态请求麦克风权限（Android）
const requestMicrophonePermission = async () => {
if (Platform.OS === ‘android’) {
const granted = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.RECORD_AUDIO,
title: ‘需要麦克风权限’, message: ‘用于语音输入’ }

);
return granted === PermissionsAndroid.RESULTS.GRANTED;

return true; // iOS默认已授权（需在Info.plist声明）

};

二、集成AI语音模块：语音识别与合成

2.1 鸿蒙AI语音能力概述

HarmonyOS 5的AI语音模块支持：
语音识别（ASR）：实时将语音转换为文本（支持离线/在线模式）；

语音合成（TTS）：将文本转换为自然语音（支持多音色、语速调节）；

语音唤醒：通过自定义关键词唤醒设备（如“小艺同学”）。

2.2 集成语音识别（ASR）

2.2.1 原生模块开发（Android端）

在HarmonyOS中，AI语音能力通过@ohos.speech模块提供。需编写原生模块暴露接口给RN：

步骤1：创建原生模块（Java）
// 语音识别模块（SpeechRecognitionModule.java）
package com.yourproject.modules;

import ohos.aafwk.content.Intent;
import ohos.aafwk.content.Operation;
import ohos.ai.speech.SpeechRecognizer;
import ohos.ai.speech.SpeechRecognizerFactory;
import ohos.app.Context;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.bridge.Callback;

public class SpeechRecognitionModule extends ReactContextBaseJavaModule {
private SpeechRecognizer recognizer;
private Callback resultCallback;

public SpeechRecognitionModule(ReactApplicationContext reactContext) {
super(reactContext);
@Override

public String getName() {
return “SpeechRecognition”; // RN中调用的模块名
@ReactMethod

public void startRecognition(String locale, Callback callback) {
this.resultCallback = callback;
// 初始化语音识别器（使用系统默认引擎）
recognizer = SpeechRecognizerFactory.createRecognizer(getContext());
// 设置识别参数（语言、场景）
recognizer.setParameter(SpeechRecognizer.PARAM_LOCALE, locale); // 如"zh_CN"
recognizer.setParameter(SpeechRecognizer.PARAM_SCENE, SpeechRecognizer.SCENE_CHAT);
// 启动识别
recognizer.start();
@ReactMethod

public void stopRecognition() {
if (recognizer != null) {
recognizer.stop();
recognizer = null;
}

// 接收识别结果（通过广播或回调）
private void onRecognitionResult(String result) {
if (resultCallback != null) {
resultCallback.invoke(result); // 将结果传递给RN
}

步骤2：注册原生模块（AndroidManifest.xml）
<application>

<service
android:name=“com.yourproject.modules.SpeechRecognitionModule”
android:exported=“false” />
</application>

2.2.2 RN端调用

在RN中通过NativeModules调用原生模块：

import { NativeModules } from ‘react-native’;

const { SpeechRecognition } = NativeModules;

// 启动语音识别（中文）
const startVoiceRecognition = async () => {
try {
await SpeechRecognition.startRecognition(‘zh_CN’, (result) => {
console.log(‘识别结果：’, result); // 输出文本
});
catch (err) {

console.error('启动失败：', err);

};

// 停止识别
const stopVoiceRecognition = () => {
SpeechRecognition.stopRecognition();
};

2.3 集成语音合成（TTS）

2.3.1 原生模块开发（Android端）

HarmonyOS的TTS能力同样通过@ohos.speech模块实现，需扩展原生模块：

// 语音合成模块（SpeechSynthesisModule.java）
public class SpeechSynthesisModule extends ReactContextBaseJavaModule {
private SpeechSynthesizer synthesizer;

public SpeechSynthesisModule(ReactApplicationContext reactContext) {
super(reactContext);
@Override

public String getName() {
return “SpeechSynthesis”;
@ReactMethod

public void synthesizeText(String text, String voiceType, Callback callback) {
// 初始化合成器
synthesizer = SpeechSynthesizerFactory.createSynthesizer(getContext());
// 设置参数（文本、音色、语速）
synthesizer.setParameter(SpeechSynthesizer.PARAM_TEXT, text);
synthesizer.setParameter(SpeechSynthesizer.PARAM_VOICE_TYPE, voiceType); // 如"female_zh"
synthesizer.setParameter(SpeechSynthesizer.PARAM_SPEED, “1.0”); // 语速（0.5-2.0）
// 播放合成音频
synthesizer.play();
// 播放完成后回调
synthesizer.setOnCompletionListener(() -> {
callback.invoke(“播放完成”);
});
}

2.3.2 RN端调用

const { SpeechSynthesis } = NativeModules;

// 合成语音（女声中文）
const speakText = (text: string) => {
SpeechSynthesis.synthesizeText(text, ‘female_zh’, (result) => {
console.log(‘合成结果：’, result);
});
};

三、集成摄像头模块：拍照与录像

3.1 鸿蒙摄像头能力概述

HarmonyOS 5的摄像头模块支持：
拍照：单张/连拍、HDR、夜景模式；

录像：1080P/4K录制、美颜滤镜；

预览：实时显示摄像头画面（支持自定义UI）。

3.2 集成拍照功能

3.2.1 原生模块开发（Android端）

通过@ohos.camera模块实现拍照功能：

// 摄像头模块（CameraModule.java）
package com.yourproject.modules;

import ohos.aafwk.content.Intent;
import ohos.camera.Camera;
import ohos.camera.CameraManager;
import ohos.camera.Element;
import ohos.camera.FrameConfig;
import ohos.camera.PictureFormat;
import ohos.camera.ShutterCallback;
import ohos.camera.Size;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.bridge.Callback;
import java.io.File;

public class CameraModule extends ReactContextBaseJavaModule {
private Camera camera;
private Callback photoCallback;

public CameraModule(ReactApplicationContext reactContext) {
super(reactContext);
@Override

public String getName() {
return “Camera”;
@ReactMethod

public void takePhoto(String savePath, Callback callback) {
this.photoCallback = callback;
// 获取摄像头管理器
CameraManager manager = CameraManager.getInstance(getContext());
// 打开后置摄像头
manager.openCamera(“0”, (cameraDevice) -> {
this.camera = cameraDevice;
// 配置拍照参数（分辨率、格式）
Size size = new Size(1920, 1080); // 1080P
FrameConfig frameConfig = new FrameConfig.Builder()
.setPictureSize(size)
.setPictureFormat(PictureFormat.JPEG)
.build();
// 拍照回调
ShutterCallback shutterCallback = (shutterSpeed) -> {
// 快门触发（可在此处播放音效）
};
// 保存照片到指定路径
File file = new File(savePath);
camera.takePicture(frameConfig, shutterCallback, (data) -> {
// 将data写入文件
try (FileOutputStream fos = new FileOutputStream(file)) {
fos.write(data);
fos.flush();
callback.invoke(file.getAbsolutePath()); // 返回照片路径
catch (Exception e) {

      callback.invoke(e.getMessage());

});

});

}

3.2.2 RN端调用与UI实现

import { View, Image, Button } from ‘react-native’;

const CameraScreen = () => {
const [photoUri, setPhotoUri] = useState(‘’);

return (
<View style={{ flex: 1 }}>
<Button title=“拍照” onPress={takePhoto} />
{photoUri && <Image source={{ uri: photoUri }} style={{ flex: 1 }} />}
</View>
);
};

3.3 集成录像功能（扩展）

录像功能与拍照类似，需配置FrameConfig为视频格式（如MPEG_4），并通过MediaRecorder录制：

// 录像模块（CameraRecordModule.java）
// 核心步骤：
// 1. 配置视频参数（分辨率、帧率、码率）；
// 2. 初始化MediaRecorder并关联摄像头；
// 3. 开始/停止录制，保存视频文件。

四、实战场景：智能语音助手

4.1 场景需求

开发一个集成语音唤醒、语音识别、语音合成的智能助手，用户说“小艺助手”，助手响应并执行指令（如“打开相机”）。

4.2 实现步骤

4.2.1 语音唤醒

通过HarmonyOS的VoiceWakeUp模块实现（需提前训练唤醒词模型）：

// RN端调用语音唤醒
const wakeUp = async () => {
const result = await NativeModules.VoiceWakeUp.startWakeUp(“小艺助手”);
if (result) {
console.log(“唤醒成功！”);
// 触发语音识别
startVoiceRecognition(‘zh_CN’, (text) => {
handleCommand(text); // 处理指令（如“打开相机”）
});
};

4.2.2 指令处理与跨模块联动

const handleCommand = (text: string) => {
if (text.includes(“打开相机”)) {
// 调用相机模块拍照
NativeModules.Camera.takePhoto(${RNFS.DocumentDirectoryPath}/camera.jpg);
else if (text.includes(“播放音乐”)) {

// 调用TTS模块播放语音
NativeModules.SpeechSynthesis.synthesizeText("正在为您播放音乐...", "female_zh");

};

五、常见问题与优化

5.1 权限被拒绝
现象：调用摄像头/麦克风时提示“权限未授予”；

解决：检查AndroidManifest.xml/Info.plist权限声明，确保RN端动态请求权限逻辑正确。

5.2 语音识别延迟
现象：语音输入后识别结果延迟1-2秒；

优化：

使用离线识别模式（需提前下载语言包）；

限制识别文本长度（避免过长导致处理耗时）。

5.3 拍照模糊
现象：预览画面清晰但保存的照片模糊；

优化：

确保FrameConfig中设置的分辨率与实际拍摄一致；

避免在低光照环境下拍摄（可开启闪光灯）。

六、总结与学习建议

6.1 总结

本文详细讲解了RN如何集成HarmonyOS 5的AI语音（识别/合成）与摄像头（拍照/录像）原生模块，覆盖了权限配置、原生模块开发、RN端调用及实战场景。通过这些技术，开发者可快速构建具备智能交互能力的跨端应用。

6.2 学习建议
深入阅读官方文档：HarmonyOS开发者社区提供了详细的https://developer.harmonyos.com/cn/docs/documentation/doc-references-V3/speech-0000001477980901-V3与https://developer.harmonyos.com/cn/docs/documentation/doc-references-V3/camera-0000001478230903-V3API文档；

调试工具辅助：使用DevEco Studio的“Log”面板查看原生模块日志，定位集成问题；

场景扩展：尝试结合分布式能力（如手机调用平板摄像头），实现跨设备智能交互；

性能优化：对于高频调用（如连续语音识别），使用线程池管理任务，避免阻塞主线程。

通过本文的实践指导，开发者将掌握HarmonyOS 5 RN集成硬能力的核心技术，为用户打造更智能、便捷的全场景应用体验。

分类

HarmonyOS

ArkUI / eTS

标签

HarmonyOS 5

51CTO

51CTO博客

51CTO学堂

调用鸿蒙硬能力：RN 集成 AI 语音与摄像头原生模块

目录

订阅鸿蒙技术特刊，精选内容抢先看