@hilma/web-recorder

Web Recorder Module is for recording users.

This package uses React and Fileshandler modules, and saves the recording as an audio file.

• Installation
• usage:
• Controlled Recorder:

Installation

In the client folder, run:

$ npm i @hilma/web-recorder

usage:

First you have to create a FilesUploader instance (For more details check the Fileshandler docs).

The next step is to render the Recorder component .The Recorder component takes the following props:

Prop	Type	Description	Required
filesUploader	FilesUploader	FilesUploader instance	true
startRecordingBtn	JSX.Element	The button (or any other jsx element) that starts the recording.(in case that you won't pass stopRecordingBtn this element will also stop the recording).	true
stopRecordingBtn	JSX.Element	The button (or any other jsx element) that stops the recording.	false
onEnded	function	Function that gets called when the recording has ended, gets same parameter as the onChange function in Fileshandler . (with a temporary link for the file, a file identifier and so on)	false
onError	function	In case of error this function gets called.	false
disableStopwatch	boolean	If true , the stopwatch won’t be shown	false
stopwatchClassname	string	className to style the stopwatch	false
recorderClassname	string	className to style the component	false

Example:

import React, { FC, useState } from 'react';

import { useFiles } from '@hilma/fileshandler-client';
import { Recorder } from '@hilma/web-recorder';

const RecorderExample: FC = () => {

    const filesUploader = useFiles();
    const [link, setLink] = useState<null | string>(null);
    const [errorMessage, setErrorMessage] = useState<null | string>(null);

    const handelError = (error: any) => {
        console.log('error: ', error);
        setErrorMessage('לא הצלחנו להקליט אותך, נסה שנית');
    }

    return (
        <div>
            <Recorder 
                filesUploader={filesUploader}
                onEnded={value => setLink(value.link)}
                onError={handelError}
                startRecordingBtn={<button> start </button>}
                stopRecordingBtn={<button> stop </button>}
                stopwatchClassname='stopwatch'
            />

            {link ? <audio src={link} controls /> : null}

            {errorMessage ? <div>{errorMessage}</div> : null}
        </div>
    );
}

export default RecorderExample;

Controlled Recorder:

if you want to control when the user is recorded (not just by pressing the buttons) or get the isRecording value, you can use the ControlledRecorder component.

You need to pass it the Recorder props and also:

Prop	Type	Description	Required
isRecording	boolean	determines if the component is recording	true
setIsRecording	function	changes the isRecording prop	true

Example

import React, { FC, useState } from 'react';

import { useFiles } from '@hilma/fileshandler-client';
import { ControlledRecorder } from '@hilma/web-recorder';

const ControlledRecorderExample: FC = () => {

    const filesUploader = useFiles();

    const [link, setLink] = useState<null | string>(null);
    const [isRecording, setIsRecording] = useState(false);
    const [errorMessage, setErrorMessage] = useState<null | string>(null);

    const handelError = (error: any) => {
        console.log('error: ', error);
        setErrorMessage('לא הצלחנו להקליט אותך, נסה שנית');
    }

    return (
        <div>
            <ControlledRecorder
                filesUploader={filesUploader}
                onEnded={value => setLink(value.link)}
                onError={handelError}
                startRecordingBtn={<button> start </button>}
                stopRecordingBtn={<button> stop </button>}
                isRecording={isRecording}
                setIsRecording={setIsRecording}
                stopwatchClassname='stopwatch'
            />

            {link ? <audio src={link} controls /> : null}

            {errorMessage ? <div>{errorMessage}</div> : null}
        </div>
    );
}

export default ControlledRecorderExample;

The recording is handled like any other uploaded file in Fileshandler module.

Note:

On Chrome you get webm file type, witch is not supported on Safari (ios). to play the audio on safari you need to convert it to mp3 file using ffmpeg.