How to access mobile camera on button click using html - html

Hello I need to access mobile camera using html by a button click, by searching for it on google and stackoverflow I have got some html input tag examples like below. But here what I need is, I have a custom button, when I click on the button I should be able to access my camera but below is a input tag and Im not able to add it to my button. So someone please help me how to do that.
Thanks a lot.
<input type="file" capture="camera" accept="image/*" id="cameraInput" name="cameraInput">

If you want access to the native camera of an mobile device you can use the cordova camera plugin:
cordova camera API
You can open the camera by calling the getPicture() function.
camera.getPicture(successCallback, errorCallback, options)

Related

How to set camera permission for qrcode scanner with html5

I am using the following code to develop a qrcode scanner(source : https://github.com/mebjas/html5-qrcode)
i am looking the action when user click the Request Camera Permission Button. I want to implement this kind behavior for my code in angular. so i need that action.
i would like to have this behavior
Can anyone help me for this case? thanks

Upload multiple camera photos with html input

I have a web application with an upload form.
<input type="file" name="c_files[]" id="c_files" multiple="multiple" />
I can select and upload mutliple files from the gallery but can't make multiple photos from the camera app. Taking the photos first and then uploading them from the gallery is not a good way to go.
I'm using Google Chrome Version 92.0.4515.159 on Android 11.
Firefox for Android and Safari on iOS isn't working either.
Apparently I have to use javascript right or is their an exisiting work around?
There is no such thing as "Out of the Box" that will solve your problem or your scenario, and the truth is that not HTML have at least one way to get there.
But... we have javascript I can think of something that is not exactly what you are looking for but it would be the way to perform this feat:
detect that you are on a mobile device.
allow that if you are on a mobile device when you click on the file field, you directly invoke the camera APP and take multiple photos.
when returning to the form detect the event and make the programmatic trigger of the multiple input type file, but directly open the image gallery...
select multiple images to attach.
As you can see, this is a concept/solution based on the capabilities that we know the mobile environment and the javascript language have. regardless of HTML.
To achieve this you must get each point mentioned above to work.

HTML file input on iOS - accept images and videos

I want to implement a HTML file input to let the user shoot a picture or a video. I define the allowed formats via accept attribute:
<input type="file" id="sentFile" accept="image/*,video/*">
If I click on the input, iOS 9 shows me a modal, where I'm able to "Record picture or video". After clicking on that button, the camera app opens and I'm able to take a picture, but can't record a video.
If I define a single input with video only, f.e.:
<input type="file" id="sentFile" accept="video/*">
I'm able to record a video.
Why is the first one not working on iOS?
try this
accept="image/*;video/*;capture=camcorder"
Have you set the Privacy - Camera Usage Description in your ios application?
You need to add that permission if you want to take a photo in your application.

Paypal hybrid app

I have managed to integrate a donate paypal button in a Cordova app:
<form action='https://www.paypal.com/cgi-bin/webscr' method='post' target='_top'>
...
</form>
All works fine except that when the button is pressed, a new window appears and completly covers the app webview making it impossible for the user to go back to the app (the only way is killing the app process), which I think is a very bad user experience.
Things that I've tried:
target='_blank': same result
target='myIFrameName': Cross-domain problem
Post the form via ajax and put result in a div: Form must be calculated on the fly error (with $http.put in ionic, haven't tried with jQuery)
Please, any solution?
The best one would be to have the paypal window inside the current webview not covering header, as I could place a back button there (something like iframe solution that could work with cross domain) but also could be with placing a link to go back in the paypal donate page. I haven't investigated deeper enought the paypal plugin at this location: https://github.com/paypal/PayPal-Cordova-Plugin. anyone knows if it could do the work? (I've already opened an issue there asking for this feature)
Why not use a inApp browser ? Cordova InAppBrowser
And call cordova.InAppBrowser.open( url, '_blank', 'location=yes'); on a button click function, or whatever suits you.
_blank = inside the app
_system = system's browser( will redirect you from app )

How to limit the user to certain urls in webview?

I have created an adobe air application. I have integrated facebook in my application.
Now when the facebook login page opens in the webview, user has the option to use "Forgot your password" and "Sign Up" links. I want to prevent the use of these links.
I am using LOCATION_CHANGED and LOCATION_CHANGING events to detect the browsing of the user. How can i prevent this?
Any help appreciated.
Have you tried using event.preventDefault()? I think that should stop the web view from redirecting. Perhaps you can evaluate the url the view is trying to go to and selectively call preventDefault() then?