HTML input type="file" not working to pull up camera for Pixel / android 14 combination

Question

I posted this in the react-native-webview discussion thread in GitHub in case this is something they need to add support for, but wanted to see if anyone had any thoughts here:

Disclaimer: I'm a web developer, not an android developer so my knowledge of all things android is shallow at best.

My team has noticed that our PWA application with a react native webview layer seems to only experience issues with an <input type='file' capture> element based camera for pixel users (at least 6 and 8) running android 14. It appears to work fine to bring up the camera for other Pixel users running 13 and below.

Is anyone aware of any reason why this method would fail on the Pixel / android 14 combination in particular? I've seen some threads that 14's SAF cracked down on access to the phone's files, which the camera would be considered with the html input type="file" element, but even if that's the case, I'm not sure what can be done on our end. Any insight would be greatly appreciated!

As a note, we're using capture('') to force open the camera and deny the photo file picker.

<input id="camera" type="file" name="picture" accept="image/*" capture={'' as any} ref={inputFileRef} onChange={(e) => handlePhotoChanges(e)} /> 

In handlePhotoChanges is a line inputFileRef.current.click() that fires but fails to open the camera.

HTML input file element docs: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file

We have narrowed the issue down to Pixel users running android 14, but are still researching what might be particular about pixel and android 14 to cause this issue.

Answer 1

After testing different accept and capture settings on android 14 chrome, below are my findings. It's just so weird.

1. both accept and capture are unset: can use camera or select from gallery

2. only accept is set:

• only accept image type: can only select from gallery

      // full MIME 
      <input type="file" accept="image/jpeg" />
      // file extension
      <input type="file" accept=".jpeg" />

• accept file types other than image: can use camera or select from gallery

      <input type="file" accept="image/jpeg,application/pdf" />
      <input type="file" accept=".jpeg,.pdf" />

3. only capture is set: can only use camera

      <input type="file" capture="environment"/>

4. both accept and capture are set:

• accept string is composed with file extension: can only select from gallery

      <input type="file" accept=".jpg,.jpeg" capture="environment"/>

• accept string is composed with full MIME type: can only use camera

      <input type="file" accept="image/jpg,image/jpeg" capture="environment"/>

Answer 2

I was able to get the camera option working by adding an arbitrary value in addition to the other accept types.

<input type="file" accept="image/*,android/force-camera-workaround" />

you can add your own value, I just went with "android/force-camera-workaround" so I know what it is. It does need to be properly formatted, however. It did not work without the '/'.