Can I use Chrome on desktop to take a photo and upload it on a form?

Question

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?

Answer 1

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.

Answer 2

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:

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.

Answer 3

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:

• Running extension without uploading on chrome
• Temporary file using JS
• Save Image in localstorage
• Running JS on loaded page