Nutritious Pumpkin Meal

    @devmartynov/react-media-recorder
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.2 • Public • Published

    @devmartynov/react-media-recorder NPM

    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

    Install

    npm i @devmartynov/react-media-recorder

    DownloadsWeekly Downloads

    5

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    99.9 kB

    Total Files

    12

    Last publish

    Collaborators

    • dmartynov