{"_id":"@dmk-dark/opus-media-recorder-fork","_rev":"2-8c4558ede83b9928639ca36a3b2c7e7c","name":"@dmk-dark/opus-media-recorder-fork","dist-tags":{"latest":"0.8.1"},"versions":{"0.8.0":{"name":"@dmk-dark/opus-media-recorder-fork","version":"0.8.0","keywords":["MediaRecorder","MediaStream","Opus","Ogg","WebM","WebAssembly","WASM","PCM","Decoder","Stream","Audio","Microphone","Mic","Recorder","Recording","Wav","Wave"],"author":{"name":"Bumsik Kim"},"license":"MIT","_id":"@dmk-dark/opus-media-recorder-fork@0.8.0","maintainers":[{"name":"dmk-dark","email":"dimaionov97@gmail.com"}],"homepage":"https://github.com/kbumsik/opus-media-recorder","dist":{"shasum":"7782e5c11364e00ce3125a849a217d81bc9eaf45","tarball":"https://registry.npmjs.org/@dmk-dark/opus-media-recorder-fork/-/opus-media-recorder-fork-0.8.0.tgz","fileCount":16,"integrity":"sha512-AVLo1hCcKpKQWA+90JcazIy+mXxu4zGu0KU4lVddTlLCfUMctoFwsYOaxBv8tkxsd/Vm1Lcf6AtRsaJVNdMifg==","signatures":[{"sig":"MEUCIGhjYEK+b7w+nBD1t52qkyO/e2oyTY8RqvKEjpBulJ9YAiEAu1aZ6jzgf2wJndeEp/WEbkLiNzR1BZdo66yW9izDco8=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":1126746},"main":"OpusMediaRecorder.js","pnpm":{"overrides":{"braces@<3.0.3":">=3.0.3","micromatch@<4.0.8":">=4.0.8","node-forge@<1.0.0":">=1.0.0","node-forge@<1.3.0":">=1.3.0","http-proxy-middleware@<2.0.7":">=2.0.7","webpack-dev-middleware@<=5.3.3":">=5.3.4"}},"types":"index.d.ts","gitHead":"7805c18b25918a1c82603f96b1e1630eb47a7b3e","scripts":{"build":"make","clean":"make clean","serve":"webpack-dev-server","webpack":"webpack-cli","build:production":"make PRODUCTION=1"},"_npmUser":{"name":"dmk-dark","email":"dimaionov97@gmail.com"},"repository":{"url":"https+git://github.com/dmk-dark/opus-media-recorder","type":"git"},"_npmVersion":"10.9.2","description":"MedialRecorer polyfill for Opus recording using WebAssembly","directories":{},"_nodeVersion":"22.13.1","dependencies":{"detect-browser":"^4.1.0","event-target-shim":"^3.0.2"},"_hasShrinkwrap":false,"devDependencies":{"jsdoc":"^3.5.5","eslint":"^5.12.0","webpack":"^4.28.4","@babel/cli":"^7.2.3","@babel/core":"^7.2.2","webpack-cli":"^3.2.1","babel-loader":"^8.0.5","magic-string":"^0.25.2","eslint-loader":"^2.1.1","@babel/preset-env":"^7.2.3","eslint-plugin-html":"^4.0.6","eslint-plugin-node":"^7.0.1","webpack-dev-server":"^3.1.14","eslint-plugin-import":"^2.14.0","eslint-plugin-promise":"^4.0.1","eslint-config-standard":"^11.0.0","eslint-plugin-standard":"^3.1.0","wrapper-webpack-plugin":"^2.1.0"},"_npmOperationalInternal":{"tmp":"tmp/opus-media-recorder-fork_0.8.0_1745229757210_0.17752860585166763","host":"s3://npm-registry-packages-npm-production"}},"0.8.1":{"name":"@dmk-dark/opus-media-recorder-fork","version":"0.8.1","author":{"name":"Bumsik Kim"},"license":"MIT","homepage":"https://github.com/dmk-dark/opus-media-recorder","description":"MedialRecorer polyfill for Opus recording using WebAssembly","main":"OpusMediaRecorder.js","types":"index.d.ts","repository":{"type":"git","url":"https+git://github.com/dmk-dark/opus-media-recorder"},"keywords":["MediaRecorder","MediaStream","Opus","Ogg","WebM","WebAssembly","WASM","PCM","Decoder","Stream","Audio","Microphone","Mic","Recorder","Recording","Wav","Wave"],"scripts":{"build":"make","build:production":"make PRODUCTION=1","webpack":"webpack-cli","serve":"webpack-dev-server","clean":"make clean"},"dependencies":{"detect-browser":"^4.1.0","event-target-shim":"^3.0.2"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/preset-env":"^7.2.3","babel-loader":"^8.0.5","eslint":"^5.12.0","eslint-config-standard":"^11.0.0","eslint-loader":"^2.1.1","eslint-plugin-html":"^4.0.6","eslint-plugin-import":"^2.14.0","eslint-plugin-node":"^7.0.1","eslint-plugin-promise":"^4.0.1","eslint-plugin-standard":"^3.1.0","jsdoc":"^3.5.5","magic-string":"^0.25.2","webpack":"^4.28.4","webpack-cli":"^3.2.1","webpack-dev-server":"^3.1.14","wrapper-webpack-plugin":"^2.1.0"},"pnpm":{"overrides":{"node-forge@<1.0.0":">=1.0.0","node-forge@<1.3.0":">=1.3.0","webpack-dev-middleware@<=5.3.3":">=5.3.4","braces@<3.0.3":">=3.0.3","micromatch@<4.0.8":">=4.0.8","http-proxy-middleware@<2.0.7":">=2.0.7"}},"_id":"@dmk-dark/opus-media-recorder-fork@0.8.1","gitHead":"ad22ce1d670732b2eb79ff7d327270984022690a","_nodeVersion":"22.13.1","_npmVersion":"10.9.2","dist":{"integrity":"sha512-x65A2einYLb1lTWBdOmvegqr+YScanybbbwhYnUXntMzVgvCuEMNvbevMmud2m+gT4TV8FeflhU9qRrTOISFgQ==","shasum":"403225a1074b4f63083906e311025400b358810f","tarball":"https://registry.npmjs.org/@dmk-dark/opus-media-recorder-fork/-/opus-media-recorder-fork-0.8.1.tgz","fileCount":16,"unpackedSize":1126800,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIDWtomVDHpDewu8Q5YQwKm+KfpgP10yCwlWUuUO3w7+WAiEAqcoeYhlBsZiLptaEVoaCZ8mje0MzWku4lKkEW5zs43Y="}]},"_npmUser":{"name":"dmk-dark","email":"dimaionov97@gmail.com"},"directories":{},"maintainers":[{"name":"dmk-dark","email":"dimaionov97@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/opus-media-recorder-fork_0.8.1_1745833710750_0.8510095201197803"},"_hasShrinkwrap":false}},"time":{"created":"2025-04-21T10:02:37.099Z","modified":"2025-04-28T09:48:31.154Z","0.8.0":"2025-04-21T10:02:37.415Z","0.8.1":"2025-04-28T09:48:30.984Z"},"author":{"name":"Bumsik Kim"},"license":"MIT","homepage":"https://github.com/dmk-dark/opus-media-recorder","keywords":["MediaRecorder","MediaStream","Opus","Ogg","WebM","WebAssembly","WASM","PCM","Decoder","Stream","Audio","Microphone","Mic","Recorder","Recording","Wav","Wave"],"repository":{"type":"git","url":"https+git://github.com/dmk-dark/opus-media-recorder"},"description":"MedialRecorer polyfill for Opus recording using WebAssembly","maintainers":[{"name":"dmk-dark","email":"dimaionov97@gmail.com"}],"readme":"# @dmk-dark/opus-media-recorder-fork\r\n\r\n## Fork Improvements\r\n\r\nThis fork of the original opus-media-recorder adds the following improvements:\r\n\r\n- **TypeScript Definitions**: Full TypeScript type support added for better developer experience\r\n- **GlobalThis Support**: Replaced direct `global` references with standard `globalThis` for better cross-environment compatibility\r\n- **Custom Sample Rate**: Added support for custom AudioContext sample rate through a new `audioOptions` parameter, allowing to control the recording quality\r\n- **Security Fixes**: Updated dependencies to resolve security vulnerabilities identified in the original package\r\n\r\nImportant: Throughout this documentation, please replace all references to opus-media-recorder with @dmk-dark/opus-media-recorder-fork.\r\nThe rest of the original documentation follows below.\r\n\r\n\r\n* [Try it!](https://kbumsik.io/opus-media-recorder/)\r\n* [JS Fiddle example](https://jsfiddle.net/kbumsik/v3wpnxao/)\r\n\r\n`opus-media-recorder` is a [MediaRecorder API](https://w3c.github.io/mediacapture-record/#mediarecorder-api) polyfill written in ES6 and WebAssembly. It aims for cross-browser Opus codec support with various audio formats such as Ogg and WebM. `opus-media-recorder` can be used as a polyfill, or it can replace the built-in MediaRecorder since `opus-media-recorder` supports more MIME types.\r\n\r\n`opus-media-recorder` uses WebAssembly compiled from popular libraries (e.g libopus, libogg, libwebm, and speexdsp) to ensure good performance and standards-compliance.\r\n\r\n- [Why opus-media-recorder?](#why-opus-media-recorder)\r\n- [How to use](#how-to-use)\r\n  - [Thing to know](#thing-to-know)\r\n  - [JavaScript](#javascript)\r\n    - [Examples](#examples)\r\n    - [Installation](#installation)\r\n    - [Working with a bundler](#working-with-a-bundler)\r\n    - [Simple JavaScript example (webpack)](#simple-javascript-example-webpack)\r\n  - [HTML `<script>` tag](#html-script-tag)\r\n  - [Use opus-media-recorder only when a browser doesn't support it](#use-opus-media-recorder-only-when-a-browser-doesnt-support-it)\r\n- [Browser support](#browser-support)\r\n- [MIME Type support](#mime-type-support)\r\n- [Limitations](#limitations)\r\n- [How to build](#how-to-build)\r\n- [Changelog](#changelog)\r\n\r\n## Why opus-media-recorder?\r\n\r\n|              | opus-media-recorder | Chrome | Firefox | iOS | Edge |\r\n|--------------|:-------------------:|:------:|:-------:|:---:|:----:|\r\n| `audio/ogg`  |          O          |    X   |    O    |  X  |   X  |\r\n| `audio/webm` |          O          |    O   |    X    |  X  |   X  |\r\n| `audio/wav`  |          O          |    X   |    X    |  X  |   X  |\r\n\r\n\\* Both `audio/ogg` and `audio/webm` refer containers for Opus audio codec.\r\n\r\nCurrently the MediaRecorder API suffers from the two problems:\r\n\r\n1. Not all browsers support MediaRecorder.\r\n2. Even the browsers that provides MediaRecorder don't support the same format.\r\n\r\n`opus-media-recorder` tackles these problems by supporting all major modern browsers (Chrome, Firefox, iOS, and Edge) and by providing various formats.\r\n\r\nBy taking advantages of WebAssembly and Web Workers, `opus-media-recorder` tries to have minimum performace penalties of running encoders in a browser.\r\n\r\n## How to use\r\n\r\nopus-media-recorder is compatible with the [Mediastream Recording API](https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder) standard.\r\n\r\n### Thing to know\r\n\r\n* The page must be served over HTTPS in order to record.\r\n* Being able to record does *not always* mean you can play it in a browser:\r\n  * macOS/iOS Safari cannot play Opus natively yet.\r\n  * Old Edge requires [an extension](https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6513488-ogg-vorbis-and-opus-audio-formats-support-firefox) to play Opus natively.\r\n  * You can get an Opus decorder to play it. There are Opus decoders available, such as [Chris Rudmin's Opus decoder](https://github.com/chris-rudmin/opus-recorder).\r\n  * Otherwise, users can download as a recording file and play it using apps like [VLC](https://www.videolan.org/vlc/index.html).\r\n* When `mimeType` is not specified a default encoder is loaded depending on OS:\r\n  * Chrome: `audio/webm`\r\n  * Firefox: `audio/ogg`\r\n  * Edge: `audio/webm`\r\n  * iOS/macOS Safari: `audio/wave` - because they cannot play Opus at all.\r\n\r\n### JavaScript\r\n\r\nFor standard usages of `MediaRecorder`, see the [MDN reference](https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder) and other online resources. Our [testing website](docs) and [example section](example) may be useful as well.\r\n\r\n#### Examples\r\n\r\n* [Webpack](example/webpack)\r\n* [create-react-app](example/create-react-app)\r\n* [Rollup](example/rollup)\r\n* [Browserify](example/browserify)\r\n\r\n#### Installation\r\n\r\n```bash\r\nnpm install --save-dev @dmk-dark/opus-media-recorder-fork\r\n```\r\n\r\n#### Working with a bundler\r\n\r\nBecause `opus-media-recorder` needs to load a dedicated web worker and `.wasm` binaries, special configurations are necessary. In general:\r\n\r\n```javascript\r\nimport OpusMediaRecorder from '@dmk-dark/opus-media-recorder-fork';\r\n// Choose desired format like audio/webm. Default is audio/ogg\r\nconst options = { mimeType: 'audio/ogg' }\r\n// Web worker and .wasm configuration. Note: This is NOT a part of W3C standard.\r\nconst workerOptions = {\r\n  encoderWorkerFactory: function () {\r\n    // UMD should be used if you don't use a web worker bundler for this.\r\n    return new Worker('.../path/to/opus-media-recorder/encoderWorker.umd.js')\r\n  },\r\n  OggOpusEncoderWasmPath: '.../path/to/opus-media-recorder/OggOpusEncoder.wasm',\r\n  WebMOpusEncoderWasmPath: '.../path/to/opus-media-recorder/WebMOpusEncoder.wasm'\r\n};\r\n\r\nwindow.MediaRecorder = OpusMediaRecorder;\r\nrecorder = new MediaRecorder(stream, options, workerOptions);\r\n```\r\n\r\n#### Simple JavaScript example (webpack)\r\n\r\n```javascript\r\nimport MediaRecorder from '@dmk-dark/opus-media-recorder-fork';\r\n// Use worker-loader\r\nimport EncoderWorker from 'worker-loader!opus-media-recorder/encoderWorker.js';\r\n// You should use file-loader in webpack.config.js.\r\n// See webpack example link in the above section for more detail.\r\nimport OggOpusWasm from 'opus-media-recorder/OggOpusEncoder.wasm';\r\nimport WebMOpusWasm from 'opus-media-recorder/WebMOpusEncoder.wasm';\r\n\r\n// Non-standard options\r\nconst workerOptions = {\r\n  encoderWorkerFactory: _ => new EncoderWorker(),\r\n  OggOpusEncoderWasmPath: OggOpusWasm,\r\n  WebMOpusEncoderWasmPath: WebMOpusWasm\r\n};\r\n\r\nlet recorder;\r\n\r\nfunction startRecording () {\r\n  navigator.mediaDevices.getUserMedia({ audio: true }).then(stream => {\r\n    let options = { mimeType: 'audio/ogg' };\r\n    // Start recording\r\n    recorder = new MediaRecorder(stream, options, workerOptions);\r\n    recorder.start();\r\n    // Set record to <audio> when recording will be finished\r\n    recorder.addEventListener('dataavailable', (e) => {\r\n      audioElement.src = URL.createObjectURL(e.data);\r\n    });\r\n  });\r\n}\r\n\r\n// Recording should be started in user-initiated event like buttons\r\nrecordButton.addEventListener('click', startRecording);\r\n\r\n// Stop recording\r\nstopButton.addEventListener('click', () => {\r\n  recorder.stop();\r\n  // Remove “recording” icon from browser tab\r\n  recorder.stream.getTracks().forEach(i => i.stop());\r\n})\r\n```\r\n\r\n### HTML `<script>` tag\r\n\r\nThe `OpusMediaRecorder` object is available in the global namespace using [UMD](https://github.com/umdjs/umd).\r\n\r\n```html\r\n<!-- load OpusMediaRecorder.umd.js. OpusMediaRecorder will be loaded. -->\r\n<script src=\"https://cdn.jsdelivr.net/npm/opus-media-recorder@latest/OpusMediaRecorder.umd.js\"></script>\r\n<!-- load encoderWorker.umd.js. This should be after OpusMediaRecorder. -->\r\n<!-- This script tag will create OpusMediaRecorder.encoderWorker. -->\r\n<script src=\"https://cdn.jsdelivr.net/npm/opus-media-recorder@latest/encoderWorker.umd.js\"></script>\r\n\r\n<script>\r\n...\r\n// If you already load encoderWorker.js using <script> tag,\r\n// you don't need to define encoderWorkerFactory.\r\nconst workerOptions = {\r\n  OggOpusEncoderWasmPath: 'https://cdn.jsdelivr.net/npm/opus-media-recorder@latest/OggOpusEncoder.wasm',\r\n  WebMOpusEncoderWasmPath: 'https://cdn.jsdelivr.net/npm/opus-media-recorder@latest/WebMOpusEncoder.wasm'\r\n};\r\n\r\n// Replace MediaRecorder\r\nwindow.MediaRecorder = OpusMediaRecorder;\r\nlet recorder = new MediaRecorder(stream, {}, workerOptions);\r\n...\r\n</script>\r\n```\r\n\r\n### Use opus-media-recorder only when a browser doesn't support it\r\n\r\n```javascript\r\n// Check if MediaRecorder available.\r\nif (!window.MediaRecorder) {\r\n  window.MediaRecorder = OpusMediaRecorder;\r\n}\r\n// Check if a target format (e.g. audio/ogg) is supported.\r\nelse if (!window.MediaRecorder.isTypeSupported('audio/ogg;codecs=opus')) {\r\n  window.MediaRecorder = OpusMediaRecorder;\r\n}\r\n```\r\n\r\n## Browser support\r\n\r\nSupported:\r\n\r\n* Chrome >= 58\r\n* Firefox >= 53\r\n* Microsoft Edge >= 41\r\n* Safari (macOS and iOS) >= 11\r\n\r\nBrowsers with issues:\r\n\r\n* iOS 11.2 only: Not working due to a regression in WebAssembly: https://bugs.webkit.org/show_bug.cgi?id=181781\r\n\r\n## MIME Type support\r\n\r\n* `audio/webm`\r\n* `audio/webm; codecs=opus`\r\n* `audio/ogg`\r\n* `audio/ogg; codecs=opus`\r\n* `audio/wav` or `audio/wave`\r\n\r\n## Limitations\r\n\r\n* Does not support Video recording.\r\n* `opus-media-recorder` throws generic Error objects instead of native DOMException.\r\n* Because `audio/wav` is not designed for streaming, when `mimeType` is `audio/wav`, each `dataavailabe` events produces a complete and separated `.wav` file that cannot be concatenated together unlike Ogg and WebM. Therefore, it is recommended not to use `timeslice` option when calling `start()`, unless you know what the implication is.\r\n* There is no [`SecurityError`](https://w3c.github.io/mediacapture-record/#exception-summary) case implemented. (WIP)\r\n\r\n## How to build\r\n\r\n1. To build from the source, you need [Emscripten](https://github.com/kripken/emscripten), [yarn](https://yarnpkg.com), Python 2.7 or higher, and basic C program build systems such as [GNU Make](https://www.gnu.org/software/make/).\r\n\r\n2. `yarn install` to install JavaScript dependencies.\r\n\r\n3. `yarn run build` to build. `yarn run build:production` to build files for distribution.\r\n\r\n4. `yarn run serve` to run a test web server locally. Default URL is `https://localhost:9000` (It has to be HTTPS). You might have to change `DEV_SERVER_URL` and `DEV_SERVER_PORT` to change the address of the local test server.\r\n\r\n5. `yarn run clean` to clean up build files.\r\n\r\n## Changelog\r\n\r\nSee [CHANGELOG.md](CHANGELOG.md).\r\n","readmeFilename":"README.md"}