1

I was able to set up an Arduino to stream audio from a microphone into a linux server that's hosting an MQTT server. I then have a golang script that subscribes to the MQTT server, saves payload to disk as a binary file, and converts the binary file to a .WAV file with FFMPEG.

Is it possible to have a web browser use only client side code to subscribe to the same MQTT server, receive the audio payload from the Arduino, and stream the audio in near-real-time to the human listener's computer speakers? I see a Paho Javascript Client library that can help me connect to MQTT, but it seems to receive payloads as string, which isn't evident to me on how I'd stream audio content with. Hence, why I'm asking if it's even practical/feasible?

Or will I need to build another server-side script to stream MQTT data as audio data for a web client?

John
  • 32,403
  • 80
  • 251
  • 422
  • This question is far too broad to get a proper answer. I've answered the question about getting hold of the raw binary data, but you should edit question down to just that and ask a new one about doing audio processing in the browser – hardillb Mar 22 '19 at 12:57
  • @hardillb thanks, I'm close to posting a complete answer to what I realize now is 2 part question. Once I get the websocket working for mqtt broker, I'll post what I did, along with the client side HTML/Javascript AudioContext code that solves my problem. Should be a relatively concise and simple answer unless I run into problems. – John Mar 22 '19 at 13:05
  • I ran into road blocks, so I'll return to this problem later. The road blocks are A) when you stream MQTT at too fast of a speed (eg. enough to play a 24khz audio stream), a client device (both Web Browser client using paho mqtt or an Arduino+ESP8266 device with PubSubClient) experiences frequent disconnections (several times a second) and B) I couldn't find a way to adapt an `mqtt.message.payloadBytes` into a `MediaStream` data type for `AudioContext`, or any other data type that is readily useable by a web based audio player. – John Mar 22 '19 at 19:17

2 Answers2

0

Look closer at the paho doc, there is a fiction to get the message payload as binary data using the message.payloadBytes field.

payloadBytes | ArrayBuffer | read only The payload as an ArrayBuffer

An example is described here:

https://www.hardill.me.uk/wordpress/2014/08/29/unpacking-binary-data-from-mqtt-in-javascript/

But basically you end up withan ArrayBuffer holding the binary data that you can then coonvert to a Typed Array and read back values at what ever offset you need.

hardillb
  • 54,545
  • 11
  • 67
  • 105
0

To ensure it works in all environments, ensure that you use MQTT over WebSocket to connect to the server.

Here is a discussion of this: Can a web browser use MQTT?

Stefan Vaillant
  • 511
  • 3
  • 6