Live Streaming not working on mobile iOS - connection closing without error

[christophmeise]

What is the current behavior?

I am using the deepgram sdk for live streaming. It works fine on all browsers but on iPhone (Safari and Chrome) the connection just closes after a few seconds. There are not errors, it's closing with Code 1000 and no reason. For a few seconds I also get the interim results so I assume there is everything correct with the mime type, encoding and connection.

I also had trouble to recover from this closed connection. It would be nice to have a small example in the docs or as a demo.

Steps to reproduce

It's easily reproducable using live stream with any mobile iOS device. It is also happening in your own example repo: https://github.com/deepgram-starters/live-nextjs-starter

Expected behavior

The connection should not stop automatically or there should at least be a reason why it stopped.

Please tell us about your environment

We want to make sure the problem isn't specific to your operating system or programming language.

• Language: Next.js 14 + latest Deepgram SDK
• Browser: mobile iOS (all browsers) - it's working fine on desktop Mac/Windows

[lukeocodes]

Can you share some code for this reproducable?

[christophmeise]

Yes @lukeocodes - you can check your own repository where it also happens:

https://github.com/deepgram-starters/live-nextjs-starter

[tklausner]

I am also getting this issue on my own project. Please let me know if there are any updates @lukeocodes @christophmeise

Environment

Language: react 18.2 + typescript 4.9.5 + latest Deepgram SDK Browser: mobile iOS (all browsers) - it's working fine on desktop Mac

[nlinx]

Has there been any investigation into what could be causing this? I'm running into this with the example code too.

[lukeocodes]

It works for me in iOS. I used it for transcription on https://github.com/deepgram-devs/deepgram-conversational-demo which is fine on iOS, verified on iPhone 14, 15, and in the iOS simulator.

The issue that @christophmeise was speaking of was to do with iOS and Safari sending an empty blob chunk at the start of streaming. This would cause the websocket to close, as it's invalid audio data.

I have a PR in the works that includes a work-around for this anyway, but you can implement that fix yourself.

blob.size for blob size. Must be > 0 arrayBuffer.bytelength for array buffer size. Must be > 0

Closing as this is not an SDK bug, but a browser issue. It just so happens 3.4.x will include a work-around.

[DomenicoColandrea86]

I am having the same issue. @lukeocodes I'll take a look at your PR to see if I can implement the same workaround for now but any idea when you'll be releasing 3.4.x?

[sumit-anantwar]

Just incase anyone needs it, here's how I fixed the issue.

const recorder = new MediaRecorder(event.streams[0])
recorder.start(500)
recorder.ondataavailable = (e) => {
  const data = e.data
  if (data.size > 0) {   // <-- check that the blob is not empty
    console.log('client: sent data to websocket')
    if (this.dgSocket !== null) {
      this.dgSocket.send(data)
    }
  }
}