I was looking for a Dash component that uses the user’s device’s microphone to record sound and save the recorded audio in base64 format. It seems such does not exist so I started to create one, but I’m new to React, so I’d appreciate to get help.
My use case is to build an app that would take speech from user’s microphone and visualize the audio data or do, e.g. speech-to-text with Google Cloud API. The reason I would convert the audio to base64 is that then it could be passed forward to dcc.Store in a callback and then transformed back to audio on the serverside. The recording needs to be done on the clientside in case the app is deployed to a server.
Basically this would require creating such component with React/javascript and then use the Dash boilerplate to turn it into a Dash component. I’m new to javascript/React so I was wondering if someone would want to collaborate with this one.
I’ve created a javascript demo with p5.js just to show the basic functionality.
I’m a bit stuck on how to turn this into React. The end-product should be a Dash component, e.g. dcc.Mic(id = 'my-id', data = <audio converted in base64>)
Hi @Tuomas_Gu , I have not actually. I received a GitHub Issue about something similar though and it seemed related to browser security policy. If you’re seeing some other behavior though feel free to create an issue.
TL;DR
These components which access a device microphone or camera require a secure connection for the hosted app/to access via the web. Localhost is secure by definition, so will work, but a lot of (especially free) generic web hosting services are not.
Full Story
Hey @Tuomas_Gu , I created my own version of this component (@danielcahall wish I had seen your post and your excellent work first so I could have saved myself the effort ) and I have it deployed to a web app. My component (and looking at the github repo linked here, I see the same method in Daniels’s version) relies on the built-in method getUserMedia:
which requires a secure connection. In my case, I tried deploying it as a Dockerized app via AWS first (tried both Elastic Beanstalk as well as containerizing myself, hosting on ECR and deploying on ECS), which is what I’ve done in the past (never used Heroku, so no experience to rely on there). Didn’t work – the frontend/page showed nothing happening when I clicked on the “Record”/“Stop” controls, and the clicks didn’t even show up in the app logs on AWS. Took a look into the web developer console and saw the error Uncaught (in promise) TypeError: navigator.mediaDevices is undefined. Some StackOverflowing later, it turns out that this method to get the device’s microphone/camera is only available for a secure connection, i.e. https .
For what it’s worth, I looked how to send ElasticBeanstalk traffic via https. It’s a huge PITA. However, Azure portal’s Web App server is https by default So I threw a version up there, and voila! The component renders and works fine.
Never thought I’d say it, but Microsoft for the win!!
) and I have it deployed to a web app. My component (and looking at the github repo linked here, I see the same method in Daniels’s version) relies on the built-in method 