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 Software Testing Strategies: Your Guide

    Implementing best software testing strategies is a crucial part of software development, ensuring that digital products meet industry standards. Defined by the International Software Testing Qualification Board, it encompasses a range of activities, both static and dynamic, throughout the software’s lifecycle. As an essential component of the Software Development Life Cycle (SDLC), the Software Testing […]

  • Your Complete Guide to Securing Your Kubernetes Cluster: Essential Tips for Beginners

    In today’s digital landscape, Kubernetes has emerged as the go-to solution for managing applications at scale. However, amidst its power lies a crucial concern: security. Ensuring the safety of your Kubernetes cluster is paramount to protecting your applications, data, and infrastructure. This comprehensive guide will walk you through essential practices and tips to help you […]

  • How to use Cloudinary in Node.js to upload images?

    It’s simple to use Cloudinary to upload images in a Nodе.js application, which can improve your app’s imagе management capabilities. Wе’ll go over how to sеt up and incorporate Cloudinary in your Nodе.js application for imagе uploads and how to use Cloudinary nodejs in this blog article. What is Cloudinary? Cloudinary is a cloud-based media […]

  • Mobile App User Experience- 10 Biggest Mistakes First-Time Founders Make 

    With the mobile app industry hitting a whopping 206 Billion in value (as per Grand View Research), it is no wonder more entrepreneurs are jumping into the mobile app market with their innovative ideas and life-changing solutions. But for those taking their first plunge, it is crucial to understand that creating an app isn’t just […]

  • Building Draggable Components in React

    As user interaction becomes more prevalent in today’s applications, sometimes it’s nice to use draggable elements in your apps. Consider website builders like Trello or Wix. They have drag-and-drop features that make it easy and convenient for users. Hello everyone! In this article, I will show some simple ways to create draggable components in React […]

  • How to Fetch Data from an API with JavaScript?

    In web development, integrating data from external sources is a common task. Application Programming Interfaces (APIs) play an important function in changing data amongst systems. In this blog, we’ll explore the way to Get information from an API with the use of JavaScript, supplying step-by-step the resource of-step commands with complete code examples of how […]