decooda-media-recorder

Description

The decooda-media-recorder or media visualizer 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.

Demo

https://decooda-media-recorder.netlify.app/

NPM site with latest version

https://www.npmjs.com/package/decooda-media-recorder

Installation and run commands for local testing

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

Installation in app (React)

In root directory of app run:

npm install decooda-media-recorder

Usage (React)

Import the library

import MediaRecorder from 'decooda-media-recorder'

The media recorder (visualizer) accepts the following props:

Name	Type	Default	Description
audioID	string	null	Required if audioVisualizer is set to true; Also, for multiple renders of the audio visualizer, please provide a unique audioID
audioLinkData	object {}		audio link data to display; please follow the example below
audioOnly	bool	false	if true, audio recording only; also, only audio option in media upload
audioVisualizer	bool	false	if true, no recording; only play audio with visualizer bars; MUST include audioLinkData
barsID	string	null	Required if audioVisualizer is set to true; Also, for multiple renders of the audio visualizer, please provide a unique barsID
fileOnly	bool	false	if true, file upload only option in media upload
getRecordedBlob	func		function passed by host to library to retrieve the recorded blob
height	string	"auto"	set height of media recorder
insertTitle	bool	false	if true, will prompt user for title of media
recordingControls	bool	true	if true, it will display controls during video recording
showLinkBtn	bool	true	if true, will show insert link button
showUploadBtn	bool	true	if true, will show upload media button
videoOnly	bool	false	if true, video recording only; also only video option in media upload
width	string	"100%"	set width of media recorder

To ONLY play audio with visualizer bars:

Set the audioVisualizer to true

<MediaRecorder
  ...
 audioVisualizer={true} 
  ...
/>

Supply the audio data; please follow this example:

const audioLinkData = 
{ 
  "name": "test", 
  "type": "ogg", 
  "date": "April 30, 2021 9:00AM", 
  "link": "https://actions.google.com/sounds/v1/ambiences/dmv_background_noise.ogg"
}

Supply a unique barsID

<MediaRecorder
  ...
  barsID="audio-bars"
  ...
/>

To do something with the recorded blob, pass a function:

//sends the recorded blob obj to the host to save, upload, etc:
const getRecordedBlob = (blob) => {
  console.log(blob)
  /*
  output:
  {
    //title if user prompted
    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
}