Integrating cordova plugin camera usage

Any assistance rendered here is well appreciated. Thanks for your contribution in advance.
Please my problem is that I integrated cordova-plugin-camera and I have a read lot of its documentation but I still find it difficult to implement.
Please what I want is that when I click a button camera should be opened for camera usage or where to select image.
I have read this documentation several time and I understand but attaching button click event to do this is my problem.
These are the sample code I got from the documentation:
function openCamera(selection) {

var srcType = Camera.PictureSourceType.CAMERA;
var options = setOptions(srcType);
var func = createNewFileEntry;

if (selection == "camera-thmb") {
    options.targetHeight = 100;
    options.targetWidth = 100;
} cameraSuccess(imageUri) {

    // You may choose to copy the picture, save it somewhere, or upload.

}, function cameraError(error) {
    console.debug("Unable to obtain picture: " + error, "app");

}, options);


function setOptions(srcType) {
var options = {
// Some common settings are 20, 50, and 100
quality: 50,
destinationType: Camera.DestinationType.FILE_URI,
// In this app, dynamically set the picture source, Camera or photo gallery
sourceType: srcType,
encodingType: Camera.EncodingType.JPEG,
mediaType: Camera.MediaType.PICTURE,
allowEdit: true,
correctOrientation: true //Corrects Android orientation quirks
return options;

function displayImage(imgUri) {
var elem = document.getElementById(‘imageFile’);
elem.src = imgUri;

What the documentation suggested is this


This plugin defines a global object, which provides an API for taking pictures and for choosing images from the system’s image library.

Although the object is attached to the global scoped navigator , it is not available until after the deviceready event.

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {

Please where do I add this addEventListener and where do I use the above code on deviceReady.
Please I know this is not related to framework7 issues but I know many here might have solved this issue before.
I am using core framework7 v5, componentUrl. From this page called upload/snap picture for upload I would like to have a button that when user click it, it will trigger openCamera and send the result to the server.
Thanks for your response in advance.

First question, are you debugging your app on a physical device?

Second question, does your code include an event listener for ‘deviceready’?

Thanks for your response. The first question is that right now I am debugging on browser but I know that when I get the right way to handle this I will test on physical device. The issue is that I do not know where to place the event listener and how to call device ready when user click a button I am using componentUrl method of displaying a page.

If you can please assist me with how to get this done I will appreciate. Thanks