Add searchable select for choosing camera

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": {

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 (
     <Webcam
-      videoConstraints={{ aspectRatio: getAspectRatio() }}
+      videoConstraints={{
+        aspectRatio: getAspectRatio(),
+        deviceId: cameraInput.value.deviceId,
+      }}
       className={className}
       audio={false}
       ref={webcamRef}

client/src/pages/Create/Create.js

@@ -2,13 +2,15 @@ import React, { useState, useCallback } from 'react'
 import download from 'downloadjs'
 import { Link } from 'react-router-dom'
 import './Create.css'
+import AsyncSelect from 'react-select/lib/Async'
 import Webcam from '../../components/WebcamCapture'
 import Countdown from '../../components/Countdown'
 import Page from '../../components/Page'
 import Icon from '../../components/Icon'
 import Button from '../../components/Button'
 import GenericWarning from './GenericWarning'
 import BrowserWarning from './BrowserWarning'
+import noCameraImgSrc from '../../no_camera.png'
 
 const WARNING_BROWSER = 'warning_browser'
 const WARNING_GENERIC = 'warning_generic'
@@ -21,6 +23,7 @@ const PHASE_END = 'phase_end'
 
 function Create({ history }) {
   const [phase, setPhase] = useState(PHASE_START)
+  const [recodingInput, setRecordingInput] = useState(null)
   const [isWebcamReady, setIsWebcamReady] = useState(false)
   const [gifId, setGifId] = useState()
   const [text, setText] = useState('')
@@ -30,6 +33,28 @@ function Create({ history }) {
     window.MediaRecorder ? false : WARNING_BROWSER,
   )
 
+  const cameraOptions = () =>
+    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]: <GenericWarning retry={retry} />,
     [WARNING_BROWSER]: <BrowserWarning />,
   }
+  const webCamCompo = recodingInput ? (
+    <Webcam
+      className="gif-video"
+      onError={() => setWarning(WARNING_GENERIC)}
+      onCaptureReady={() => setIsWebcamReady(true)}
+      recordingInput={recodingInput}
+      onStopCapture={onStopCapture}
+      isPlaying={phase === PHASE_RECORDING}
+      cameraInput={recodingInput}
+    />
+  ) : (
+    <img className="gif-video" src={noCameraImgSrc} alt="" />
+  )
 
   return (
     <Page
@@ -146,15 +184,21 @@ function Create({ history }) {
                 alt="Your GIF"
               />
             ) : (
-              <Webcam
-                className="gif-video"
-                onError={() => setWarning(WARNING_GENERIC)}
-                onCaptureReady={() => setIsWebcamReady(true)}
-                onStopCapture={onStopCapture}
-                isPlaying={phase === PHASE_RECORDING}
-              />
+              webCamCompo
             )}
           </div>
+          <div className="container">
+            <AsyncSelect
+              cacheOptions
+              defaultOptions
+              placeholder="Select your camera..."
+              onChange={setRecordingInput}
+              noOptionsMessage={() => {
+                return 'No camera detected...'
+              }}
+              loadOptions={cameraOptions}
+            />
+          </div>
           {isPrerecordingPhase && (
             <Countdown
               isPlaying={phase === PHASE_COUNTDOWN}