webcam: Add support for mobileNativeCamera option to Webcam and Dashboard #3844

arturi · 2022-06-22T19:56:52Z

Desktop device:

Mobile device:

nqst

The new options don't sound great to me with the import from: "Import from Take Picture" doesn't make sense.

Do you think we can rename it to something better? Perhaps "Photo camera" & "Video camera" could work?

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

aduh95 · 2022-07-06T13:02:29Z

On my iPhone, "Take Picture" takes me to the video UI, and "Record Video" to the photo one 🙈

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

Murderlon · 2022-07-18T11:38:57Z

website/src/docs/webcam.md

@@ -156,6 +157,12 @@ Set the preferred mime type for images, for example `'image/png'`. If the browse

 If no preferred image mime type is given, the Webcam plugin will prefer types listed in the [`allowedFileTypes` restriction](/docs/uppy/#restrictions), if any.

+### `mobileNativeCamera`
+
+Replaces Uppy’s custom camera UI on mobile with “Take Picture” and/or “Record Video” buttons that open native device UI for pictures / video (`Function: boolean` || `boolean`, default: `isMobile()`).


Is it really "and/or"? Can you disable one or the other?

Not currently, but since we allow that for the webcam plugin, I thought we need to mimic that functionality here as well.

Added modes support, please take a look @Murderlon

website/src/docs/webcam.md

Co-authored-by: Merlijn Vos <merlijn@soverin.net>

aduh95

We also want to update the types:

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

Line 10 in d437a54

export interface WebcamOptions extends PluginOptions {

…a btns

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

Co-authored-by: Antoine du Hamel <duhamelantoine1995@gmail.com>

arturi · 2022-07-21T13:31:32Z

Two options for the Dashboard (undocumented for now), one for Webcam. In theory if someone is building a mobile-only app, or if desktops start supporting camera UI, someone could use the Dashboard options without the Webcam plugin at all.

aduh95

So I tried to add showNativePhotoCameraButton: true, showNativeVideoCameraButton: true on the Dashboard option, but for some reason the Camera button is still visible on my iPad (despite it not working). Shouldn't it be hidden if we are forcing the mobile UI?

BTW, I'm still unsure about this is-mobile check, if it doesn't cover iPad use case, there's probably more it doesn't cover.

aduh95 · 2022-07-21T17:43:29Z

Here’s how it looks when I have the options set to true:

And here’s what I see if I click on Camera:

"Take Picture" and "Record Video" both work as expected, but they don't appear by default (probably because the iPad is not a mobile).

arturi · 2022-07-21T17:54:42Z

Yes, because this option is for the Webcam plugin, Dashboard option is a hidden thing, used by the Webcam plugin. You keep breaking my code! 😂 Correct usage with Webcam plugin:

uppy.use(Webcam, {
  mobileNativeCamera: true,
})

iPad

There’s an option to enable tablets, thank you for mentioning it!

Murderlon

Everything else LGTM. Thanks @aduh95 for the device testings.

website/src/docs/webcam.md

aduh95

There’s an option to enable tablets, thank you for mentioning it!

It looks like that by default, the iPad will request the "Desktop Website", and is-mobile won't detect it as a tablet even with the last commit. However, if I manually select Request Mobile Website, now it displays the correct option. Not perfect, but I doubt we can make a better default, so LGTM.

Also, using the correct option from the Webcam plugin does indeed work :) Should we rename the "internal" option to have a leading underscore to indicate it's meant to be internal only?

Co-authored-by: Merlijn Vos <merlijn@soverin.net>

nqst · 2022-07-27T09:56:22Z

The new options don't sound great to me with the import from: "Import from Take Picture" doesn't make sense.
Do you think we can rename it to something better? Perhaps "Photo camera" & "Video camera" could work?

Any chance we could address that?

* '3.x' of https://github.com/transloadit/uppy: webcam: Add support for mobileNativeCamera option to Webcam and Dashboard (#3844)

| Package | Version | Package | Version | | ---------------------- | ------------ | ---------------------- | ------------ | | @uppy/aws-s3 | 3.0.0-beta.2 | @uppy/react | 3.0.0-beta.2 | | @uppy/aws-s3-multipart | 3.0.0-beta.2 | @uppy/remote-sources | 1.0.0-beta.2 | | @uppy/companion | 4.0.0-beta.2 | @uppy/store-redux | 3.0.0-beta.2 | | @uppy/compressor | 1.0.0-beta.2 | @uppy/transloadit | 3.0.0-beta.3 | | @uppy/core | 3.0.0-beta.2 | @uppy/webcam | 3.0.0-beta.2 | | @uppy/dashboard | 3.0.0-beta.2 | @uppy/xhr-upload | 3.0.0-beta.2 | | @uppy/image-editor | 2.0.0-beta.2 | @uppy/robodog | 3.0.0-beta.3 | | @uppy/locales | 3.0.0-beta.3 | uppy | 3.0.0-beta.3 | - @uppy/react: Fix exports in propTypes.js to fix website build (Murderlon) - @uppy/dashboard,@uppy/webcam: Add support for `mobileNativeCamera` option to Webcam and Dashboard (Artur Paikin / #3844) - @uppy/aws-s3-multipart: make `headers` part indexed too in `prepareUploadParts` (Merlijn Vos / #3895) - @uppy/aws-s3,@uppy/core,@uppy/dashboard,@uppy/store-redux,@uppy/xhr-upload: upgrade `nanoid` to v4 (Antoine du Hamel / #3904) - @uppy/companion: update minimal supported Node.js version in the docs (Antoine du Hamel / #3902) - @uppy/companion: upgrade `redis` to version 4.x (Antoine du Hamel / #3589) - @uppy/companion: remove unnecessary ts-ignores (Mikael Finstad / #3900) - meta: use `node:` protocol when using Node.js built-in core modules (Antoine du Hamel / #3871) - meta: upgrade to Vite v3 (Antoine du Hamel / #3882) - @uppy/companion: remove `COMPANION_S3_GETKEY_SAFE_BEHAVIOR` env variable (Antoine du Hamel / #3869) - meta: fix release script for major beta versions (Antoine du Hamel)

* 3.x: (32 commits) @uppy/screen-capture: fix TODOs (#3930) @uppy/status-bar: rename internal modules (#3929) @uppy/transloadit: remove static properties in favor of exports (#3927) @uppy/informer: simplify `render` method (#3931) @uppy/url: remove private methods from public API (#3934) @uppy/dashboard: change `copyToClipboard` signature (#3933) @uppy/drop-target: remove `isFileTransfer` from the public API (#3932) meta: improve beta release script Release: uppy@3.0.0-beta.3 (#3918) Release: uppy@2.13.1 (#3916) Fix exports in propTypes.js to fix website build @uppy/compressor: fix upload causing meta name to reset (#3890) @uppy/transloadit: cancel assemblies when all its files have been removed (#3893) Add retries for flaky e2e test (#3915) Fix `uppy.close()` crashes when remote-sources or image-editor is installed (#3914) webcam: Add support for mobileNativeCamera option to Webcam and Dashboard (#3844) aws-s3-multipart: make `headers` part indexed too in `prepareUploadParts` (#3895) Add missing type for retry-all event (#3901) Companion app type (#3899) e2e: upgrade to Cypress 10 (#3896) ...

| Package | Version | Package | Version | | ---------------------- | ------------ | ---------------------- | ------------ | | @uppy/aws-s3 | 3.0.0-beta.2 | @uppy/react | 3.0.0-beta.2 | | @uppy/aws-s3-multipart | 3.0.0-beta.2 | @uppy/remote-sources | 1.0.0-beta.2 | | @uppy/companion | 4.0.0-beta.2 | @uppy/store-redux | 3.0.0-beta.2 | | @uppy/compressor | 1.0.0-beta.2 | @uppy/transloadit | 3.0.0-beta.3 | | @uppy/core | 3.0.0-beta.2 | @uppy/webcam | 3.0.0-beta.2 | | @uppy/dashboard | 3.0.0-beta.2 | @uppy/xhr-upload | 3.0.0-beta.2 | | @uppy/image-editor | 2.0.0-beta.2 | @uppy/robodog | 3.0.0-beta.3 | | @uppy/locales | 3.0.0-beta.3 | uppy | 3.0.0-beta.3 | - @uppy/react: Fix exports in propTypes.js to fix website build (Murderlon) - @uppy/dashboard,@uppy/webcam: Add support for `mobileNativeCamera` option to Webcam and Dashboard (Artur Paikin / transloadit#3844) - @uppy/aws-s3-multipart: make `headers` part indexed too in `prepareUploadParts` (Merlijn Vos / transloadit#3895) - @uppy/aws-s3,@uppy/core,@uppy/dashboard,@uppy/store-redux,@uppy/xhr-upload: upgrade `nanoid` to v4 (Antoine du Hamel / transloadit#3904) - @uppy/companion: update minimal supported Node.js version in the docs (Antoine du Hamel / transloadit#3902) - @uppy/companion: upgrade `redis` to version 4.x (Antoine du Hamel / transloadit#3589) - @uppy/companion: remove unnecessary ts-ignores (Mikael Finstad / transloadit#3900) - meta: use `node:` protocol when using Node.js built-in core modules (Antoine du Hamel / transloadit#3871) - meta: upgrade to Vite v3 (Antoine du Hamel / transloadit#3882) - @uppy/companion: remove `COMPANION_S3_GETKEY_SAFE_BEHAVIOR` env variable (Antoine du Hamel / transloadit#3869) - meta: fix release script for major beta versions (Antoine du Hamel)

arturi added 2 commits June 22, 2022 15:49

Add support for mobileNativeCamera option to Webcam and Dashboard

b7ba21c

update types

49542cd

arturi requested review from Murderlon, aduh95 and nqst and removed request for Murderlon June 22, 2022 20:00

missing comma

449138f

nqst reviewed Jun 29, 2022

View reviewed changes

aduh95 requested changes Jul 6, 2022

View reviewed changes

packages/@uppy/webcam/src/Webcam.jsx Outdated Show resolved Hide resolved

arturi changed the base branch from main to 3.x July 11, 2022 13:14

Set mobileNativeCamera to isMobile() by default

d27d607

Murderlon reviewed Jul 18, 2022

View reviewed changes

arturi and others added 2 commits July 18, 2022 12:52

Update website/src/docs/webcam.md

a2450f9

Co-authored-by: Merlijn Vos <merlijn@soverin.net>

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

b71e209

Co-authored-by: Merlijn Vos <merlijn@soverin.net>

aduh95 reviewed Jul 18, 2022

View reviewed changes

Respect modes like video-only and picture when rendering mobile camer…

33ac17a

…a btns

aduh95 reviewed Jul 21, 2022

View reviewed changes

packages/@uppy/webcam/src/Webcam.jsx Outdated Show resolved Hide resolved

arturi and others added 2 commits July 21, 2022 11:03

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

fad4c24

Co-authored-by: Antoine du Hamel <duhamelantoine1995@gmail.com>

Use includes

5d28ddf

arturi requested a review from aduh95 July 21, 2022 13:30

Update locale

45c1688

aduh95 reviewed Jul 21, 2022

View reviewed changes

Add tablet support

381eb53

Murderlon reviewed Jul 22, 2022

View reviewed changes

website/src/docs/webcam.md Outdated Show resolved Hide resolved

aduh95 approved these changes Jul 22, 2022

View reviewed changes

Update website/src/docs/webcam.md

ef86d3c

Co-authored-by: Merlijn Vos <merlijn@soverin.net>

arturi merged commit a7a4bd0 into 3.x Jul 27, 2022

arturi deleted the mobile-webcam branch July 27, 2022 09:52

Murderlon added a commit that referenced this pull request Jul 27, 2022

Merge branch '3.x' of https://github.com/transloadit/uppy into 3.x

ad5b6bc

* '3.x' of https://github.com/transloadit/uppy: webcam: Add support for mobileNativeCamera option to Webcam and Dashboard (#3844)

github-actions bot mentioned this pull request Jul 27, 2022

Release: uppy@3.0.0-beta.3 #3918

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

webcam: Add support for mobileNativeCamera option to Webcam and Dashboard #3844

webcam: Add support for mobileNativeCamera option to Webcam and Dashboard #3844

arturi commented Jun 22, 2022 •

edited

nqst left a comment

aduh95 commented Jul 6, 2022

Murderlon Jul 18, 2022

arturi Jul 18, 2022

arturi Jul 21, 2022

aduh95 left a comment •

edited

arturi commented Jul 21, 2022

aduh95 left a comment

aduh95 commented Jul 21, 2022 •

edited

arturi commented Jul 21, 2022

Murderlon left a comment

aduh95 left a comment

nqst commented Jul 27, 2022

webcam: Add support for mobileNativeCamera option to Webcam and Dashboard #3844

webcam: Add support for mobileNativeCamera option to Webcam and Dashboard #3844

Conversation

arturi commented Jun 22, 2022 • edited

nqst left a comment

Choose a reason for hiding this comment

aduh95 commented Jul 6, 2022

Murderlon Jul 18, 2022

Choose a reason for hiding this comment

arturi Jul 18, 2022

Choose a reason for hiding this comment

arturi Jul 21, 2022

Choose a reason for hiding this comment

aduh95 left a comment • edited

Choose a reason for hiding this comment

arturi commented Jul 21, 2022

aduh95 left a comment

Choose a reason for hiding this comment

aduh95 commented Jul 21, 2022 • edited

arturi commented Jul 21, 2022

Murderlon left a comment

Choose a reason for hiding this comment

aduh95 left a comment

Choose a reason for hiding this comment

nqst commented Jul 27, 2022

arturi commented Jun 22, 2022 •

edited

aduh95 left a comment •

edited

aduh95 commented Jul 21, 2022 •

edited