search

wmik / use-media-recorder

React based hooks to utilize the media recorder api for audio, video and screen recording
MIT License
115 stars 19 forks source link

Specifying a codec for the mimetype results in an error when trying to playback the blob in Safari #18

Open willdspd opened 2 years ago

willdspd commented 2 years ago

With the native MediaRecorder api, you can specify a codec for the mimetype with the following syntax: 'audio/mp4; codecs=mp4a.40.2'. This doesn't seem possible in the blobOptions object based on my tests. In Safari, I get the word 'Error' in the UI of the simple html audio element when trying to playback the blob.

wmik commented 2 years ago

Hi @williamdespard Apologies for the wait Unfortunately can't debug or patch this since the os im currently on doesn't support safari

Thanks for filing this though Would really appreciate info on anything else you encounter

Feel free to pull request if you have ideas or patches 🤝

{•!•}/

willdspd commented 2 years ago

Thanks for the response @wmik ! Should this syntax work in other browsers? Or is messing with the codec type not something you've stress tested?

wmik commented 2 years ago

Haven't stress tested all possible codecs since I'm not sure they're universally supported across browser But we currently have a simple check to warn the user if the codec isn't supported on their browser here:

https://github.com/wmik/use-media-recorder/blob/9b42d31ac25772554591e24edd05f7b6e8ff3ae0/index.js#L271-L274

Here are some useful links in case you're interested in investigating further:

Feel free to experiment and reach out for any further assistance

Cheers

\{•!•}/

willdspd commented 2 years ago

Sorry for the slow reply @wmik. I'm currently working on a project (using your library) so I don't have the time to look into this right now. But, this may become more of an issue for us in a few weeks/months so I may be able to get around to it then. What is for sure is that your library seems to be the best react hook based implementation of the Media Recorder API, and for anyone using it seriously, specifying codecs and mimetypes in a formalised way is really essential, beyond a hobby project. Great work so far!

wmik commented 2 years ago

Thanks for the feedback @williamdespard 🤝 Glad it's turning out to be a useful tool 🙇 And I appreciate you taking the time to help make it better 🥳 No rush

Most of the credit goes to the author of react-media-recorder Their work inspired this library

wmik commented 2 years ago

Origin story 😂 https://github.com/0x006F/react-media-recorder/issues/12