react-native-coze-rtc v1.0.2

React Native Coze RTC SDK 使用文档

简介

React Native Coze RTC SDK 是 Gizwits Coze Socket SDK 的 React Native 封装，提供了在 React Native 应用中使用实时语音通信功能的能力。该模块支持实时语音录制、传输、播放以及字幕显示功能。

功能特点

• 实时语音录制和传输
• 高质量音频播放
• 实时字幕显示
• 完整的会话管理
• 简单易用的 API
• 事件监听机制

安装

npm install react-native-coze-rtc --save

或者使用 yarn：

yarn add react-native-coze-rtc

Android 配置

确保在 android/app/build.gradle 文件中设置了正确的 minSdkVersion：

android {
    defaultConfig {
        minSdkVersion 23
        // 其他配置...
    }
    // 其他配置...
}

在 AndroidManifest.xml 中添加必要的权限：

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />

基本用法

导入模块

import CozeRtc from 'react-native-coze-rtc';

初始化 SDK

在组件挂载时初始化 SDK：

useEffect(() => {
  const initializeSDK = async () => {
    try {
      await CozeRtc.initialize();
      console.log('Coze SDK 初始化成功');
    } catch (error) {
      console.error('Coze SDK 初始化失败:', error);
    }
  };

  initializeSDK();

  // 组件卸载时清理资源
  return () => {
    CozeRtc.release();
  };
}, []);

设置事件监听器

useEffect(() => {
  // 设置事件监听器
  const webSocketOpenSubscription = CozeRtc.addListener('onWebSocketOpen', (data) => {
    console.log('WebSocket已连接:', data.message);
  });

  const subtitleSubscription = CozeRtc.addListener('onSubtitleReceived', (data) => {
    console.log('收到字幕:', data.content);
    // 更新UI显示字幕
  });

  const errorSubscription = CozeRtc.addListener('onError', (data) => {
    console.error('错误:', data.message);
  });

  // 组件卸载时移除监听器
  return () => {
    CozeRtc.removeListener('onWebSocketOpen', webSocketOpenSubscription);
    CozeRtc.removeListener('onSubtitleReceived', subtitleSubscription);
    CozeRtc.removeListener('onError', errorSubscription);
    // 或者一次性移除所有监听器
    // CozeRtc.removeAllListeners();
  };
}, []);

录音和播放

开始录音

const startRecording = async () => {
  try {
    const success = await CozeRtc.startRecord();
    if (success) {
      console.log('开始录音成功');
    } else {
      console.log('开始录音失败');
    }
  } catch (error) {
    console.error('开始录音错误:', error);
  }
};

结束录音

const stopRecording = async () => {
  try {
    const success = await CozeRtc.endRecord();
    if (success) {
      console.log('结束录音成功');
    } else {
      console.log('结束录音失败');
    }
  } catch (error) {
    console.error('结束录音错误:', error);
  }
};

取消会话

const cancelCurrentChat = async () => {
  try {
    await CozeRtc.cancelChat();
    console.log('会话已取消');
  } catch (error) {
    console.error('取消会话错误:', error);
  }
};

清除缓冲区

const clearAudioBuffers = async () => {
  try {
    await CozeRtc.clearBuffers();
    console.log('缓冲区已清除');
  } catch (error) {
    console.error('清除缓冲区错误:', error);
  }
};

完整示例

以下是一个完整的示例，展示了如何在 React Native 应用中使用 Coze RTC SDK：

import React, { useEffect, useState } from 'react';
import { View, Text, TouchableOpacity, StyleSheet, Alert } from 'react-native';
import CozeRtc from 'react-native-coze-rtc';

