Security News
Introducing the Socket Python SDK
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
@scottjgilroy/react-record-webcam
Advanced tools
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.
Note version 1.0 is a complete rewrite so you will need to make some changes if updating.
npm i react-record-webcam
// 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.
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
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.
Pass recorder options when initializing the hook.
const recorderOptions: { audioBitsPerSecond: number, videoBitsPerSecond: number }
const { ... } = useRecordWebcam(recorderOptions)
Link to MDN for supported MediaOptions.
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.
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. |
webcam by iconfield from Noun Project (CC BY 3.0)
FAQs
Webcam recording tool for React
We found that @scottjgilroy/react-record-webcam demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
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.
Security News
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
Security News
Floating dependency ranges in npm can introduce instability and security risks into your project by allowing unverified or incompatible versions to be installed automatically, leading to unpredictable behavior and potential conflicts.
Security News
A new Rust RFC proposes "Trusted Publishing" for Crates.io, introducing short-lived access tokens via OIDC to improve security and reduce risks associated with long-lived API tokens.