Как записать звук с микрофона на React Native и передать его на конечную точку IceCast? - PullRequest
0 голосов
/ 23 января 2020

Я работаю над приложением мобильной радиосвязи React Native (тестирую на Android API 28 в качестве цели и 26 в качестве проверки, как эмулятора, так и физического устройства), и идея состоит в том, чтобы позволить хосту радиоканала общаться в микрофон телефона и чтобы это аудио накладывалось на радио musi c.

Я использую IceCast 2 и Liquid soap для (успешно) потоковой передачи музыки c на слушателей и микширования в микрофон поток (жидкостный soap input.harbor, по URL: PORT / ICECAST_ENDPOINT), который в настоящее время я могу направить на микрофон с помощью butt .

Теперь мой вопрос заключается в том, как захватить mi c вводить с мобильного устройства и затем передавать его на ту же конечную точку URL из приложения React Native?

Я пытался использовать response-native-микрофон-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>
  );
}
...