I'm attempting to make an app with Phonegap to be used on Android devices and I need a way to take pictures without actually opening the camera screen. I know how to access the camera normally with Phonegap but that involves opening the camera screen, pressing the take picture button and then confirming your picture. I want to be able to directly access the camera and take a picture without having to go to the camera screen and have the user press all those buttons. Is this possible using just html and javascript?
I've looked into getUserMedia and that does exactly what I want but it doesn't work in Phonegap. It only works with certain browsers.
Related
So in my application, I am allowing users to upload files. So after clicking on input he gets options like pick up the video from the gallery or open camera to take video and upload it. And this is something that androids give by themselves. If the user opens its camera and record video in HD so even a small video like 10sec videos goes to 100MB. I want to restrict the user camera to the least resolution. So that the video or photo that he takes, the size won't be much.
Thank you in advance.
You cannot set the resolution or any other camera setting when you are launching the camera app by Intent. So there are two solutions to your problem.
Integrate Camera2API in your app and create a custom camera with all controls in your hand.(complex to implement but fast to use)
Post process the video to lower the resolution after the video has been recorded(easy to implement but needs post processing time)
I am new to html. I'm currently using django to create a website and wondering is there some way that I can preview my website at phone? For instance, if I set my width to be 1000px, how this will behave in a mobile device?
if you are using google chrome, you can inspect the page (CTRL + SHIFT + I ) and then select the device icon in the upper left corner. This option will show you how your website will respond on mobile.
You should build a responsive web application. Responsive Web design is the approach that suggests that design and development should respond to the user’s behaviour and environment based on screen size, platform and orientation.
The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries. As the user switches from their laptop to iPad, the website should automatically switch to accommodate for resolution, image size and scripting abilities.
You can use the Google Chrome dev-tools, but I find them woefully inadequate and often inaccurate. They don't render the site I am currently working on very well.
I would recommend using a tool like Ngrok. It can be used to let you host the development environment on your local machine while easily viewing the site on your mobile device.
First of all, I reccomend using frameworks like Bootstrap which make all your components on your page 100% responsive (components adjust to the display size automatically) if you want them to be.
When your testing your website on your browser, right click anywhere and select "inspect". You will be promted a viewing window where you can select the mobile device of your choice to emulatee your website on it.
See image
I am using phonegap to develop an android app and writing a photo-taking module.
I have followed phonegap's API and it works (Full screen camera open automatically, snap picture and display in an tag).
However I would like to resize the camera screen when it open up, that is I do not want the camera screen being full screen, but an small rectangle size which can be put inside some tag.
I wonder if it is possible, and if yes how would I do it? Please give me any hints! Thanks!
Phonegap does not control the camera screen. What it does is start the phone's camera app and get the result back, so there's no way you can resize it.
If you want a camera view that does not take all the screen you can either build a phonegap plugin using native code (not sure how to make a plugin only taking part of the screen) or use HTML 5 camera api instead of phonegap's api. The down side is it will only work with recent versions of android.
Have a look at Raymond Camden's blog for a sample of how to use html5 camera api : http://www.raymondcamden.com/index.cfm/2013/5/20/Capturing-camerapicture-data-without-PhoneGap
I'm developing course lectures for mobile devices, and have zoom capabilities disabled. I would like to keep it this way for everything on the page except images.
I've come close to what I'm aiming to do before by having the meta user-scalable="no" replaced with "yes" via jquery when the user clicks on a link that opens a pop up window within the page, allowing the user to then zoom in when the pop up window was open, and many of these pop up windows contained the images I wanted to enable the zoom for.
However, not all of the images I want the user to be able to zoom in on are inside of the pop up window, and I don't dictate what content goes where. I only control the gui (css, script files, etc.)
Is there a way to apply scalable="yes" to images only, while keeping the rest of the gui scalable="no"?
Scaling part of the page (the image) and not the rest of it doesn't really make sense. I think you'll probably be happy with the default behavior of images in the browser. Set user-scalable="no" for the website as normal, for images have links that open them in a new window (target="_blank") this will open a new browser tab and allow the user to zoom until they decide to go back to the page.
This method is usually far superior for mobile compared to something like lightbox due to performance benefits of the browser only needing to display the image.
I'll also add that many users get annoyed when user scaling is disabled (myself included). You may want to consider setting a minimum scale and allowing the user to zoom if they want instead.
We're developing an app using Trigger.io in conjunction with Jquery Mobile 1.1.1. We're aware of the modifications to the viewport meta tag in JM to enable or disable zoom, but in another Stack question about Trigger.io, one of their devs mentioned they disable zoom at the webview level: Preventing zoom with trigger.io forge
We would like to enable zoom when displaying a large image on the page - is this possible using the Trigger framework?
yes we do disable zooming in the WebView: if you include a large, unscaled image in your HTML, the user will be able to scroll around to see the full image, but pinches won't work.
Of course, you could have the image down-scaled to start with, then blow it up to full size when the user clicks on an icon? Libraries such as iScroll4 might help here too.
Also, we would be able to make the WebView's zooming behaviour somewhat configurable (although we would always default to making it non-zoomable). Get in touch with support#trigger.io if you absolutely need different behaviour.