Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@scottjgilroy/react-record-webcam

Package Overview
Dependencies
Maintainers
1
Versions
4
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@scottjgilroy/react-record-webcam

Webcam recording tool for React

  • 1.1.1
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source
React Record Webcam Logo

TypeScript Tests npm version

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

// record a 3s. video

import { useRecordWebcam } from 'react-record-webcam'

...

  const {
    activeRecordings,
    createRecording,
    openCamera,
    startRecording,
    stopRecording,
  } = useRecordWebcam()

  const example = async () => {
    try {
      const recording = await createRecording();
      if (!recording) return;
      await openCamera(recording.id);
      await startRecording(recording.id);
      await new Promise((resolve) => setTimeout(resolve, 3000));
      await stopRecording(recording.id);
    } catch (error) {
      console.error({ error });
    }
  };

  return (
    <div>
      <button onClick={example}>Start</button>
      {activeRecordings.map(recording => (
        <div key={recording.id}>
          <video ref={recording.webcamRef} autoPlay muted />
          <video ref={recording.previewRef} autoPlay muted loop />
        </div>
      ))}
    </div>
  )

...

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.

const options = { fileName: string, fileType: string, mimeType: string }
const { ... } = useRecordWebcam(options)

// or

const { applyOptions } = useRecordWebcam() // import utility
applyOptions(recording.id: string, options) // add to your application logic


Optiondefault value
fileNametimestamp
fileTypewebm
mimeTypevideo/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.

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

Link to MDN for supported MediaOptions.


Passing recording constraints

const constraints: { aspectRatio: number, height: number, width: number }
const { ... } = useRecordWebcam(constraints)

// or

const { applyConstraints } = useRecordWebcam() // import utility
applyConstraints(recording.id: string, constraints) // add to your application logic

Link to MDN for supported MediaConstraints.


Full API

MethodDescription
activeRecordingsArray 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.
devicesByIdAvailable input devices by their device ID.
devicesByTypeAvailable input devices based on their type (audio, video).
download(recordingId): Promise<void>Downloads the specified recording as a file.
errorMessageReturns 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)

Keywords

FAQs

Package last updated on 11 Jun 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc