webcam: add nativeCameraFacingMode to Webcam and Dashboard (#4047)

packages/@uppy/dashboard/src/Dashboard.jsx

@@ -971,6 +971,7 @@ export default class Dashboard extends UIPlugin {
       showSelectedFiles: this.opts.showSelectedFiles,
       showNativePhotoCameraButton: this.opts.showNativePhotoCameraButton,
       showNativeVideoCameraButton: this.opts.showNativeVideoCameraButton,
+      nativeCameraFacingMode: this.opts.nativeCameraFacingMode,
       handleCancelRestore: this.handleCancelRestore,
       handleRequestThumbnail: this.handleRequestThumbnail,
       handleCancelThumbnail: this.handleCancelThumbnail,

packages/@uppy/dashboard/src/components/AddFiles.jsx

@@ -47,7 +47,7 @@ class AddFiles extends Component {
     )
   }
 
-  renderHiddenCameraInput = (type, refCallback) => {
+  renderHiddenCameraInput = (type, nativeCameraFacingMode, refCallback) => {
     const typeToAccept = { photo: 'image/*', video: 'video/*' }
     const accept = typeToAccept[type]
 
@@ -60,7 +60,7 @@ class AddFiles extends Component {
         type="file"
         name={`camera-${type}`}
         onChange={this.onFileInputChange}
-        capture="user"
+        capture={nativeCameraFacingMode}
         accept={accept}
         ref={refCallback}
       />
@@ -275,14 +275,18 @@ class AddFiles extends Component {
   }
 
   render () {
-    const { showNativePhotoCameraButton, showNativeVideoCameraButton } = this.props
+    const {
+      showNativePhotoCameraButton,
+      showNativeVideoCameraButton,
+      nativeCameraFacingMode,
+    } = this.props
 
     return (
       <div className="uppy-Dashboard-AddFiles">
         {this.renderHiddenInput(false, (ref) => { this.fileInput = ref })}
         {this.renderHiddenInput(true, (ref) => { this.folderInput = ref })}
-        {showNativePhotoCameraButton && this.renderHiddenCameraInput('photo', (ref) => { this.mobilePhotoFileInput = ref })}
-        {showNativeVideoCameraButton && this.renderHiddenCameraInput('video', (ref) => { this.mobileVideoFileInput = ref })}
+        {showNativePhotoCameraButton && this.renderHiddenCameraInput('photo', nativeCameraFacingMode, (ref) => { this.mobilePhotoFileInput = ref })}
+        {showNativeVideoCameraButton && this.renderHiddenCameraInput('video', nativeCameraFacingMode, (ref) => { this.mobileVideoFileInput = ref })}
         {this.renderDropPasteBrowseTagline()}
         {this.renderSourcesList(this.props.acquirers, this.props.disableLocalFiles)}
         <div className="uppy-Dashboard-AddFiles-info">

packages/@uppy/webcam/src/Webcam.jsx

@@ -98,7 +98,7 @@ export default class Webcam extends UIPlugin {
       ],
       mirror: true,
       showVideoSourceDropdown: false,
-      facingMode: 'user',
+      facingMode: 'user', // @TODO: remove in the next major
       preferredImageMimeType: null,
       preferredVideoMimeType: null,
       showRecordingLength: false,
@@ -595,12 +595,13 @@ export default class Webcam extends UIPlugin {
   }
 
   install () {
-    const { mobileNativeCamera, modes } = this.opts
+    const { mobileNativeCamera, modes, facingMode, videoConstraints } = this.opts
 
     if (mobileNativeCamera) {
       this.uppy.getPlugin('Dashboard').setOptions({
         showNativeVideoCameraButton: isModeAvailable(modes, 'video-only') || isModeAvailable(modes, 'video-audio'),
         showNativePhotoCameraButton: isModeAvailable(modes, 'picture'),
+        nativeCameraFacingMode: videoConstraints?.facingMode || facingMode,
       })
       return
     }

packages/@uppy/webcam/types/index.d.ts

@@ -12,6 +12,9 @@ export interface WebcamOptions extends PluginOptions {
     onBeforeSnapshot?: () => Promise<void>
     countdown?: number | boolean
     mirror?: boolean
+    /**
+     * @deprecated Use `videoConstraints.facingMode` instead.
+     */
     facingMode?: string
     showVideoSourceDropdown?: boolean
     modes?: WebcamMode[]

website/src/docs/webcam.md

@@ -64,15 +64,16 @@ uppy.use(Webcam, {
     'picture',
   ],
   mirror: true,
+  showVideoSourceDropdown: false,
+  /** @deprecated Use `videoConstraints.facingMode` instead. */
+  facingMode: 'user',
   videoConstraints: {
     facingMode: 'user',
-    width: { min: 720, ideal: 1280, max: 1920 },
-    height: { min: 480, ideal: 800, max: 1080 },
   },
-  showRecordingLength: false,
-  preferredVideoMimeType: null,
   preferredImageMimeType: null,
-  mobileNativeCamera: isMobile(),
+  preferredVideoMimeType: null,
+  showRecordingLength: false,
+  mobileNativeCamera: isMobile({ tablet: true }),
   locale: {},
 })
 ```