npmpackage.info

Gathering detailed insights and metrics for @scottjgilroy/react-record-webcam

@scottjgilroy/react-record-webcam - 1.1.1 | npmpackage.info

@scottjgilroy/react-record-webcam

Record webcam video and audio

1.1.1

MIT

TypeScript

61.05 kB

2.9

Installations

npm install @scottjgilroy/react-record-webcam

Developer Guide

BETA

Typescript

Yes

Module System

ESM

Node Version

20.10.0

NPM Version

10.2.3 Pull Requests

Open

0

Total

68

Closed

3

Merged

65

Issues

Open

6

Total

31

Closed

25

Releases

Unable to fetch releases

Languages

TypeScript

TypeScript (100%)

Developer

samuelweckstrom

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

61 Stars

117 Commits

23 Forks

2 Watchers

4 Branches

4 Contributors

Updated on Jun 11, 2025

Maintainers

View All 4 Contributors

Package Meta Information

Latest Version

1.1.1

Package Id

@scottjgilroy/react-record-webcam@1.1.1

Unpacked Size

61.05 kB

Size

13.91 kB

File Count

NPM Version

10.2.3

Node Version

20.10.0

Published on

Jun 11, 2024

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

react

Promise based zero dependency webcam library for React. Select video and audio input for one or multiple concurrent recordings using any mix of video and audio source.

DEMO

Note version 1.0 is a complete rewrite so you will need to make some changes if updating.

Add package

npm i react-record-webcam

Usage

1// record a 3s. video
2
3import { useRecordWebcam } from 'react-record-webcam'
4
5...
6
7  const {
8    activeRecordings,
9    createRecording,
10    openCamera,
11    startRecording,
12    stopRecording,
13  } = useRecordWebcam()
14
15  const example = async () => {
16    try {
17      const recording = await createRecording();
18      if (!recording) return;
19      await openCamera(recording.id);
20      await startRecording(recording.id);
21      await new Promise((resolve) => setTimeout(resolve, 3000));
22      await stopRecording(recording.id);
23    } catch (error) {
24      console.error({ error });
25    }
26  };
27
28  return (
29    <div>
30      <button onClick={example}>Start</button>
31      {activeRecordings.map(recording => (
32        <div key={recording.id}>
33          <video ref={recording.webcamRef} autoPlay muted />
34          <video ref={recording.previewRef} autoPlay muted loop />
35        </div>
36      ))}
37    </div>
38  )
39
40...
41

Check the CodeSandbox links for above demo and one with more features.

Passing options

Pass options either when initializing the hook or at any point in your application logic using applyOptions.

1const options = { fileName: string, fileType: string, mimeType: string }
2const { ... } = useRecordWebcam(options)
3
4// or
5
6const { applyOptions } = useRecordWebcam() // import utility
7applyOptions(recording.id: string, options) // add to your application logic
8
9

Option	default value
`fileName`	`timestamp`
`fileType`	`webm`
`mimeType`	`video/webm;codecs=vp9`

If you want to use a specific video/audio codec you can pass this in the mimeType. For example:

'video/webm;codecs=vp9'
'video/webm;codecs=vp8'
'video/webm;codecs=h264'
'video/x-matroska;codecs=avc1'

Please check that the browser supports the selected codec.

Passing recorder options

Pass recorder options when initializing the hook.

1const recorderOptions: { audioBitsPerSecond: number, videoBitsPerSecond: number }
2const { ... } = useRecordWebcam(recorderOptions)

Link to MDN for supported MediaOptions.

Passing recording constraints

1const constraints: { aspectRatio: number, height: number, width: number }
2const { ... } = useRecordWebcam(constraints)
3
4// or
5
6const { applyConstraints } = useRecordWebcam() // import utility
7applyConstraints(recording.id: string, constraints) // add to your application logic
8

Link to MDN for supported MediaConstraints.

Full API

Method	Description
`activeRecordings`	Array of currently active recordings.
`applyConstraints(recordingId, constraints): Promise<Recording>`	Apply constraints to a recording session. See passing recording constraints.
`applyRecordingOptions(recordingId, options) Promise<Recording>`	Apply options to a recording. See passing options.
`cancelRecording(recordingId): Promise<void>`	Cancels and deletes a specified recording session.
`clearAllRecordings()`	Clears all the active recordings and resets them.
`clearPreview(recordingId): Promise<Recording>`	Clears the preview of a specific recording.
`closeCamera(recordingId): Promise<Recording>`	Closes the camera of a specified recording session.
`createRecording(videoId?, audioId?): Promise<Recording>`	Creates a new recording session with specified video and audio IDs. If none are give the system defaults are used.
`devicesById`	Available input devices by their device ID.
`devicesByType`	Available input devices based on their type (audio, video).
`download(recordingId): Promise<void>`	Downloads the specified recording as a file.
`errorMessage`	Returns the last error message, if any, from the hook's operations.
`muteRecording(recordingId): Promise<Recording>`	Toggles mute on or off for a specified recording session.
`openCamera(recordingId): Promise<Recording>`	Opens the camera for a specified recording session, preparing it for recording.
`pauseRecording(recordingId): Promise<Recording>`	Pauses an ongoing recording session.
`resumeRecording(recordingId): Promise<Recording>`	Resumes a paused recording session.
`startRecording(recordingId): Promise<Recording>`	Starts a new recording for the specified session.
`stopRecording(recordingId): Promise<Recording>`	Stops an ongoing recording session and finalizes the recording.

License

MIT

Credits

webcam by iconfield from Noun Project (CC BY 3.0)

No vulnerabilities found.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

2

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

Maintained

Determines if the project is "actively maintained".

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

2.9

/10

Last Scanned on 2025-06-30

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More