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

Question

>我正在开发一个 React Native 移动无线电应用程序(在 Android API 28 作为目标和 26 作为检查进行测试，包括模拟器和物理设备(，这个想法是使无线电频道主持人能够对着手机麦克风讲话，并将音频叠加在广播音乐上。

我正在使用IceCast 2和Liquidsoap(成功(将音乐流式传输给听众，并在麦克风流(liquidsoap input.harbor，网址：PORT/ICECAST_ENDPOINT(中混音，我目前可以使用屁股流式传输麦克风。

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

我尝试使用反应原生麦克风流，但从未调用侦听器 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>
);
}

Answer 1

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