Trigger Photo Capture with Call

How do I trigger a function when the “Take Photo” button is pressed and actually capture the photo through the function’s event?

Hi Dee

This can be accomplished using the on-capture callback on the <capture-photo/> component. The function specified in the on-capture attribute will be called when a photo is captured or uploaded

Below is a basic example.
View XML

<var name="new_photo" type="photo" />

<capture-photo bind="new_photo" label="Photo of To Do item" on-capture="savePhoto" source="camera" resolution="small" downloadable="true" />

View JS

function savePhoto() {
    if (view.new_photo) {
        var toDo = DB.to_do.create();
        toDo.photo = view.new_photo;
        toDo.save();
    }
}

Please note, when on-capture is triggered, the data, a photo in this case, is passed to the JS function automatically and can be referenced in the function by specifying that the function will receive a parameter, no changes are required on the XML side.

Here is an alternative function making use of the parameter instead of the bound view variable.

function savePhoto(photo) {
    if (photo) {
        var toDo = DB.to_do.create();
        toDo.photo = photo;
        toDo.save();
    }
}

Please try both and decide which one works best for you.

Hope this helps!

1 Like

Hi Tielman
Thanks for that.
Is the on-capture able to be triggered without needing to press the button? I.e. the camera takes the photo when a condition is met.

Unfortunately there is not currently a way to programmatically trigger the capture of the photo (ie after 5 seconds of the camera app being open, or once the ‘subject’ is in the middle of the screen, etc.).
In order to capture a photo users either have to push the capture button or upload an existing image from their gallery.

Under what condition would you have liked the camera to take the photo automatically?