How To Create Customized Camera Preview In Cordova?

Cordova is a very famous and powerful platform for building hybrid mobile applications using web technology and adding a functionality of camera is quite a common requirement to incorporate in mobile apps and we might want to add our own customized UI for Camera Preview. The default Camera plugin of Cordova doesn’t provide much of a customized experience. Therefore,

In this blog, we will be exploring how to create a customized Camera preview in our Cordova app and integrate it with the user interface that meets your needs.

Steps For Creating A Customized Camera Preview

We can integrate the camera functionality in Cordova app using the Cordova-plugin camera, but this does not let us change the default UI they provide.

Prerequisites

Before we dive in, make sure you have a working node js project that’s wrapped with Cordova with Node.js, npm and Cordova CLI installed. Let’s begin now.

  • Open your node project and navigate to the Cordova directory within the project.
  • Install the camera plugin cordova-plugin-camera-preview. This plugin facilitates us and allows us to integrate HTML interactivity with the camera. 

cordova plugin add cordova-plugin-camera-preview

  • Design the user interface for your camera preview. Below is a simple react code example that shows a Flash button to toggle the flash, a Camera button to switch the camera from front to back or vica-versa, and a click button to take the picture.
<!DOCTYPE html> <html> <head>     <title>Custom Camera Preview</title> </head> <body>       <div>      <div className = "preview">       <div className="preview_header">       <button className="preview_button" onClick={() => flashOn()}>       flash            </button>       </div>       <div className="preview_footer">       <button className="preview_button" onClick={() => switchCamera()}>       Switch       </button>       <button className="preview_button" onClick={() => takePicture()}>        Click       </button>       </div>      </div>    </div> </body> </html>
Code language: HTML, XML (xml)

In the above html , we have a header that has a Flash button and a footer that has two buttons , one clicks the photo, and another switches the camera. We need to display the camera , in between these two divs.

  • Now implement the logic for the custom camera preview. The plugin provides various methods that can be used and help you enhance your user experience.
uploadCustom =  () => {    this.setState({ showPreview: true } , ()=>{    let header_height , footer_height ,preview_height ;          header_height = document.getElementsByClassName("preview_header")[0].offsetHeight;          footer_height = document.getElementsByClassName("preview_footer")[0].offsetHeight;         let body = document.body.offsetHeight          preview_height = body - (header_height + footer_height);    }    let options = {      x: 0,      y: header_height ,      width: window.screen.width ,      height: preview_height ,      camera: window.CameraPreview.CAMERA_DIRECTION.BACK,      toBack: false,      tapPhoto: false,      tapFocus: false,      previewDrag: false,      storeToFile: true,      disableExifHeaderStripping: false    };    window.CameraPreview.startCamera(options,      () => {        console.log("preview started" , options);      },      err => {        console.log("err", err);      }    );  });
Code language: JavaScript (javascript)

The above code starts the camera preview with the window.CameraPreview.startCamera() method. We’re also getting the height of the preview_header and the body, and accordingly set the x and y coordinate along with the height of the camera display.

  • We also need to toggle the flashlight.
