Camera upload button

[gijsvbeek]

Hi,


I'm looking for a possiblity to create a button on a form, that calls the camera of an Ipad.
I have a form with multiple questions, users can fill in from an ipad, but they also demand to take photo's right from the form.

is there some kind of solution for this??


many thanks!

[rostislav]

For a complete example of how it can be done check http://www.raymondcamden.com/2013/05/20 ... t-PhoneGap

Note, this will only work on iOS versions 6+.

Essentially, the solution would be to insert a bit of html (by adding an html control in FormsDesigner), for example (taken from the example in the link):

Code: Select all

<input type="file" capture="camera" accept="image/*" id="cameraInput" name="cameraInput">

This will add a button 'Choose file', which once clicked (on iOS 6+) will result in a dialog like this one http://i.stack.imgur.com/AeDJR.png

And then using JavaScript you'd retrieve the resulting image. You'd also be able to customise the 'Choose file' button rename it, etc. using HTML and/or JavaScript/jQuery. Check the example link for more detail.

[gijsvbeek]

Thnx for the example, i'm gonna try it tomorrow!

[Paul Chapman]

HI There



I am looking at doing something similar to this with a Windows 8.1 tablet runing Sharpeoint 2013 - do you have any advice on how to do this,....small words typed s l o w l y please if possible. Although i'm quite well versed in VBA this Sharepoint thing is quite new to me and i havent got much hair left to pull out



Thanks in advance



Paul

[rostislav]

Good day!

It depends on the browser that will be used to access your page. Go to this page with your device http://mobilehtml5.org/ts/?id=23 and click the button to capture image. If it works (your camera is being utilized for this), you can use the method described in my first post.

If it doesn't work go to this page http://davidwalsh.name/demo/camera.php. If your camera is being invoked, then follow the method described here http://davidwalsh.name/browser-camera and you should be fine. You'd have to, like with the previous method, insert a bit of html and a bit of JavaScript. This method utilizes the getUserMedia API, which is not supported on all browsers, check http://caniuse.com/#feat=stream to see which ones do support it.

[Paul Chapman]

Thanks for this the Windows 8 tablet i am using appears to be supporting the second method when run through Mozilla Firefox......now the question that really shows my inexperience, how / where would i use this code on my site.

The tool i am building is an audit tool run through Sharepoint, the auditor assigns scores based against questions and then this feature would allow them to take photos directly with the tablet to substantiate the scores. What i would like to do is have a button on the screen that when selected captures the image from the camera and displays it on the page


Regards and thanks for the help to date


Paul

[Paul Chapman]

update


Managed to figure it out by embedding the whole lot in a HTML field on the page. All i have to do now is figure out why after capturing the image the page reloads itself and loses the image.

....any thoughts appreciated


Paul

[rostislav]

Can you post your code here?

[Paul Chapman]

<video id="video" width="640" height=480" autoplay></video>
<button id="snap" class="sexyButton">Snap Photo</button>
<canvas id="canvas" width="640" height="480"></canvas>

<script>

// Put event listeners into place
window.addEventListener("DOMContentLoaded", function() {
// Grab elements, create settings, etc.
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
video = document.getElementById("video"),
videoObj = { "video": true },
errBack = function(error) {
console.log("Video capture error: ", error.code);
};

// Put video listeners into place
if(navigator.getUserMedia) { // Standard
navigator.getUserMedia(videoObj, function(stream) {
video.src = stream;
video.play();
}, errBack);
} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
navigator.webkitGetUserMedia(videoObj, function(stream){
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, errBack);
} else if(navigator.mozGetUserMedia) { // WebKit-prefixed
navigator.mozGetUserMedia(videoObj, function(stream){
video.src = window.URL.createObjectURL(stream);
video.play();
}, errBack);
}

// Trigger photo take
document.getElementById("snap").addEventListener("click", function() {
context.drawImage(video, 0, 0, 640, 480);
});
}, false);

</script>

[rostislav]

Add type="button" to the button element, i.e.

Code: Select all

<button id="snap" type="button" class="sexyButton">Snap Photo</button>

This will stop the button element from submitting the page.

Also, best if you put the contents of <script> into the JavaScript editor in Forms Designer, and remove the script tags from the HTML code. Forms Designer will wrap the code inside <script> anyway, but it'll also put it in the correct place on the page.