/react-select-media-devices-modal

A React component library for select media devices

Primary LanguageTypeScriptMIT LicenseMIT

react-select-media-devices-modal

npm version Test E2E Test Release Deploy to GitHub Pages License: MIT

A React component library for select media devices.

Features

  • Select audio input, audio output, and video input device.
  • Show preview media stream get from selected device.
  • Record sample audio stream and play.

Demo

https://kadoshita.github.io/react-select-media-devices-modal/example/

Installation

npm install --save react-select-media-devices-modal

Usage

SelectMediaDevicesModal

import { useState } from 'react';
import { SelectMediaDevicesModal } from 'react-select-media-devices-modal';

function App() {
    const [modalOpen, setModalOpen] = useState(false);

    const handleDeviceSelected = (devices) => {
        setModalOpen(false);
        console.log(devices);
    };

    const handleDeviceSelectCanceled = () => {
        setModalOpen(false);
    };

    return (
        <div>
            <button onClick={() => setModalOpen((current) => !current)}>Select Device</button>
            <SelectMediaDevicesModal
                isSelectAudioInput
                isSelectAudioOutput
                isSelectVideoInput
                open={modalOpen}
                audioInputDeviceLabel="Audio input device"
                audioOutputDeviceLabel="Audio output device"
                videoInputDeviceLabel="Video input device"
                confirmButtonText="Confirm"
                cancelButtonText="Cancel"
                allowOutsideClick={false}
                onDeviceSelected={handleDeviceSelected}
                onDeviceSelectCanceled={handleDeviceSelectCanceled}
            ></SelectMediaDevicesModal>
        </div>
    );
}

export default App;

SelectMediaDevicesPreviewModal

import { useState } from 'react';
import { SelectMediaDevicesPreviewModal } from 'react-select-media-devices-modal';

function App() {
    const [modalOpen, setModalOpen] = useState(false);

    const handleDeviceSelected = (devices) => {
        setModalOpen(false);
        console.log(devices);
    };

    const handleDeviceSelectCanceled = () => {
        setModalOpen(false);
    };

    return (
        <div>
            <button onClick={() => setModalOpen((current) => !current)}>Select Device</button>
            <SelectMediaDevicesPreviewModal
                isSelectAudioInput
                isSelectAudioOutput
                isSelectVideoInput
                open={modalOpen}
                audioInputDeviceLabel="Audio input device"
                audioOutputDeviceLabel="Audio output device"
                videoInputDeviceLabel="Video input device"
                confirmButtonText="Confirm"
                cancelButtonText="Cancel"
                allowOutsideClick={false}
                onDeviceSelected={handleDeviceSelected}
                onDeviceSelectCanceled={handleDeviceSelectCanceled}
            ></SelectMediaDevicesPreviewModal>
        </div>
    );
}

export default App;

SelectMediaDevicesRecordingModal

import { useState } from 'react';
import { SelectMediaDevicesRecordingModal } from 'react-select-media-devices-modal';

function App() {
    const [modalOpen, setModalOpen] = useState(false);

    const handleDeviceSelected = (devices) => {
        setModalOpen(false);
        console.log(devices);
    };

    const handleDeviceSelectCanceled = () => {
        setModalOpen(false);
    };

    return (
        <div>
            <button onClick={() => setModalOpen((current) => !current)}>Select Device</button>
            <SelectMediaDevicesRecordingModal
                isSelectAudioInput
                isSelectAudioOutput
                isSelectVideoInput
                open={modalOpen}
                audioInputDeviceLabel="Audio input device"
                audioOutputDeviceLabel="Audio output device"
                videoInputDeviceLabel="Video input device"
                confirmButtonText="Confirm"
                cancelButtonText="Cancel"
                recordingButtonText="Recording"
                allowOutsideClick={false}
                onDeviceSelected={handleDeviceSelected}
                onDeviceSelectCanceled={handleDeviceSelectCanceled}
            ></SelectMediaDevicesRecordingModal>
        </div>
    );
}

export default App;

Props

SelectMediaDevicesModalProps

Name Type Default Description
isSelectAudioInput boolean true Flag that select an audio input device or not.
isSelectAudioOutput boolean true Flag that select an audio output device or not.
isSelectVideoInput boolean true Flag that select a video input device or not.
open boolean false Flag that open the modal or not.
audioInputDeviceLabel string 'audio input device' Label for list of audio input devices.
audioOutputDeviceLabel string 'audio output device' Label for list of audio output devices.
videoInputDeviceLabel string 'video input device' Label for list of video input devices.
confirmButtonText string 'Confirm' Label for the confirm button.
cancelButtonText string 'Cancel' Label for the cancel button.
allowOutsideClick boolean true Flag that cancel selection when clicking outside of the modal.
onDeviceSelected function (devices: { audioInput?: MediaDeviceInfo; audioOutput?: MediaDeviceInfo; videoInput?: MediaDeviceInfo; }) => void Handler function called when devices are selected.
onDeviceSelectCanceled function () => void Handler function called when selection canceled.

SelectMediaDevicesPreviewModalProps

Name Type Default Description
isSelectAudioInput boolean true Flag that select an audio input device or not.
isSelectAudioOutput boolean true Flag that select an audio output device or not.
isSelectVideoInput boolean true Flag that select a video input device or not.
open boolean false Flag that open the modal or not.
audioInputDeviceLabel string 'audio input device' Label for list of audio input devices.
audioOutputDeviceLabel string 'audio output device' Label for list of audio output devices.
videoInputDeviceLabel string 'video input device' Label for list of video input devices.
confirmButtonText string 'Confirm' Label for the confirm button.
cancelButtonText string 'Cancel' Label for the cancel button.
allowOutsideClick boolean true Flag that cancel selection when clicking outside of the modal.
onDeviceSelected function (devices: { audioInput?: MediaDeviceInfo; audioOutput?: MediaDeviceInfo; videoInput?: MediaDeviceInfo; }) => void Handler function called when devices are selected.
onDeviceSelectCanceled function () => void Handler function called when selection canceled.

SelectMediaDevicesRecordingModalProps

Name Type Default Description
isSelectAudioInput boolean true Flag that select an audio input device or not.
isSelectAudioOutput boolean true Flag that select an audio output device or not.
isSelectVideoInput boolean true Flag that select a video input device or not.
open boolean false Flag that open the modal or not.
audioInputDeviceLabel string 'audio input device' Label for list of audio input devices.
audioOutputDeviceLabel string 'audio output device' Label for list of audio output devices.
videoInputDeviceLabel string 'video input device' Label for list of video input devices.
confirmButtonText string 'Confirm' Label for the confirm button.
cancelButtonText string 'Cancel' Label for the cancel button.
recordingButtonText string 'Recording' Label for the recording button.
allowOutsideClick boolean true Flag that cancel selection when clicking outside of the modal.
onDeviceSelected function (devices: { audioInput?: MediaDeviceInfo; audioOutput?: MediaDeviceInfo; videoInput?: MediaDeviceInfo; }) => void Handler function called when devices are selected.
onDeviceSelectCanceled function () => void Handler function called when selection canceled.

LICENSE

MIT

Author

Yoshiki Kadoshita

Contributors