It is currently possible with “My Device” or “Browse files” buttons, you get the standard system dialog, which on mobile devices includes the “take picture” option. But you are likely talking about the Webcam plugin button automatically doing that on mobile? It’s a good idea, I wonder if we could just build this as an option, without extra plugins, into mobile Dashboard. But then we need to hide the “desktop” Webcam on mobile, so we don’t get too buttons 🤔

Awesome @arturi !

A follow up question: When i am using the dashboard/dashboard modal with the vue library and clicking on my device, i am taken directly into my local storage. But when i try your demo on the website, i am indeed presented with the option to use my camera or use the local storage.

Is there a setting that controls this that i am totally missing, or is there a difference between how the vue wrapper works?

Could you share a screenshot, please? If it’s the same Dashboard on the same device, behaviour shouldn’t be different with the Vue wrapper or vanilla JS.

Hey again @arturi , here comes a screenshot.

I just discovered however, that if i disable (uncheck) the restrictions checkbox on your example. It is the same behaviour. So Maybe its one of those settings in restrictions that i need to set to allow for the native camera selection to appear? Could it be i need to allow video?

It was, as soon as i added restrictions to it, it worked.

I'm experiencing this same issue. I'm running Uppy in React inside Cordova on Android.

In my React app, I have showNativePhotoCameraButton set to true for the Dashboard component, but when I tap it, I only get the browse files screen. Same for showNativeVideoCameraButton. I have the Webcam plugin working and it correctly accesses the camera, so it's not an Android permissions issue. It's just this native button that's not working.

I have tried adding some restrictions as per @Pixney-William's comment but I'm just stabbing in the dark really, and nothing I do gets it working. @Pixney-William, what restrictions did you add to get it working?

The same issue.
Samsung S22 don't show native camera menu item. Just gallery.
And looks like input file should have capture="camera" attr for better performance.

Any updates here?

You mean this option mobileNativeCamera? That's been around for a long time now.

I tested this on Next.js, but it doesn't work directly with React. I had to use this solution from #4315 (comment)

const Foo = () => {
  const isMobileDevice = isMobile({tablet: true});

  const uppy = new Uppy({
  //...
    .use(Webcam, {
          id: 'webcam',
          countdown: false,
          modes: ['picture'],
          videoConstraints: {
            facingMode: 'environment',
          },
          preferredImageMimeType: 'image/jpeg',
          showVideoSourceDropdown: true,
          mobileNativeCamera: true,
          mirror: false,
        })
        //...
        
  return (
    <Dashboard
      showNativePhotoCameraButton={isMobileDevice}
      showNativeVideoCameraButton={isMobileDevice}
      // ...
    />
  );
}

On mobile, an extra "take picture" button appears on the dashboard, but it shows exactly the same options as "browse files."

With both the webcam and default browse file features enabled, there are three buttons:

Browse file
Take picture (native camera) [on iOS, this shows the same options as browse file]
Camera (webcam)
Additionally, on Android, the "take picture" button only leads to the photo gallery.

I wonder if there's a way to improve this as mentioned in the GitHub discussion:

picture” option. But you are likely talking about the Webcam plugin button automatically doing that on mobile? It’s a good idea, I wonder if we could just build this as an option, without extra plugins, into mobile Dashboard. But then we need to hide the “desktop” Webcam on mobile, so we don’t get too buttons 🤔

Implementing this would greatly enhance the user experience!

I tested this on Next.js, but it doesn't work directly with React. I had to use this solution from #4315 (comment)

const Foo = () => {
  const isMobileDevice = isMobile({tablet: true});

  const uppy = new Uppy({
  //...
    .use(Webcam, {
          id: 'webcam',
          countdown: false,
          modes: ['picture'],
          videoConstraints: {
            facingMode: 'environment',
          },
          preferredImageMimeType: 'image/jpeg',
          showVideoSourceDropdown: true,
          mobileNativeCamera: true,
          mirror: false,
        })
        //...
        
  return (
    <Dashboard
      showNativePhotoCameraButton={isMobileDevice}
      showNativeVideoCameraButton={isMobileDevice}
      // ...
    />
  );
}

On mobile, an extra "take picture" button appears on the dashboard, but it shows exactly the same options as "browse files."

With both the webcam and default browse file features enabled, there are three buttons:

Browse file Take picture (native camera) [on iOS, this shows the same options as browse file] Camera (webcam) Additionally, on Android, the "take picture" button only leads to the photo gallery.

I wonder if there's a way to improve this as mentioned in the GitHub discussion:

picture” option. But you are likely talking about the Webcam plugin button automatically doing that on mobile? It’s a good idea, I wonder if we could just build this as an option, without extra plugins, into mobile Dashboard. But then we need to hide the “desktop” Webcam on mobile, so we don’t get too buttons 🤔

Implementing this would greatly enhance the user experience!

I was able to make it work using
<Dashboard nativeCameraFacingMode={'environment'} showNativePhotoCameraButton={true} />
and webcam integration was not required.

Closing as it's resolved and the feature for native camera was built.