Page 1 of 2
Camera upload button
Posted: 30 Sep 2015
by 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!
Re: Camera upload button
Posted: 01 Oct 2015
by 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.
Re: Camera upload button
Posted: 07 Oct 2015
by gijsvbeek
Thnx for the example, i'm gonna try it tomorrow!
Re: Camera upload button
Posted: 08 Oct 2015
by 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
Re: Camera upload button
Posted: 09 Oct 2015
by 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.
Re: Camera upload button
Posted: 12 Oct 2015
by 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
Re: Camera upload button
Posted: 12 Oct 2015
by 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
Re: Camera upload button
Posted: 12 Oct 2015
by rostislav
Can you post your code here?
Re: Camera upload button
Posted: 12 Oct 2015
by 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>
Re: Camera upload button
Posted: 12 Oct 2015
by 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.