Pyramid-webcam NPM

This is a react based webcam to open, close, record, download recorded video

Install

npm install pyramid-webcam

Usage

import {useRef} from 'react'
import usePyramidWebCam from 'pyramid-webcam'

export default function Home(){

  const streamRef = useRef();
  const downloadRef = useRef();

  const {
    openCam,
    closeCam,
    startRecording,
    stopRecording,
    downloadPyramidRecord,
    webCamStatus,
    recordedBlob,
  } = usePyramidWebCam(streamRef, "<fileExtension>")

  return (
      <>
        <div className='text-center mx-auto w-100'>
          <div className='mx-auto'>
            <p className='lead mx-4'>Status: {webCamStatus}</p>
            <button
              className='ms-2'
              type="primary"
              onClick={openCam}
            >
              Open Camera
            </button>

            <button
              className='ms-2'
              type="default"
              onClick={closeCam}
            >
              Close Camera
            </button>

            <button
              className='ms-2'
              type="primary"
              onClick={startRecording}
            >
              Start Recording
            </button>

            <button
              className='ms-2'
              type="primary"
              onClick={stopRecording}
            >
              Stop Recording
            </button>

            <a
              ref={downloadRef}
            >
              <button
                className='ms-2'
                type="primary"
                onClick={()=> downloadPyramidRecord(downloadRef, 'pyramid-record')}
              >
                Download
              </button>
            </a>
            <div>
              <video
                ref={streamRef}
                className=' border border-1 rounded mt-3'
                id="preview"
                width="500"
                height="375.5"
                autoPlay
                muted
              ></video>
            </div>

          </div>
        </div>
      </>
  )
}