How to Take Photo?

In this tutorial, you will learn how to take photo,download captured photo,share captured photo via native apps in mobile devices,discard take photo screen.

Step 1: Installation

To begin, you need to install the take photo webar module from the collection of our modules. You can install them using npm.

npm install @mirrar-sdm/take-photo-webar

Step 2: Take photo with timer

If you want to take photo with a timer display you can do that by using the following code.

import TakePhotoService from '@mirrar-sdm/take-photo-webar'
 
const [showTimer, setShowTimer] = useState(false)
const [timeLeft, setTimeLeft] = useState(3)
 
const handleTakePhoto = () => {
    TakePhotoService.takePhoto(timeLeft, setTimeLeft, setShowTimer, takePhotoCallbackFunction)
}
 
const takePhotoCallbackFunction = ()=>{
    //get the canvas based on mode i.e camera mode or gallery mode
    const canvas = currentMode === 'camera' 
    ? document.getElementById('cameraGeneratedCanvas') 
    : document.getElementById('modelBackgroundCanvas');
    
  const canvasContainerID = currentMode === 'camera' 
    ? 'camera-container' 
    : 'modelBackgroundContainer';
    
    //get the parent container which contains the canvas
  const parentElement = document.getElementById(canvasContainerID);
 
  //get facemask canvas
  const faceMaskCanvas = document.getElementById('faceMaskCanvas');
 
  //get brand logo image
  const brandLogo = document.getElementById('brand-logo');
  
  TakePhotoService.createCapturedCanvas(canvas, parentElement, faceMaskCanvas, brandLogo);
}

Step 3: Take photo without timer

If you want to take photo use the following code.

import TakePhotoService from '@mirrar-sdm/take-photo-webar'
 
const takePhoto = ()=>{
   //get the canvas based on mode i.e camera mode or gallery mode
   const canvas = currentMode === 'camera' 
    ? document.getElementById('cameraGeneratedCanvas') 
    : document.getElementById('modelBackgroundCanvas');
    
  const canvasContainerID = currentMode === 'camera' 
    ? 'camera-container' 
    : 'modelBackgroundContainer';
    
    //get the parent container which contains the canvas
  const parentElement = document.getElementById(canvasContainerID);
 
  //get facemask canvas
  const faceMaskCanvas = document.getElementById('faceMaskCanvas');
 
  //get brand logo image
  const brandLogo = document.getElementById('brand-logo');
  
  TakePhotoService.createCapturedCanvas(canvas, parentElement, faceMaskCanvas, brandLogo);
}

Step 4: Download captured image

If you want to download the captured image use the following code.

import TakePhotoService from '@mirrar-sdm/take-photo-webar'
 
const handleDownload = async () => {
    try {
      await TakePhotoService.downloadCapturedPhoto()
    } catch (error) {
      console.log(error)
    }
}

Step 5: Share captured image via native apps on mobile devices

If you want to share the captured image on native apps like whatsapp,instagram,gmail etc. use the following code.

import TakePhotoService from '@mirrar-sdm/take-photo-webar'
 
const handleShare = async () => {
    try {
      TakePhotoService.shareCapturedPhotoViaNativeApps()
    } catch (error) {
      console.log(error)
    }
}

Step 6: Discard take photo screen

If you want leave take photo screen use the following code.

import TakePhotoService from '@mirrar-sdm/take-photo-webar'
 
const handleRetake = () => {
    TakePhotoService.handleRetake()
}

Switch between Hand and Face Tracking Web Modules - Github