diff --git a/client/package.json b/client/package.json index b262c1b..d2a6cd9 100644 --- a/client/package.json +++ b/client/package.json @@ -15,6 +15,7 @@ "react-paginate": "^6.3.2", "react-router-dom": "^5.2.0", "react-scripts": "^3.4.3", + "react-select": "^2.0.0-beta.7", "react-webcam": "^5.2.0" }, "scripts": { diff --git a/client/src/components/WebcamCapture.js b/client/src/components/WebcamCapture.js index 3e1f90a..4fdda1a 100644 --- a/client/src/components/WebcamCapture.js +++ b/client/src/components/WebcamCapture.js @@ -34,6 +34,7 @@ const WebcamStreamCapture = ({ onCaptureReady, onError, onStopCapture, + cameraInput, }) => { const webcamRef = useRef(null) const mediaRecorderRef = useRef(null) @@ -61,7 +62,6 @@ const WebcamStreamCapture = ({ const prepareMediaRecorder = async () => { const constraints = getConstraints() - stream = await navigator.mediaDevices.getUserMedia(constraints) mediaRecorderRef.current = new MediaRecorder(webcamRef.current.stream, { mimeType: 'video/webm', @@ -90,7 +90,10 @@ const WebcamStreamCapture = ({ return ( + navigator.mediaDevices + .enumerateDevices() + .then((inputs) => { + const options = [] + inputs + .filter((input) => { + return input.kind === 'videoinput' + }) + .forEach((videoInput) => { + options.push({ + value: videoInput, + label: videoInput.label, + }) + }) + return options + }) + .catch((err) => { + console.error('ERROR: No camera input found', err) + return [] + }) + const retry = () => { setGifId(null) setText('') @@ -127,6 +152,19 @@ function Create({ history }) { [WARNING_GENERIC]: , [WARNING_BROWSER]: , } + const webCamCompo = recodingInput ? ( + setWarning(WARNING_GENERIC)} + onCaptureReady={() => setIsWebcamReady(true)} + recordingInput={recodingInput} + onStopCapture={onStopCapture} + isPlaying={phase === PHASE_RECORDING} + cameraInput={recodingInput} + /> + ) : ( + + ) return ( ) : ( - setWarning(WARNING_GENERIC)} - onCaptureReady={() => setIsWebcamReady(true)} - onStopCapture={onStopCapture} - isPlaying={phase === PHASE_RECORDING} - /> + webCamCompo )} +
+ { + return 'No camera detected...' + }} + loadOptions={cameraOptions} + /> +
{isPrerecordingPhase && (