Skip to content

🎥 Wrapper for recording video through MediaRecorderAPI

License

Notifications You must be signed in to change notification settings

AkpoFlash/media-recorder

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

20 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

media-recorder

How to use

import {useMediaRecorder} from '@akpoflash/media-recorder'

function App(){
    const mediaRecorder = useMediaRecorder();
    const video = useRef();

    useEffect(() => {
        mediaRecorder.init().then(stream => {
            video.current.srcObject = stream
        });
    },[]);

    return (
        <>
            {/* real time streaming */}
            <video ref={video} autoPlay={true}/>
            {/* recordered video */}
            {mediaRecorder.blob && <video width={100} src={URL.createObjectURL(mediaRecorder.blob)} autoPlay={true}/>}
            <div>
                <button onClick={mediaRecorder.start} children={'start'} disabled={mediaRecorder.recorded || !mediaRecorder.available}/>
                <button onClick={mediaRecorder.stop} children={'stop'} disabled={!mediaRecorder.recorded || !mediaRecorder.available}/>
                <br/>
                <button onClick={mediaRecorder.pause} children={'pause'} disabled={!mediaRecorder.recorded || mediaRecorder.paused || !mediaRecorder.available}/>
                <button onClick={mediaRecorder.resume} children={'resume'} disabled={!mediaRecorder.recorded || !mediaRecorder.paused || !mediaRecorder.available}/>
            </div>
        </>
    );
}

About

🎥 Wrapper for recording video through MediaRecorderAPI

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published