如何在 React Native 上捕获麦克风音频并将其流式传输到 IceCast 端点？

Posted 2023-03-27

【中文标题】如何在 React Native 上捕获麦克风音频并将其流式传输到 IceCast 端点？

【英文标题】：How to capture microphone audio on React Native and stream it to IceCast endpoint?

【发布时间】：2020-05-09 20:46:52

【问题描述】：

我正在开发一个 React Native 移动无线电应用程序（在 android API 28 作为目标和 26 作为检查，模拟器和物理设备上进行测试），其想法是使无线电频道主机能够与手机麦克风交谈并将该音频覆盖在广播音乐上。

我正在使用 IceCast 2 和 Liquidsoap （成功）将音乐流式传输给听众，并混入一个麦克风流（liquidsoap input.harbor，位于 URL:PORT/ICECAST_ENDPOINT），我目前能够将麦克风流式传输到使用butt.

现在我的问题是如何从移动设备捕获麦克风输入，然后将其从 React Native 应用程序流式传输到相同的 URL 端点？

我尝试过使用react-native-microphone-stream，但从未调用过监听器 lambda：

import React,  useState, useEffect  from 'react';
import  View, StyleSheet, TouchableOpacity, Text  from 'react-native';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import MicStream from 'react-native-microphone-stream';

/**
 * STYLING
 */
const styles = StyleSheet.create(
  container: 
    flex: 0.1,
    height: 5,
    width: '100%',
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
    paddingVertical: 4,
    paddingHorizontal: 16,
    backgroundColor: 'black',
    paddingHorizontal: 32,
  ,
  autoFadeButton: 
    color: 'white',
    textAlignVertical: 'center',
    alignSelf: 'center',
  ,
  microphoneButton: 
    flexDirection: 'row',
    color: '#B52C55',
  ,
);

/**
 * Navigational function for choosing the channel and searching for new channels
 */
export default function ActionBar() 
  const [auto, setAuto] = useState(false);
  const [recording, setRecording] = useState(false);
  const listener = MicStream.addListener((data) => console.log('data', data)); // This never occurs

  MicStream.init(
    bufferSize: 4096,
    sampleRate: 44100,
    bitsPerChannel: 16,
    channelsPerFrame: 1,
  );

  function toggleRecord() 
    if (recording) 
      console.log('starting mic');
      MicStream.start();
     else 
      console.log('stopping mic');
      MicStream.stop();
    
  

  useEffect(() => 
    return () => listener.remove();
  , []);

  useEffect(() => 
    toggleRecord();
  , [recording]);

  return (
    <View style=styles.container>
      <TouchableOpacity onPress=() => setAuto(!auto)>
        <Text style=styles.autoFadeButton>Auto.</Text>
      </TouchableOpacity>
      <TouchableOpacity
        style=styles.microphoneButtonBroadcasting
        onPress=() => setRecording(!recording)
      >
        <Icon
          name="microphone-outline"
          size=40
          color=recording ? '#B52C55' : 'grey'
        />
      </TouchableOpacity>
      <TouchableOpacity>
        <Icon
          style=[ transform: [ scaleX: 2 ,  scaleY: 0.8 ] ]
          name="chevron-down"
          size=40
          color="white"
        />
      </TouchableOpacity>
    </View>
  );

【问题讨论】：

你能在 react native 中成功流式传输到 icecast。如果是的话，你能指导我你是怎么做到的吗？您使用了什么技术栈？

【参考方案1】：

是的，因为您忘记在 android / ios 上请求麦克风权限。