将音频从 React.js 流式传输到 Flask

问题描述

我的目标是创建一个网站，该网站可以将音频数据从麦克风流式传输到后端以进行处理和实时响应（例如，以实时转录为例）。目前，我的项目有一个 React.js 前端和一个 Flask 后端（我所有的预处理都是在 python 中进行的），我从媒体中找到了关于这个特定任务的这篇很棒的教程：

https://medium.com/google-cloud/building-a-client-side-web-app-which-streams-audio-from-a-browser-microphone-to-a-server-part-ii-df20ddb47d4e

现在，我已经完成了前端代码的复制。此任务的相关代码是：

const socketio = io('http://localhost:5000');
##Some other code ##
navigator.getUserMedia({
  audio: true
},function (stream) {

  //5)
  recordAudio = RecordRTC(stream,{
    type: 'audio',//6)
    mimeType: 'audio/webm',sampleRate: 44100,// used by StereoAudioRecorder
    // the range 22050 to 96000.
    // let us force 16khz recording:
    desiredSampRate: 16000,// MediaStreamRecorder,StereoAudioRecorder,WebAssemblyRecorder
    // CanvasRecorder,GifRecorder,WhammyRecorder
    recorderType: StereoAudioRecorder,// Dialogflow / STT requires mono audio
    numberOfAudioChannels: 1,timeSlice: 100,ondataavailable: function (blob) {

      // 3
      // making use of socket.io-stream for bi-directional
      // streaming,create a stream
      var stream = ss.createStream();
      // stream directly to server
      // it will be temp. stored locally
      ss(socket).emit('stream',stream,{
        name: 'stream.wav',size: blob.size
      });
      // pipe the audio blob to the read stream
      ss.createBlobReadStream(blob).pipe(stream);

      console.log("Sent some data hopefully")
    }
  });

现在，我的 Flask 后端能够从前端获取连接，但它永远不会看到来自音频数据流的任何发射。基本上，我的目标是从教程的下一部分复制教程：

https://medium.com/google-cloud/building-a-web-server-which-receives-a-browser-microphone-stream-and-uses-dialogflow-or-the-speech-62b47499fc71

它创建一个 Express 服务器并执行一些 NLP 任务。我的目标是在 Flask 后端通过谷歌云语音到文本运行流，并将转录结果实时发送到 React 前端。我看了看，Google 确实有一个关于 Node.js 和 Python 的教程，位于此处：

https://cloud.google.com/speech-to-text/docs/streaming-recognize#speech-streaming-mic-recognize-python

python 代码使用 Microphonestream 使用 pyAudio 作为流/生成器并将其传递到谷歌云客户端。

with Microphonestream(RATE,CHUNK) as stream:
    audio_generator = stream.generator()
    requests = (
        speech.StreamingRecognizeRequest(audio_content=content)
        for content in audio_generator
    )

    responses = client.streaming_recognize(streaming_config,requests)

    # Now,put the transcription responses to use.
    listen_print_loop(responses)

我的问题是如何让 Flask 接受来自前端的 BlobReadStream 数据并创建一个 python 生成器，以便我可以将数据输入到谷歌云中？我曾考虑过的一件事是使用异步或线程来生成一个 blob 队列，就像在谷歌云教程中一样，而另一个线程通过谷歌云异步运行它们。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）