const CozeVoiceChat = () => {
  const [isListening, setIsListening] = useState(false);
  const [subtitle, setSubtitle] = useState('');
  const [isConnected, setIsConnected] = useState(false);

  useEffect(() => {
    // 初始化SDK
    const initializeSDK = async () => {
      try {
        await CozeRtc.initialize();
        console.log('Coze SDK 初始化成功');
      } catch (error) {
        console.error('Coze SDK 初始化失败:', error);
        Alert.alert('错误', '初始化失败: ' + error.message);
      }
    };

    // 设置事件监听器
    const setupListeners = () => {
      // WebSocket连接事件
      CozeRtc.addListener('onWebSocketOpen', (data) => {
        console.log('WebSocket已连接:', data.message);
        setIsConnected(true);
      });

      CozeRtc.addListener('onWebSocketError', (data) => {
        console.error('WebSocket错误:', data.error);
        Alert.alert('连接错误', data.error);
      });

      // 字幕事件
      CozeRtc.addListener('onSubtitleReceived', (data) => {
        setSubtitle(data.content);
      });

      // 语音识别事件
      CozeRtc.addListener('onAudioTranscriptUpdate', (data) => {
        setSubtitle(`您: ${data.content}`);
      });

      CozeRtc.addListener('onAudioTranscriptCompleted', (data) => {
        setSubtitle(`您: ${data.content}`);
      });

      // 错误事件
      CozeRtc.addListener('onError', (data) => {
        console.error('错误:', data.message);
        Alert.alert('错误', data.message);
      });
    };

    initializeSDK();
    setupListeners();

    // 组件卸载时清理
    return () => {
      CozeRtc.removeAllListeners();
      CozeRtc.release();
    };
  }, []);

  const handlePressIn = async () => {
    try {
      // 先取消当前会话
      await CozeRtc.cancelChat();
      
      // 清空字幕
      setSubtitle('');
      
      // 开始录音
      const success = await CozeRtc.startRecord();
      if (success) {
        setIsListening(true);
      } else {
        Alert.alert('错误', '开始录音失败');
      }
    } catch (error) {
      console.error('开始录音错误:', error);
      Alert.alert('错误', '开始录音失败: ' + error.message);
    }
  };

  const handlePressOut = async () => {
    if (isListening) {
      setIsListening(false);
      try {
        const success = await CozeRtc.endRecord();
        if (!success) {
          Alert.alert('错误', '结束录音失败');
        }
      } catch (error) {
        console.error('结束录音错误:', error);
        Alert.alert('错误', '结束录音失败: ' + error.message);
      }
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.connectionStatus}>
        {isConnected ? '已连接' : '未连接'}
      </Text>
      
      <View style={styles.subtitleContainer}>
        <Text style={styles.subtitle}>{subtitle}</Text>
      </View>
      
      <TouchableOpacity
        style={[styles.recordButton, isListening && styles.recordingButton]}
        onPressIn={handlePressIn}
        onPressOut={handlePressOut}
      >
        <Text style={styles.buttonText}>
          {isListening ? '松开结束' : '按住说话'}
        </Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  connectionStatus: {
    position: 'absolute',
    top: 20,
    right: 20,
    padding: 8,
    borderRadius: 4,
    backgroundColor: '#f0f0f0',
  },
  subtitleContainer: {
    flex: 1,
    width: '100%',
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  subtitle: {
    fontSize: 18,
    textAlign: 'center',
    color: '#333',
  },
  recordButton: {
    width: 150,
    height: 150,
    borderRadius: 75,
    backgroundColor: '#4CAF50',
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: 30,
  },
  recordingButton: {
    backgroundColor: '#F44336',
  },
  buttonText: {
    color: 'white',
    fontSize: 18,
    fontWeight: 'bold',
  },
});

export default CozeVoiceChat;

API 参考

核心方法

事件监听方法

事件类型

故障排除

常见问题

1. 无法连接到服务器

   • 检查网络连接
   • 确保 SDK 初始化正确

2. 录音权限问题

   • 确保在 AndroidManifest.xml 中声明了 RECORD_AUDIO 权限
   • 确保在运行时请求了录音权限
   • 使用 checkRecordPermission() 方法检查权限状态

3. 音频播放问题

   • 检查设备音量
   • 确保音频格式配置正确

4. 事件监听器不工作

   • 确保正确添加了事件监听器
   • 检查事件名称是否正确
   • 确保在组件卸载时移除了监听器

注意事项

1. 该 SDK 目前仅支持 Android 平台
2. 最低支持的 Android 版本为 Android 6.0 (API 23)
3. 使用前必须获取录音权限
4. 在组件卸载时应调用 release() 方法释放资源
5. 在组件卸载时应移除所有事件监听器，以避免内存泄漏

版本历史

• 1.0.1 - 当前版本
  • 初始发布版本
  • 支持基本的语音录制和播放功能
  • WebSocket 连接管理
  • 实时字幕显示