@hilma/web-recorder v1.0.16

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:

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:

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.