CODEWITHSUNDEEP
javascripthtmlfunctionmobilecamera
Pablo
Pablo

Reputation: 5

Bring up camera function mobile website

For a school project I need to make a mobile website (not a native app), with navigation for tourists. It's going the be made for a iphone 5s (safari)

The only problem I have now is that I want to build a camera function and gallery function in this as well.

I've read some things about phonegap, but this is native app only?

Is it possible to make this in HTML, that activates the camera function when pressing a button? And when the photo is made, it needs to be saved to a gallery in that same website environment. So, when pressed on the gallery button, you get to see all your photo's made on the tour.

If at least I could get the camera function working, im happy..

Thank you!

Upvotes: 0

Views: 159

Answers (3)

ashjones86
ashjones86

Reputation: 128

easy fix to your issue on the ugly choose file. Just change the img src="url" to your image for a camera, i have hosted a test version here - CLICK HERE FOR TEST VERSION

HTML

<label class="filebutton"> <img src="camera-icon.png" /> <span><input type="file" id="myfile" accept="image/*;capture=camera"></span> </label>

CSS 

`<style>
label.filebutton {
width:100px;
height:100px;
overflow:hidden;
position:relative;
background-color:#ccc;
}

label span input {
z-index: 999;
line-height: 0;
font-size: 50px;
position: absolute;
top: -2px;
left: -700px;
opacity: 0;
filter: alpha(opacity = 0);
-ms-filter: "alpha(opacity=0)";
cursor: pointer;
_cursor: hand;
margin: 0;
padding:0;
}
</style>`

Upvotes: 0

Pablo
Pablo

Reputation: 5

Thanks man. The only problem now is that I get a dull button that says "choose file". I want to press an icon which brings up the camera immediately. I was trying to fix this, but after 5 hours I gave up..

Upvotes: 0

ashjones86
ashjones86

Reputation: 128

I can only give you android as an exmaple.

<input type="file" accept="image/*;capture=camera">

This gives an option to browse images and access camera.

Hope it helps.

Upvotes: 1

Related Questions