1.1.2 • Published 3 months ago
react-select-media-devices-modal v1.1.2
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
Author
Contributors
1.1.2
3 months ago
1.1.1
5 months ago
1.1.0
5 months ago
1.0.8
5 months ago
1.0.7
5 months ago
1.0.6
7 months ago
1.0.5
7 months ago
1.0.4
7 months ago
1.0.2
10 months ago
1.0.1
10 months ago
1.0.0
10 months ago
0.0.11
11 months ago
0.0.12
11 months ago
1.0.3
8 months ago
0.0.10
12 months ago
0.0.9
1 year ago
0.0.8
1 year ago
0.0.7
1 year ago
0.0.6
1 year ago
0.0.5
1 year ago
0.0.4
1 year ago
0.0.3
1 year ago
0.0.2
1 year ago
0.0.1
1 year ago