react-select-media-devices-modal
![License: MIT](https://camo.githubusercontent.com/a4426cbe5c21edb002526331c7a8fbfa089e84a550567b02a0d829a98b136ad0/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c6963656e73652d4d49542d79656c6c6f772e737667)
A React component library for select media devices.
- Select audio input, audio output, and video input device.
- Show preview media stream get from selected device.
- Record sample audio stream and play.
https://kadoshita.github.io/react-select-media-devices-modal/example/
npm install --save react-select-media-devices-modal
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;
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. |
MIT
Yoshiki Kadoshita