5

On Google Chrome on Android when I browse for a file to upload on a form I have the option of taking a photo using the camera and uploading the resulting image. This is done without "leaving" Chrome (that is, having to open the camera separately, take the photo, switch back and browse for the recently taken photo)

Is there a way to do this on Google Chrome in Windows?

Camera is selectable as a "browse" action

6
  • "when I browse for a file to upload" - what are you taking a photo of? The file dialog?
    – harrymc
    Mar 18, 2022 at 15:07
  • Do you want to use the PC's camera from Chrome to take a picture? Mar 18, 2022 at 16:27
  • @harrymc I thought my question was rather clear. When you go to upload a file on a webpage that uses the HTML <input type="file" /> tag, Android asks you to pick an app so you can choose a file. In the screenshot above, I can pick Camera (to take a photo and immediately attach it), Android System File Picker (so I can pick a file previously saved to my phone), or the Files app (which does the same thing). I want to know if there's a similar feature for Chrome which would not use the file dialogue, but instead use my webcam.
    – Grayda
    Mar 19, 2022 at 16:28
  • @ReddyLutonadio yes, but on any website (I already know how to write a website that uses the webcam, because I did that for a living for a while). On Android, I can visit any random webpage that has a <input type="file" /> tag, and when I tap the button, I get an option to either pick a preexisting file from my phone, or jump to the camera app to take a photo, which is immediately attached to the <input> tag.
    – Grayda
    Mar 19, 2022 at 16:31
  • It doesn't work like that on the PC - you can only select files. You need to take the photo with the app first, then point to the file. It's not the same as on Android, which is why we didn't understand the question. I truly hesitate writing a negative answer, although it seems like the only one.
    – harrymc
    Mar 19, 2022 at 16:33

3 Answers 3

7
+100

No, as Windows is programmed today, you can't.

The issue here is that there's a basic misunderstanding in your question. The dialogue you see on Android is given by the operating system, not by the browser. You can use a different browser on Android, and you'll get the same dialogue. Also, pressing on "Camera", the phone's camera app will open (the App is different on any phone, depending on your hardware and OEM) so you can take the picture, and the Android OS will pass this picture directly to the browser. It's the way the Android OS was programmed to allow you to do this. In fact, you get similar dialogues with multiple choice of action in various situations, such as when sharing content from any app, or when attaching a file to an email.

Windows, on the other hand, always presents you with an Explorer dialogue. Period. This is a different kind of approach underlying the whole OS, independently of the application you're using. Same thing happens if you want to send an attachment to an email: Explorer dialogue again.

It is not possible to change this with a browser plugin. A html <input> tag will always ask for a user action, and for security reasons such action is handled by the OS: the browser itself is not allowed to access your personal files. It is you as a user which has to "tell" the OS: "please hand over this private file of mine to the browser". Even in Android, the same thing happens: it is you as a user which tells the OS: "let's use the camera for this". The Chrome browser just receives the file which the OS is passing to it.

A browser plugin will never be allowed to hijack such an action, as it would be a major security issue.

So, (except for someone programming an ugly hack) for the moment, this is not possible in Windows. It could be however that some day - at the discretion of Microsoft - in Windows 11 such a feature will be added, as the OS is continuing to adapt to various usage scenarios.

2
  • 1
    The limits between Chrome & Android are unclear, as both are created by Google, so I wouldn't distinguish that strongly between browser and operating system. To support the new standards outlined in my answer, Google might decide in the future to port it to the desktop, or not. Microsoft itself is more likely to add it to Edge only, to give it one more advantage over Chrome.
    – harrymc
    Mar 23, 2022 at 8:29
  • @harrymc 1) the result on Android is the same, even if you use Firefox. Or Opera. It's a feature of the OS. 2) the OP's question is from a USER perspective, not from a webmaster's / programmers perspective: it's about any form wherever on the Internet.
    – 1NN
    Mar 23, 2022 at 13:36
1

What you are asking for is covered by the HTML Media Capture standard from 2018.

This standard is better described in this link, with even a demonstration image that seems to point to an Apple desktop:

enter image description here

The new standard is an evolution of the <input> tag on the PC, currently only used for uploading files.

The new HTML <input> tag may either select a file of a certain type, or capture data from the matching device. This is done by adding HTML attributes on the <input> tag.

One useful attribute here is capture:

The capture attribute specifies that, optionally, a new file should be captured, and which device should be used to capture that new media of a type defined by the accept attribute.

The accept attribute is defined as:

The accept attribute takes as its value a comma-separated list of one or more file types, or unique file type specifiers, describing which file types to allow.

Here is an example of HTML code that uses these attributes:

<p>
  <label for="soundFile">What does your voice sound like?:</label>
  <input type="file" id="soundFile" capture="user" accept="audio/*">
</p>
<p>
  <label for="videoFile">Upload a video:</label>
  <input type="file" id="videoFile" capture="environment" accept="video/*">
</p>
<p>
  <label for="imageFile">Upload a photo of yourself:</label>
  <input type="file" id="imageFile" capture="user" accept="image/*">
</p>

If the HTML file does not use these attributes, then all it can do is select a file from disk, created in advance by, for example, the camera app.

These tags will let you record when they will be correctly implemented by Chrome. Unfortunately, at the moment they do not work on the desktop. Already working on Android Chrome, I hope that it's only a matter of time for it to arrive on the desktop.

Currently a lot of JavaScript is required for media capture, as can be seen in this example.

You need to wait for the Chrome developers to implement them for the desktop - we can't do that.

4
  • Why downvote? Everything above is factual.
    – harrymc
    Mar 20, 2022 at 10:08
  • 1
    it's factual, but doesn't really answer my question. On desktop all it really does is change the file picker to default to an audio file, video or image -- it doesn't present a UI to let me record audio, video or take an image. On Android, pressing the first button in the example launches my audio recorder, and the other two launch my camera. These let me capture media, without having to save them to a temporary file first and then locate that file.
    – Grayda
    Mar 20, 2022 at 22:49
  • 1
    These tags will let you record when they will be correctly implemented by Chrome. Unfortunately, they do not work on the desktop. Already working on Android Chrome, I suppose that it's only a matter of time for it to arrive on the desktop. You may see the current state of the Chrome published API for media capture in this example. Examine its source to see how much JavaScript programming is required without these tags. You need to wait for the Chrome developers to implement them for the desktop - we can't do that.
    – harrymc
    Mar 21, 2022 at 9:30
  • @harrymc , i dont agree that we cannot do it, we can create extention for it Mar 23, 2022 at 11:44
1

If I have understood your question correctly, your question is "How to get the Chose an action UI on desktop version of chrome?",

I am pretty new to SuperUser, but I think you can achieve it using method below:

  • Creating an extension to keep the function running on loaded pages.
  • If <input> is clicked run the UI function then run the main function (For creation, below are the methods)

For UI:

  • You have code it using JavaScript, you can add the options: "Take Photo", "Browse from files".

For Taking photo and directly pass it to input:

  • Your have to Write a JavaScript function to interact with webcam which is possible only if the user gives permission, and click photo, save it to localstorage and then access the localstorage and put that data as the input.

See the following links for help:

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.