React-Mic-Cam-Permissions

React-Mic-Cam-Permissions is a React library for managing camera and microphone permissions in web applications. It allows users to request and manage permissions seamlessly, while displaying status messages to inform the user of the results.

To install the library, run the following command:

npm i react-mic-cam-permissions

Use

1. Microphone permission request

You can use the MicrophonePermissionButton component to request permission to use the microphone. Just add it to your component and pass the events to find out if permission was granted or denied.

Example code:

import React from 'react';
import { MicrophonePermissionButton } from 'media-permissions';

const App = () => {
  const handleGranted = () => {
    console.log('Microphone permission granted');
  };

  const handleDenied = () => {
    console.log('Microphone permission denied');
  };

  return (
    <div>
      <h1>Microphone Permission</h1>
      <MicrophonePermissionButton
        buttonText="Request Microphone Permission"
        onGranted={handleGranted}
        onDenied={handleDenied}
      />
    </div>
  );
};

export default App;

2. Camera permission request

The CameraPermissionButton component works the same as the one for the microphone, but for the camera.

Example code:

import React from 'react';
import { CameraPermissionButton } from 'media-permissions';

const App = () => {
  const handleGranted = () => {
    console.log('Camera permission granted');
  };

  const handleDenied = () => {
    console.log('Camera permission denied');
  };

  return (
    <div>
      <h1>Camera Permission</h1>
      <CameraPermissionButton
        buttonText="Request Camera Permission"
        onGranted={handleGranted}
        onDenied={handleDenied}
      />
    </div>
  );
};

export default App;

3. Viewing permission status

The PermissionStatus component allows you to display the current status of permissions for the camera or microphone, with icons adapted to indicate whether the permission has been granted, denied, or is pending.

Example code:

import React from 'react';
import { PermissionStatus } from 'media-permissions';

const App = () => {
  return (
    <div>
      <h1>Permission Status</h1>
      <PermissionStatus permissionType="microphone" state="granted" />
      <PermissionStatus permissionType="camera" state="denied" />
    </div>
  );
};

export default App;

4. Full display with device selection

You can also display available devices (cameras and microphones) and allow users to select them using the PermissionStatusDisplay component.

Example code:

import React from 'react';
import { PermissionStatusDisplay } from 'media-permissions';

const App = () => {
  return (
    <div>
      <h1>Media Permissions</h1>
      <PermissionStatusDisplay />
    </div>
  );
};

export default App;

5. Managing permissions via the hook

You can also manage permissions directly with the useCameraPermission and useMicrophonePermission hooks.

Example of using the microphone hook:

import React, { useEffect } from 'react';
import { useMicrophonePermission } from 'media-permissions';

const App = () => {
  const { permissionState, requestPermission } = useMicrophonePermission();

  useEffect(() => {
    console.log('Microphone permission state:', permissionState);
  }, [permissionState]);

  return (
    <div>
      <h1>Microphone Permission</h1>
      <button onClick={requestPermission}>Request Microphone Permission</button>
      <p>Current Permission State: {permissionState}</p>
    </div>
  );
};

export default App;

Example of using the camera hook:

import React, { useEffect } from 'react';
import { useCameraPermission } from 'media-permissions';

const App = () => {
  const { permissionState, requestPermission } = useCameraPermission();

  useEffect(() => {
    console.log('Camera permission state:', permissionState);
  }, [permissionState]);

  return (
    <div>
      <h1>Camera Permission</h1>
      <button onClick={requestPermission}>Request Camera Permission</button>
      <p>Current Permission State: {permissionState}</p>
    </div>
  );
};

export default App;

Features

• Permission request: You can request permissions for the camera and microphone.
• Status display: The PermissionStatus component allows you to display the permission status.
• Device Selection: Display available video and audio devices for the user to select.
• Custom hooks: Manage permissions directly in your components with the useCameraPermission and useMicrophonePermission hooks.

API

Components

MicrophonePermissionButton

• className: Customizes the style of the button.
• buttonText: The text to display on the button.
• onGranted: Callback when permission is granted.
• onDenied: Callback when permission is denied.

CameraPermissionButton

Works the same as MicrophonePermissionButton, but for the camera.

PermissionStatus

• permissionType: Can be camera or microphone.
• state: The state of the permission, can be granted, denied, prompt or unavailable.
• className: Customizes the display style.

PermissionStatusDisplay

Displays a set of controls for managing permissions and selecting devices.

Hooks

useMicrophonePermission

Returns the permission status for the microphone as well as a function to request this permission.

useCameraPermission

Returns the permission status for the camera as well as a function to request this permission.