Socket
Book a DemoInstallSign in
Socket

@pradeexsu/use-media

Package Overview
Dependencies
Maintainers
1
Versions
2
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@pradeexsu/use-media

A lightweight and easy-to-use React hooks library that provides access to the user's microphone and camera through modern browser APIs.

1.0.1
latest
npmnpm
Version published
Weekly downloads
7
Maintainers
1
Weekly downloads
 
Created
Source

@pradeexsu/use-media

A lightweight and easy-to-use React hooks library that provides access to the user's microphone and camera through modern browser APIs.

Installation

Install the package using npm:

npm install @pradeexsu/use-media

Usage

Prerequisites

Ensure that you wrap your application with the MediaProvider before using the useMedia hook. This provider should be implemented in your project to manage the media context.

Example

import React from "react";
import { useMedia, MediaProvider } from "@pradeexsu/use-media";

const App = () => {
  return (
    <MediaProvider>
       <MediaComponent />
    </MediaProvider>
  );
};

const MediaComponent = () => {
  const { useCameraState, useMicrophoneState } = useMedia();
  const {
    camera,
    optimisticIsMute: isCameraMute,
    hasBrowserPermission: hasCameraPermission,
    mediaStream,
  } = useCameraState();

  const {
    microphone,
    optimisticIsMute: isMicrophoneMute,
    hasBrowserPermission: hasMicrophonePermission,
    status: microphoneStatus,
  } = useMicrophoneState();

 const toggleMicrophone = async () => {
    try {
      await microphone.toggle();
    } catch (error) {
      console.error(error);
    }
  };
  const toggleCamera = async () => {
    try {
      await camera.toggle();
    } catch (error) {
      console.error(error);
    }
  };

  useEffect(() => {
    if (vidRef.current && mediaStream) {
      vidRef.current.srcObject = mediaStream;
    }
  });

  return (
    <div>
       <video
        ref={vidRef}
        autoPlay
        muted
        style={{ objectFit: "cover" }}/>
      <button onClickCapture={toggleCamera}>Toggle camera</button>
      <button onClickCapture={toggleMicrophone}>Toggle microphone</button>    </div>
  );
};

export default App;

Example Error Handling

If useMedia is used outside of the MediaApplicationProvider, it will throw the following error:

Dependencies

  • react: ^17.0.0 || ^18.0.0 (peer dependency)
  • @stream-io/video-react-sdk: 1.14.1

License

This project is licensed under the ISC License.

Author

Pradeep Suthar (pradeexsu@gmail.com)

Keywords

microphone

FAQs

Package last updated on 10 Apr 2025

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

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc

U.S. Patent No. 12,346,443 & 12,314,394. Other pending.