From 9c36efe3a864a9244df324bfcdca6a9e1dbacfcb Mon Sep 17 00:00:00 2001 From: Artur Paikin Date: Fri, 26 Aug 2022 16:54:54 +0100 Subject: [PATCH 1/3] Add nativeCameraFacingMode to Webcam and Dashboard --- packages/@uppy/dashboard/src/Dashboard.jsx | 1 + .../@uppy/dashboard/src/components/AddFiles.jsx | 14 +++++++++----- packages/@uppy/webcam/src/Webcam.jsx | 5 +++-- 3 files changed, 13 insertions(+), 7 deletions(-) diff --git a/packages/@uppy/dashboard/src/Dashboard.jsx b/packages/@uppy/dashboard/src/Dashboard.jsx index 28c3bd18f3..6b973422f9 100644 --- a/packages/@uppy/dashboard/src/Dashboard.jsx +++ b/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, diff --git a/packages/@uppy/dashboard/src/components/AddFiles.jsx b/packages/@uppy/dashboard/src/components/AddFiles.jsx index 23be378855..835cc57dfc 100644 --- a/packages/@uppy/dashboard/src/components/AddFiles.jsx +++ b/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 (
{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)}
diff --git a/packages/@uppy/webcam/src/Webcam.jsx b/packages/@uppy/webcam/src/Webcam.jsx index 10fef4964a..1b1df15cbf 100644 --- a/packages/@uppy/webcam/src/Webcam.jsx +++ b/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 } From 8cf4cf6763e87438e84046d8fd867f7069825d53 Mon Sep 17 00:00:00 2001 From: Artur Paikin Date: Tue, 30 Aug 2022 16:49:29 +0200 Subject: [PATCH 2/3] Update docs and types --- packages/@uppy/webcam/types/index.d.ts | 3 +++ website/src/docs/webcam.md | 10 +++++----- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/packages/@uppy/webcam/types/index.d.ts b/packages/@uppy/webcam/types/index.d.ts index ee3ee618e7..58b7820371 100644 --- a/packages/@uppy/webcam/types/index.d.ts +++ b/packages/@uppy/webcam/types/index.d.ts @@ -12,6 +12,9 @@ export interface WebcamOptions extends PluginOptions { onBeforeSnapshot?: () => Promise countdown?: number | boolean mirror?: boolean + /** + * @deprecated Use `videoConstraints.facingMode` instead. + */ facingMode?: string showVideoSourceDropdown?: boolean modes?: WebcamMode[] diff --git a/website/src/docs/webcam.md b/website/src/docs/webcam.md index fe15844d2e..64e7f7ac66 100644 --- a/website/src/docs/webcam.md +++ b/website/src/docs/webcam.md @@ -64,15 +64,15 @@ uppy.use(Webcam, { 'picture', ], mirror: true, + showVideoSourceDropdown: false, + facingMode: 'user', // @TODO: remove in the next major 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: {}, }) ``` From 8bac46315dfcfcebbc53474c8576b45231c566d0 Mon Sep 17 00:00:00 2001 From: Antoine du Hamel Date: Tue, 30 Aug 2022 17:23:19 +0200 Subject: [PATCH 3/3] Update website/src/docs/webcam.md --- website/src/docs/webcam.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/website/src/docs/webcam.md b/website/src/docs/webcam.md index 64e7f7ac66..b9fcfc31cd 100644 --- a/website/src/docs/webcam.md +++ b/website/src/docs/webcam.md @@ -65,7 +65,8 @@ uppy.use(Webcam, { ], mirror: true, showVideoSourceDropdown: false, - facingMode: 'user', // @TODO: remove in the next major + /** @deprecated Use `videoConstraints.facingMode` instead. */ + facingMode: 'user', videoConstraints: { facingMode: 'user', },