Как создать живой медиа поток с Javascript - PullRequest
0 голосов
/ 25 мая 2018

Я хочу создать прямой аудиопоток с одного устройства на сервер узла, который затем может транслировать этот прямой эфир на несколько внешних интерфейсов.

Я много раз искал это и действительно ударился о стену, поэтомунадеясь, что кто-то там может помочь.

Я могу получить свой аудиовход от window.navigator.getUserMedia API.

getAudioInput(){
  const constraints = { 
    video: false, 
    audio: {deviceId: this.state.deviceId ? {exact: this.state.deviceId} : undefined},
  };

  window.navigator.getUserMedia(
    constraints, 
    this.initializeRecorder, 
    this.handleError
  );
}

Затем этот поток передается в функцию initializeRecorder, которая использует API AudioContext для создания createMediaStreamSource`

initializeRecorder = (stream) => {
  const audioContext = window.AudioContext;
  const context = new audioContext();
  const audioInput = context.createMediaStreamSource(stream);
  const bufferSize = 2048;
  // create a javascript node
  const recorder = context.createScriptProcessor(bufferSize, 1, 1);
  // specify the processing function
  recorder.onaudioprocess = this.recorderProcess;
  // connect stream to our recorder
  audioInput.connect(recorder);
  // connect our recorder to the previous destination
  recorder.connect(context.destination);
}

В моей функции recorderProcess я теперьу меня есть AudioProcessingEvent объект, который я могу транслировать.

В настоящее время я передаю звуковое событие как поток через соединение через сокет, например:

recorderProcess = (e) => {
  const left = e.inputBuffer.getChannelData(0);
  this.socket.emit('stream', this.convertFloat32ToInt16(left))
}

Это лучшее или единственноеспособ сделать это?Есть ли лучший способ, используя fs.createReadStream и затем отправляя конечную точку через Axios?Насколько я могу судить, это будет работать только с файлом, а не с непрерывным живым потоком?

Сервер

У меня очень простой сокет-сервер, работающий поверхвыразить.В настоящее время я слушаю потоковое событие и затем отправляю тот же самый вход:

io.on('connection', (client) => {

  client.on('stream', (stream) => {
    client.emit('stream', stream)
  });

});

Не уверен, насколько это масштабируемо, но если у вас есть лучшее предложение, я очень открыт для него.

Клиент

Теперь я действительно застрял:

На моем клиенте я слушаю событие stream и хочу прослушать потокв качестве вывода звука в моем браузере.У меня есть функция, которая получает событие, но я застрял в том, как я могу использовать возвращаемый объект arrayBuffer.

retrieveAudioStream = () => {
  this.socket.on('stream', (buffer) => {
     // ... how can I listen to the buffer as audio
  })
}
  1. Является ли способ потоковой передачи аудио лучшим / единственным способом, которым яможно загрузить на сервер узла?
  2. Как прослушать объект arrayBuffer, возвращаемый на моей стороне клиента?

1 Ответ

0 голосов
/ 25 мая 2018
  1. Является ли способ потоковой передачи аудио лучшим / единственным способом загрузки на сервер узлов?

Не совсем лучший, но я видел хужеЭто не единственный способ использования веб-сокетов. С точки зрения точки зрения, это нормально, поскольку вы хотите, чтобы все было «живым» и не продолжало отправлять HTTP-запрос каждые 5 секунд.

Как я могу слушать объект arrayBuffer, который возвращается на моей клиентской стороне?

Вы можете попробовать это BaseAudioContext.decodeAudioData для прослушивания потоковых данныхпример довольно прост.


Из предоставленных вами фрагментов кода я предполагаю, что вы хотите создать что-то с нуля, чтобы узнать, как все это работает.

В этом случае вы можете попробовать MediaStream Recording API вместе с сервером веб-сокетов, который отправляет блоки X клиентам, чтобы они могли воспроизводить аудио и т. Д.

Было бы целесообразно потратить время на WebRTC API , чтобы узнать, как осуществлять потоковую передачу от клиента к другому клиенту.

Также посмотрите ссылки ниже для получения некоторой полезной информации.

...