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 šš
Former teacher turned developer.
On the developer relations team at Deepgram, I get to teach and build stuff, blending both of my professional passions - education and development.
@sandrarodgers I'm stuck :D Fetch can't send my stream data to Deepgram from front end. I've been told it's not possible to send the stream itself from the front end that's why I gave up on this option in the first place (stackoverflow.com/questions/714894... )
I found something I'm trying to use but I believe this will be a different way to do it. I will fetch the stream and play it in my browser and send audio to Deepgram from my browser after converting it ( gist.github.com/revolunet/e620e2c5... )
Former teacher turned developer.
On the developer relations team at Deepgram, I get to teach and build stuff, blending both of my professional passions - education and development.
Yes stream like the hosted BBC.
The one captured by browser microphone is working fine in my project as you can see in live transcription section but the live stream section I want it to send the live stream link like the one hosted by BBC to deepgram and receive transcription.
Former teacher turned developer.
On the developer relations team at Deepgram, I get to teach and build stuff, blending both of my professional passions - education and development.
Yes, it is trickier than I first said. I was able to do it though.
Here is an example. You need to change the API key to your key. And you might need to refresh a couple times. Open the console and make sure there isn't an error. But you should see the text transcript show up on the screen.
Former teacher turned developer.
On the developer relations team at Deepgram, I get to teach and build stuff, blending both of my professional passions - education and development.
This example takes the BBC url, fetches the data that comes back as a ReadableStream (the response body), and converts that to data to send to Deepgram:
consturl='https://stream.live.vc.bbcmedia.co.uk/bbc_radio_fourlw_online_nonuk';fetch(url).then((response)=>response.body).then((body)=>{// use method to parse audio datareadAllChunks(body);});
The function readAllChunks takes the response (which is a ReadableStream) and uses the getReader() to convert it into audio data that can be sent to Deepgram. So instead of using response.json() like in my basic fetch example, it uses response.getReader() to deal with that data type.
Former teacher turned developer.
On the developer relations team at Deepgram, I get to teach and build stuff, blending both of my professional passions - education and development.
Former teacher turned developer.
On the developer relations team at Deepgram, I get to teach and build stuff, blending both of my professional passions - education and development.
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 šš
You're welcome!
@sandrarodgers I'm stuck :D Fetch can't send my stream data to Deepgram from front end. I've been told it's not possible to send the stream itself from the front end that's why I gave up on this option in the first place (stackoverflow.com/questions/714894... )
I found something I'm trying to use but I believe this will be a different way to do it. I will fetch the stream and play it in my browser and send audio to Deepgram from my browser after converting it ( gist.github.com/revolunet/e620e2c5... )
You mean a stream like the hosted BBC stream, right? Or do you mean your stream that is being captured by the browser microphone?
Let me know which one, and I'll try to send you some code examples.
Yes stream like the hosted BBC.
The one captured by browser microphone is working fine in my project as you can see in live transcription section but the live stream section I want it to send the live stream link like the one hosted by BBC to deepgram and receive transcription.
Yes, it is trickier than I first said. I was able to do it though.
Here is an example. You need to change the API key to your key. And you might need to refresh a couple times. Open the console and make sure there isn't an error. But you should see the text transcript show up on the screen.
stackblitz.com/edit/web-platform-v...
This example takes the BBC url, fetches the data that comes back as a ReadableStream (the response body), and converts that to data to send to Deepgram:
The function
readAllChunks
takes the response (which is a ReadableStream) and uses the getReader() to convert it into audio data that can be sent to Deepgram. So instead of usingresponse.json()
like in my basic fetch example, it usesresponse.getReader()
to deal with that data type.I was able to write this because I found this stack overflow question that helped me.
Tell me if this works for you! Good luck!
Awesome! I spent hours trying to do it I'm so glad that it's not impossible. Will work on it and let you know of the updates.
Thank you so much for helping :)
Below is the final VueJS method that I tried this morning. Will delete it and start over with your code and I hope it will work for me.
Thanks again :)
Yep, looks like you just need to turn that
response.body
into a data format that can be passed on to Deepgram.It works just fine :) bereadable.netlify.app/livestream
Thank you so much Sandra this is really awesome and huge improvement to the functionality of the tool.
Awesome! I'm so glad it works.
Your project is so beautiful!
Thank you! It's an honor to me that you like it š