Welcome to pyramid-webcam 👋

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

Install

1npm install pyramid-webcam

Usage

1import {useRef} from 'react'
2import usePyramidWebCam from 'pyramid-webcam'
3
4export default function Home(){
5
6  const streamRef = useRef();
7  const downloadRef = useRef();
8
9  const {
10    openCam,
11    closeCam,
12    startRecording,
13    stopRecording,
14    downloadPyramidRecord,
15    webCamStatus,
16    recordedBlob,
17  } = usePyramidWebCam(streamRef, "<fileExtension>")
18
19  return (
20      <>
21        <div className='text-center mx-auto w-100'>
22          <div className='mx-auto'>
23            <p className='lead mx-4'>Status: {webCamStatus}</p>
24            <button
25              className='ms-2'
26              type="primary"
27              onClick={openCam}
28            >
29              Open Camera
30            </button>
31
32            <button
33              className='ms-2'
34              type="default"
35              onClick={closeCam}
36            >
37              Close Camera
38            </button>
39
40            <button
41              className='ms-2'
42              type="primary"
43              onClick={startRecording}
44            >
45              Start Recording
46            </button>
47
48            <button
49              className='ms-2'
50              type="primary"
51              onClick={stopRecording}
52            >
53              Stop Recording
54            </button>
55
56            <a
57              ref={downloadRef}
58            >
59              <button
60                className='ms-2'
61                type="primary"
62                onClick={()=> downloadPyramidRecord(downloadRef, 'pyramid-record')}
63              >
64                Download
65              </button>
66            </a>
67            <div>
68              <video
69                ref={streamRef}
70                className=' border border-1 rounded mt-3'
71                id="preview"
72                width="500"
73                height="375.5"
74                autoPlay
75                muted
76              ></video>
77            </div>
78
79          </div>
80        </div>
81      </>
82  )
83}
84
85

Run tests

1npm run test

Author

👤 youssef wael

• Github: @youssefwael397

Show your support

Give a ⭐️ if this project helped you!

---

This README was generated with ❤️ by readme-md-generator