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

react-webcam

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-webcam

React webcam component


Version published
Weekly downloads
167K
decreased by-20.89%
Maintainers
1
Weekly downloads
 
Created

What is react-webcam?

The react-webcam package is a React component that allows you to capture images and videos from your webcam. It provides a simple interface for accessing the webcam and capturing media, making it useful for applications that require user media input.

What are react-webcam's main functionalities?

Capture Image

This feature allows you to capture an image from the webcam. The `getScreenshot` method is used to take a snapshot and return it as a base64-encoded image string.

import React, { useRef, useCallback } from 'react';
import Webcam from 'react-webcam';

const WebcamCapture = () => {
  const webcamRef = useRef(null);

  const capture = useCallback(() => {
    const imageSrc = webcamRef.current.getScreenshot();
    console.log(imageSrc);
  }, [webcamRef]);

  return (
    <div>
      <Webcam
        audio={false}
        ref={webcamRef}
        screenshotFormat="image/jpeg"
      />
      <button onClick={capture}>Capture photo</button>
    </div>
  );
};

export default WebcamCapture;

Capture Video

This feature allows you to capture video from the webcam. The `MediaRecorder` API is used to record the video stream and save it as a Blob, which can then be played back using a video element.

import React, { useRef, useState } from 'react';
import Webcam from 'react-webcam';

const WebcamVideoCapture = () => {
  const webcamRef = useRef(null);
  const [recording, setRecording] = useState(false);
  const [mediaRecorder, setMediaRecorder] = useState(null);
  const [videoUrl, setVideoUrl] = useState(null);

  const startRecording = () => {
    const stream = webcamRef.current.stream;
    const mediaRecorder = new MediaRecorder(stream);
    setMediaRecorder(mediaRecorder);
    mediaRecorder.start();
    setRecording(true);

    mediaRecorder.ondataavailable = (event) => {
      const videoBlob = new Blob([event.data], { type: 'video/webm' });
      const videoUrl = URL.createObjectURL(videoBlob);
      setVideoUrl(videoUrl);
    };
  };

  const stopRecording = () => {
    mediaRecorder.stop();
    setRecording(false);
  };

  return (
    <div>
      <Webcam audio={true} ref={webcamRef} />
      {recording ? (
        <button onClick={stopRecording}>Stop Recording</button>
      ) : (
        <button onClick={startRecording}>Start Recording</button>
      )}
      {videoUrl && <video src={videoUrl} controls />}
    </div>
  );
};

export default WebcamVideoCapture;

Mirror Mode

This feature allows you to enable mirror mode for the webcam feed. Setting the `mirrored` prop to `true` flips the video horizontally, which can be useful for applications like video conferencing.

import React from 'react';
import Webcam from 'react-webcam';

const WebcamMirror = () => {
  return (
    <div>
      <Webcam
        audio={false}
        screenshotFormat="image/jpeg"
        mirrored={true}
      />
    </div>
  );
};

export default WebcamMirror;

Other packages similar to react-webcam

FAQs

Package last updated on 07 Apr 2018

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