Я работаю над мобильным радиоприложением React Native (тестирование Android API 28 в качестве цели и 26 в качестве проверки, как эмулятора, так и физического устройства), и идея состоит в том, чтобы позволить хосту радиоканала говорить в телефонный микрофон и иметь это аудио, наложенное на музыку радио.
Я использую IceCast 2 и Liquidsoap для (успешной) потоковой передачи музыки слушателям и смешивания в потоке микрофона (liquidsoap input.harbor, по адресу: PORT/ICECAST_ENDPOINT), который я в настоящее время могу передавать с микрофона, используя приклад.
Теперь мой вопрос: как захватить вход микрофона с мобильного устройства, а затем передать его на ту же конечную точку URL-адреса из приложения React Native?
Я пытался использовать react-native-microphone-stream, но слушатель лямбда никогда не вызывается:
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>
);
}