
Security News
Deno 2.2 Improves Dependency Management and Expands Node.js Compatibility
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
decooda-media-recorder
Advanced tools
The decooda-media-recorder is a js library for recording video (h.264) and audio (opus) in frontend applications. The base component has four main stages: initial, recording, playback, and submission. It also serves as a media player to either play only audio with visualizer bars or only video.
Node version v14.8.0 and npm version 6.14.11 are used for development.
First run
npm install
to in install all packages. Finally run
npm start
to open a webpage of the decooda-media-recorder dashboard
In root directory of app:
First run
npm install decooda-media-recorder
Import the library
import MediaRecorder from 'decooda-media-recorder'
The component accepts the following props:
audioLinkData || object {} || please follow the example:
{
"name": "test",
"type": "ogg",
"date": "April 30, 2021 9:00AM",
"link": ""https://actions.google.com/sounds/v1/ambiences/dmv_background_noise.ogg"
}
audioOnly || bool || default: false || if true, audio recording only; also, only audio in media upload options
audioVisualizer || bool || default: false || if true, no recording; play audio with visualizer bars only;
MUST include audioLinkData
fileOnly || bool || default: false || if true, file upload only option in media upload
getRecordedBlob || func || (required) function passed by host to library to retrieve the recorded blob
height || string || default: "auto" || set height of media recorder (optional)
insertTitle || bool || default: false || if true, will prompt user for title of media
recordingControls || bool || default: true || if true, it will display controls during video recording
showLinkBtn || bool || default: true || if true, will show insert link button
showUploadBtn || bool || default: true || if true, will show upload media button
videoOnly || bool || default: false || if true, video recording only; also only video in media upload options
width || string || default: "100%" || set width of media recorder (optional)
set the audioVisualizer to true
audioVisualizer || bool || default: false || if true, no recording; display audio visualizer only;
MUST include audioLinkData
supply the audio data:
audioLinkData || object {} || please follow the example:
{
"name": "test",
"type": "ogg",
"date": "April 30, 2021 9:00AM",
"link": ""https://actions.google.com/sounds/v1/ambiences/dmv_background_noise.ogg"
}
const getRecordedBlob = (blob) => {
//the func will send the recorded blob obj that the host can save or upload:
//console.log(blob)
/*
output:
{
title: "test"
time: date,
//the raw recorded blob
blobRaw: recordedBlob,
//the blob url
blobURL: url
//the blob as a data url
blobFile: file
}
*/
//do something with blob
}
<MediaRecorder
audioOnly={false}
audioLinkData={null}
audioVisualizer={false}
getRecordedBlob={getRecordedBlob}
insertTitle={false}
recordingControls={true}
showLinkBtn={false}
showUploadBtn={false}
/>
FAQs
Media recorder and player with visualizer bars
The npm package decooda-media-recorder receives a total of 2 weekly downloads. As such, decooda-media-recorder popularity was classified as not popular.
We found that decooda-media-recorder demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.