Feat: Record Plugin - Choose Mic #3256
Conversation
src/plugins/record.ts
Outdated
| // Request access to the microphone before enumerating devices, otherwise | ||
| // the browser will not return any device IDs | ||
| let stream: MediaStream | ||
| try { | ||
| stream = await navigator.mediaDevices.getUserMedia({ | ||
| audio: true, | ||
| }) | ||
| } catch (err) { | ||
| throw new Error('Error getting audio devices: ' + (err as Error).message) | ||
| } | ||
| this.stream = stream | ||
| this.stopMic() |
There was a problem hiding this comment.
Looks good overall, thank you!
These lines are almost the same as in startMic, should we just call it here? Or maybe throw an error like Please start the microphone first.
There was a problem hiding this comment.
Possibly. I was concerned about how these lines from startMic would affect it? It doesn't need to render the stream when calling the function. What do you think?
const onDestroy = this.renderMicStream(stream)
this.subscriptions.push(this.once('destroy', onDestroy))
There was a problem hiding this comment.
I could also use this: https://developer.mozilla.org/en-US/docs/Web/API/Permissions/query
Then if no permission - call startMic
There was a problem hiding this comment.
Sorry for all the suggestions here. It would be nice if this was actually a static function and didn't touch the main class properties. It would keep similar code here but just use the local variable and use similar code to stopMic to ensure the steam gets deallocated.
There was a problem hiding this comment.
Landed on removing starting a stream and just adding better docs.
The permissions api I shared doesn't support a microphone query in Firefox 🤷🏻♂️
|
@katspaugh updated. Let me know your thoughts 🙏🏻 |
|
@katspaugh @tscritch I'm getting an error when trying to use P.S. Thanks for implementing this super useful feature! |
| const micSelect = document.querySelector('#mic-select') | ||
| { | ||
| // Mic selection | ||
| record.getAvailableAudioDevices().then((devices) => { |
There was a problem hiding this comment.
I think this needs to be RecordPlugin
There was a problem hiding this comment.
Good catch! Could you make a PR?
Short description
Resolves #3245
Open to feedback!
Implementation details
startMicandstartRecordingto use a specific mic (via deviceId)getAvailableAudioDevicesHow to test it
In Chrome, you can reset the "Allow Mic" permissions by going to Settings > Privacy and Security > Site settings > Microphone > Click trash icon on
wavesurfer.xyzorlocalhost:9090.Screenshots
Checklist