react-select-media-devices-modal

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

• kounoike