kadoshita / react-select-media-devices-modal

A React component library for select media devices

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

react-select-media-devices-modal's Issues

プレビューするとアプリ側で開いたときに解像度がVGAになってしまう

プレビュー付きのSelectMediaDevicesPreviewModal/SelectMediaDevicesRecodingModalを開くと、プレビューがカメラをデフォルト設定で開いたままなのでアプリ側で制約をかけてもデフォルト設定のままとなってしまう。
（Windows/Chromeで確認、他の環境は確認してないです）

（準備）
#36 で追加したWebcamに width: 1920, height: 1080, などの制約を追加する

（手順）

1. 2台以上のカメラを持つマシンで上記修正をしたexampleを開く
2. SelectMediaDevicesPreviewModalボタンを押してモーダルを開く（～RecordingModalでも同じく）
3. 2つ目以降のカメラを選択し、Confirmでモーダルを閉じる

こうするとアプリ側で表示している（Webcamコンポーネント）カメラの解像度がデフォルトのVGAのままとなってしまう。
手順3.で1つ目のカメラを選択した場合は、先にアプリ側で開いているため問題が発生しません。
また、手順2.でプレビューの無いSelectMediaDevicesModalを使うときちんと1920x1080で表示されます。

上記は解像度で試しましたが、フレームレートや最近追加さればbackground-blurとかもどうなるのか確認が必要な気がします

Improve style

ドキュメントを充実させる

https://github.com/styleguidist/react-styleguidist

devicechangeイベントに対応する

PRが送られた際にCIが実行されるようにする

pull_request_target を使う

Add video preview

複数デバイスがあったときの2回目以降の選択で1つ目のデバイスを選んだときの結果がおかしい

CameraAとCameraBの2つがあったとき、

1. モーダルを開く
2. CameraBを選択する
3. Confirmを押す
4. モーダルを開く
5. そのままConfirmを押す

と、モーダルではドロップダウンでCameraAが選択されているので、Confirmを押した時点でCameraAがinputDevicesのvideoInputになっていることを期待するが、実際にはCameraBになっている。
（例はvideoInputで説明したがaudioInput/audioOutputも同様）

どちらかというと4.の時点でモーダルを開いたときにCameraAが選択されている状態で開くより、CameraBが選択されていて欲しいです

Add linter