在 React native 中通过 WebRTC 基于音频显示矢量声波 - React Native

问：

我有一个React Native应用程序，我必须根据通过WebRTC获得的音频显示矢量声波，如下图所示。

尝试以下代码发送音轨以显示声波。

import React, { useEffect, useState } from 'react';
import { View } from 'react-native';
import SoundWave from './SoundWave';

const App = () => {
  const [audioData, setAudioData] = useState([]); // State to store audio data

  useEffect(() => {
    // Function to handle incoming audio data from WebRTC stream
    const handleAudioData = (event) => {
      const { data } = **// Want to know how to send the audio track from webrtc to this variable**
      setAudioData(data);
    };

    // Initialize and configure your WebRTC audio stream
    const audioStream = new MediaStream();
    // ... Code to set up your WebRTC audio stream ...

    const audioContext = new AudioContext();
    const audioSource = audioContext.createMediaStreamSource(audioStream);
    const audioProcessor = audioContext.createScriptProcessor(4096, 1, 1);

    audioProcessor.onaudioprocess = handleAudioData;
    audioSource.connect(audioProcessor);
    audioProcessor.connect(audioContext.destination);

    // Cleanup function to disconnect audio nodes and clean up resources
    return () => {
      audioProcessor.disconnect();
      audioSource.disconnect();
      audioContext.close();
    };
  }, []);

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <SoundWave data={audioData} width={300} height={100} />
    </View>
  );
};

export default App;

在上面的代码中，想知道如何将 webrtc 音轨设置为 setAudioData（？）

我使用了如下组件。

import React from 'react';
import { View } from 'react-native';
import Svg, { Path } from 'react-native-svg';

const SoundWave = ({ data, width, height }) => {
  // Normalize the data values to fit within the height
  const normalizedData = data.map(value => value * height);

  // Calculate the width of each waveform segment
  const segmentWidth = width / (normalizedData.length - 1);

  // Generate the SVG path string based on the data
  const pathData = normalizedData
    .map((value, index) => `${index * segmentWidth},${value}`)
    .join(' ');

  return (
    <View style={{ width, height }}>
      <Svg width={width} height={height}>
        <Path
          d={`M0,${height / 2} L${pathData} L${width},${height / 2}`}
          fill="none"
          stroke="black"
        />
      </Svg>
    </View>
  );
};

export default SoundWave;

请让我知道如何获取音轨和更改（如果有）以进行计算以使声波正常工作。

提前致谢