decooda-media-recorder

decooda-media-recorder

Description

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.

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:

First run

npm install decooda-media-recorder

Usage (React)

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)

To ONLY play audio with visualizer bars:

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"
  }

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

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}
  />