时间戳

首页 > 解决方案 > 如何在 React Native 上捕获麦克风音频并将其流式传输到 IceCast 端点？

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

问题描述

我正在开发一个 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>
  );
}

标签： androidreact-nativemicrophoneicecastliquidsoap

解决方案

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

推荐阅读