DEV Community

BeReadable - Online Multilingual Audio Transcription and Recorder

Mostafa Said on March 20, 2022

Overview of My Submission Lets start this one with a question. Does my audio need a transcript? Short answer: yes. In the world of inter...

Read full post

BekahHW • Mar 22 '22

This looks great! I can't get the livestream option to work though. It plays, but doesn't transcribe.

Mostafa Said • Mar 22 '22

It was working last time I tested it 😅 It should work only if the sound comes from external speakers and the mic is close to it. I tried to find a way to send the livestream itself over to Deepgram and receive the transcription but figured it's not possible.

BekahHW • Mar 22 '22

ahhh. ok. I had headphones plugged in. Have you checked out our "getting started with streaming docs"? This part of the docs might help too.

Mostafa Said • Mar 22 '22

Yes I tried to follow this one but I can't use SDKs in Vuejs that's why my only option was to use WebSocket to transfer the user media to Deepgram but it can't pass the live stream itself unfortunately. Thanks for helping 🙏🙏

SandraMartin • Mar 23 '22

Hi Mostafa!

We were chatting about this earlier today and it was suggested that it would be preferable for your livestream to fetch the stream data using the stream url, rather than record the stream with the microphone.

There's an example on the docs of fetching this BBC livestream. Look at the node.js example on the docs here:

developers.deepgram.com/documentat....

The node code for fetch is:

fetch(url).then(r => r.body).then(res => {
    res.on('readable', () => {
        if(deepgramLive.getReadyState() == 1) {
            deepgramLive.send(res.read())
        }
    })
})

However, since you are doing the transcription on the frontend, you could use the fetch API.

I have an example codepen of a basic fetch request here: codepen.io/sandrarodgers/pen/VwzrZPe

You've probably used fetch before, but just wanted to provide an example. I think you should try fetching the livestream directly and sending that to Deepgram to transcribe. That's my suggestion!

Your project is awesome by the way! It looks so great!

Mostafa Said • Mar 23 '22

Omg! This is exactly what I was looking for. I'm glad to hear that it can work from the frontend side with fetch, I will work on this as soon as I get home and maybe update the UI and release a modified version of it. Thank you so much 🙏😊