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.

Demo

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

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 option in media upload

audioVisualizer || bool || default: false || if true, no recording; only play audio with visualizer bars; MUST include audioLinkData

fileOnly || bool || default: 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 || default: "auto" || set height of media recorder

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 option in media upload

width || string || default: "100%" || set width of media recorder

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