score:5
Accepted answer
safari support:
i was able to add support for mediarecorder
api in safari by using audio recorder polyfill. you can check this npm package here.
steps (react js):
- install the package using
npm i audio-recorder-polyfill
- add this piece of code in public/index.html. this will make sure that the polyfill is loaded only for the browsers which do not support
mediarecorder
api.
<script>
// load this bundle only for browsers without mediarecorder support
if (!window.mediarecorder) {
document.write(
decodeuri('%3cscript defer src="/polyfill.js">%3c/script>')
)
}
</script>
- add this piece of code in src/index.tsx or src/index.js. this will assign this polyfill to mediarecorder present in window object.
import audiorecorder from 'audio-recorder-polyfill'
window.mediarecorder = audiorecorder
- if you are using typescript, you might have to add type declarations in src/audio-recorder-polyfill.d.ts
declare module 'audio-recorder-polyfill'
Source: stackoverflow.com
Related Query
- Mediarecorder: How to support audio recording on Safari, IE 11?
- How do I restrict the type of React Children in TypeScript, using the newly added support in TypeScript 2.3?
- How to add <canvas> support to my tests in Jest?
- How can one extend React types to support html attributes as props?
- How to allow react-native to enable support for JSX (extension) files
- How to set srcObject on audio element with React
- How to handle Audio playing in React & Redux
- React & SVG: How do I make <path> support onClick?
- How to use 'pagehide' event in safari to prevent unloading?
- How does react trigger componentDidMount with safari cache?
- How to implement Video and/or Audio calling in React Native Expo application
- How to configure Stylus support in a React.js application?
- How to make create-react-app support .mjs files with webpack?
- How to add RTL support for Material UI React
- Audio Recording in ReactJS
- How to fix 'module not found' for audio files using file-loader? Images, CSS, and JSON are working just fine
- How to get audio element?
- Mobile Safari skips first seconds of HTML Audio on play()
- How to convert Audio buffer to MP3 in Javascript?
- Redux Form, Radio Button Fields, how to support variable values?
- How react Infinite Queries support with offset and limit
- How to config Ant Design in Next.js with custom theme & support CSS Module feature
- How to support react js app for 2 different sub domains
- Support for the experimental syntax 'decorators-legacy' isn't currently enabled How To Enable In Create React App?
- How to handle audio stream in JsSIP?
- React: How to read audio file and provide preview before upload?
- How to record web/browser audio output (not microphone audio)
- How to play audio in REACT app while browser tab is inactive?
- How to add emmet support for .mdx / markdown react file types in vscode
- How to run common code before all onclick handlers in a React app? (to work around Safari middle-button click bug)
More Query from same tag
- React-Native: How to open google play store from react native app?
- Receiving ALL props in a child component
- Using RxJs takeUntil() function with apollo-client
- How to use external js files in reactjs
- Error: Too many re-renders. React limits the number of renders to prevent an infinite loop. React js
- React js datetimepicker usage inside component
- typescript:'ProtectRoute' cannot be used as a JSX component
- GetStaticPaths Error:Objects are not valid as a React child (found: object with keys {}).If you meant to render a collection of children, use an array
- (parameter) e:any error in React typescript
- Simple D3: circles not appending to svg element
- State of react app is not current with what I have in my database?
- React JS: Calling two functions in an onClick event does not run functions
- How to uncheck all the checkboxes in a list of checkbox programmatically in react hooks?
- How to override Material-UI Popover styles?
- Handling Null Object Property Value in Component
- useEffect hook called on initial render without dependency changing
- npm ERR! code ENOLOCAL npm ERR! Could not install from "Ibrahi\AppData\Roaming\npm-cache\_npx\8992" as it does not contain a package.json file
- I need to re render state and make onChange operator work on input element
- How do I rewrite all urls to index.html in Heroku?
- How to access css class with React?
- Prevent React Router from accessing directly an URL without navigating
- React : Mapping over an array inside of a mapped array
- <Menu> throws "type is invalid" error ... no matter what I do
- Uglify css classname like instagram or facebook
- How can I align items in <div> with CSS in a React app?
- filter out the row data while searching from input
- Can one control the state of Antd Table's "Check All" control?
- How to implement responsive layout in Ant Design form?
- Why is my PhotoComponent not updating with the correct photos?
- font-weight: 100 is not working in reactjs/javascript