# @hilma/web-recorder

> the best recorder ever

Latest version **1.0.16** (published 2022-04-05) · ISC license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install @hilma/web-recorder
pnpm add @hilma/web-recorder
yarn add @hilma/web-recorder
bun add @hilma/web-recorder
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.0.16 |
| Published | 2022-04-05 |
| First published | 2021-05-10 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 17.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Hila Livnat |
| Maintainers | hilma |

## Links

- npm: https://www.npmjs.com/package/@hilma/web-recorder
- npm.io page: https://npm.io/package/@hilma/web-recorder

## Recent versions

- 1.0.16 (latest) — 2022-04-05
- 1.0.16-beta.3 (beta) — 2024-03-21
- 1.0.16-beta.2 — 2024-03-21
- 1.0.16-beta.1 — 2024-03-21
- 1.0.16-beta.0 — 2024-03-21
- 1.0.15-beta0.6 — 2022-04-05
- 1.0.15-beta0.5 — 2022-04-05
- 1.0.15-beta0.4 — 2022-04-05
- 1.0.15-beta0.3 — 2022-04-05
- 1.0.15-beta0.2 — 2022-04-05
- 1.0.15-beta0.1 — 2022-04-05
- 1.0.15 — 2022-03-28
- 1.0.14-beta0.2 — 2022-03-28
- 1.0.14-beta0.1 — 2022-03-28
- 1.0.14 — 2022-03-28
- … 33 more at https://npm.io/package/@hilma/web-recorder/versions

## README

Web Recorder Module is for recording users. 

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

- [Installation](#installation)
- [usage:](#usage)
- [Controlled Recorder:](#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](https://hilma.atlassian.net/l/c/HAYpqrKt)).

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**:

```tsx
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**

```tsx
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.**

---
_Source: https://npm.io/package/@hilma/web-recorder · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._