@devmartynov/react-media-recorder

audio/video recorder which is used Web Audio API, Media Stream API, Media Devices API

In progress:

• [ ] Video format support

Install

npm install --save @devmartynov/react-media-recorder

or

yarn add @devmartynov/react-media-recorder

Props

| Property name | Type | Return type | Default | Description | |-----------------| ------ |-------------|------------------------------|-------------------------------------------------| | status | string | - | RecordingStatusEnum.INACTIVE | RecordingStatusEnum.(INACTIVE,RECORDING,PAUSED) | | recording | string | - | - | Result blob url. | | timer | number | - | - | Record timer (in secs). | | startRecording | method | Promise | - | Call this method to start recording. | | stopRecording | method | Promise | - | Call this method to stop recording. | | pauseRecording | method | Promise | - | Call this method to pause recording. | | resumeRecording | method | Promise | - | Call this method to resume recording. |

Usage (Class Version)

import React, { Component } from 'react'

import { ReactMediaRecorder, RecordingStatusEnum } from '@devmartynov/react-media-recorder';

class Example extends Component {
    render() {
        return (
            <ReactAudioRecorder
                render={({
                    timer,
                    stopRecording,
                    startRecording,
                    resumeRecording,
                    pauseRecording,
                    recording,
                    status,
                }) => (
                    <div className='container'>
                        <div className='inner-container'>
                            <audio controls src={recording}/>
                            <p
                                className={`timer ${
                                    status === RecordingStatusEnum.PAUSED ? 'blink-animation' : ''
                                }`}
                            >
                                {new Date(timer * 1000).toISOString().substring(11, 19)}
                            </p>
                            <div className='buttons'>
                                <button
                                    className='btn-play'
                                    onClick={
                                        status === RecordingStatusEnum.RECORDING
                                            ? pauseRecording
                                            : resumeRecording
                                    }
                                >
                                    {status === RecordingStatusEnum.RECORDING ? '⏸' : '▶️'}
                                </button>
                                <button className='btn-record' onClick={startRecording}>
                                    🎤
                                </button>
                                <button className='btn-stop' onClick={stopRecording}>
                                    ⏹
                                </button>
                            </div>
                        </div>
                    </div>
                )}
            />
        )
    }
}

Usage (Hooks Version)

import React from 'react'

import { useMediaRecorder, RecordingStatusEnum } from '@devmartynov/react-media-recorder';

function Example() {
    const {
        recording,
        timer,
        startRecording,
        stopRecording,
        pauseRecording,
        resumeRecording,
        status,
    } = useMediaRecorder();

    return (
        <div className='container'>
            <div className='inner-container'>
                <audio controls src={recording}/>
                <p
                    className={`timer ${
                        status === RecordingStatusEnum.PAUSED ? 'blink-animation' : ''
                    }`}
                >
                    {new Date(timer * 1000).toISOString().substring(11, 19)}
                </p>
                <div className='buttons'>
                    <button
                        className='btn-play'
                        onClick={
                            status === RecordingStatusEnum.RECORDING
                                ? pauseRecording
                                : resumeRecording
                        }
                    >
                        {status === RecordingStatusEnum.RECORDING ? '⏸' : '▶️'}
                    </button>
                    <button className='btn-record' onClick={startRecording}>
                        🎤
                    </button>
                    <button className='btn-stop' onClick={stopRecording}>
                        ⏹
                    </button>
                </div>
            </div>
        </div>
    );
}

This project is based on @sarafhbk/react-audio-recorder but extends its functionality.

License

MIT © devmartynov