Var flashMode = false flashOn  = () => {    // Toggle flash mode     flashMode = !flashMode;      // This callback is executed after the state is updated      let mode = flashMode        ? "on"        : "off";        window.CameraPreview.setFlashMode((mode),        () => {           console.log("Camera flash mode: " , mode);        },        (err) => { console.log("flash mode err: ", err) });    }    };
Code language: JavaScript (javascript)

In the above code, we have defined the variable flashMode, that is being toggled using a !(not) operator, and accordingly the flash mode is set.

  • Now We also want to toggle the camera from rear to front and vice versa.
switchCamera = () =>{        window.CameraPreview.switchCamera();   }
Code language: JavaScript (javascript)

  The above method will automatically switch the camera if the switch is available. 

  • Let’s Finally write the take Picture function.
takePicture = () => {    // Capture a picture    window.CameraPreview.takePicture(      { width: window.screen.width, height: 0.75 * window.screen.height,      quality: 85 },      async (fileData) => {         window.CameraPreview.stopCamera();         window.CameraPreview.hide();        let imgData = "file://" + fileData[0];        await window.resolveLocalFileSystemURL(          imgData,         async fileEntry => {          await fileEntry.file(            file => {               console.log("image file received" , file);            },          );        },          error => {            console.log("convert could not take place", error);          }        );        },        err => {          console.log("e", err);        }        );  };
Code language: JavaScript (javascript)

In the above code , we are calling the  CameraPreview.takePhoto() function which is responsible for clicking the picture. It takes 3 arguments , first being the options which include the height and width of the picture to be taken and also the quality of the picture. Next is the success callback where we are actually receiving the FilePath.

Note: Keep in mind that since we have set the storeToFile option to true , therefore , we will get an array of FilePath as a response. To get the filePath, we need to render the 0th value of the array received.

Later, we have converted the filePath into a permanent File Object using window.resolveLocalFileSystemURL, so that we can store or display the image taken. Make sure you have installed the cordova-plugin-file in order to access the resolveLocalFileSystemURL() method.

We also have called the CameraPreview.hide and CameraPreview.stop() function, so that it will stop the camera and hide the preview. You can explore other inbuilt methods included in the plugin like focusModes, zoom, color effects etc by going through the official documentation of the plugin.

  • Build and run your Cordova app.

Note: Kindly make sure that you are testing on a physical device and not on virtual devices on your laptop as it is impossible to use webcam on your VDs.

Conclusion

That was it , I hope you this blog helped you in understanding can we improve and enhance our UI by integrating customized camera Preview. In this blog, we talked about how we can create customized camera previews in our Cordova app. Combine the cordova plugin along with our custom UI components , you can match your app’s requirements. Feel free to explore and extend the given example with your own features and UI ideas.

Recent Post

  • Mastering Merge Sort: A Comprehensive Guide to Efficient Sorting

    Are you eager to enhance your coding skills by mastering one of the most efficient sorting algorithms? If so, delve into the world of merge sort in Python. Known for its powerful divide-and-conquer strategy, merge sort is indispensable for efficiently handling large datasets with precision. In this detailed guide, we’ll walk you through the complete […]

  • Optimizing Chatbot Performance: KPIs to Track Chatbot Accuracy

    In today’s digital age, chatbots have become integral to customer service, sales, and user engagement strategies. They offer quick responses, round-the-clock availability, and the ability to handle multiple users simultaneously. However, the effectiveness of a chatbot hinges on its accuracy and conversational abilities. Therefore, it is necessary to ensure your chatbot performs optimally, tracking and […]

  • Reinforcement Learning: From Q-Learning to Deep Q-Networks

    In the ever-evolving field of artificial intelligence (AI), Reinforcement Learning (RL) stands as a pioneering technique enabling agents (entities or software algorithms) to learn from interactions with an environment. Unlike traditional machine learning methods reliant on labeled datasets, RL focuses on an agent’s ability to make decisions through trial and error, aiming to optimize its […]

  • Understanding AI Predictions with LIME and SHAP- Explainable AI Techniques

    As artificial intelligence (AI) systems become increasingly complex and pervasive in decision-making processes, the need for explainability and interpretability in AI models has grown significantly. This blog provides a comprehensive review of two prominent techniques for explainable AI: Local Interpretable Model-agnostic Explanations (LIME) and Shapley Additive Explanations (SHAP). These techniques enhance transparency and accountability by […]

  • Building and Deploying a Custom Machine Learning Model: A Comprehensive Guide

    Machine Learning models are algorithms or computational models that act as powerful tools. Simply put, a Machine Learning model is used to automate repetitive tasks, identify patterns, and derive actionable insights from large datasets. Due to these hyper-advanced capabilities of Machine Learning models, it has been widely adopted by industries such as finance and healthcare.  […]

  • Mastering Conversational UX: Best Practices for AI-Driven Chatbots

    In today’s digital landscape, where customer engagement reigns supreme, traditional marketing strategies are giving way to more interactive and personalized approaches. The rise of conversational interfaces, often powered by Artificial Intelligence (AI) and Natural Language Processing (NLP), has transformed how businesses interact with their audiences. Whether through AI-driven chatbots on websites, virtual assistants on mobile […]

Click to Copy