@monkvision/inspection-capture-web v5.0.21

@monkvision/inspection-capture-web

This package provides utils, tools and ready-to-use components used to capture pictures needed to run Monk inspections. There are two main workflows for capturing pictures of a vehicle for a Monk inspection :

• The PhotoCapture workflow : the user is shown a certain set of car wireframes, called Sights, and they are asked to take pictures of the vehicle by aligning the vehicle with the Sight overlays.
• The VideoCapture workflow : the user is asked to record a quick video of their vehicle by filming it and rotating in a full circle around it.
• The DamageDisclosure workflow : The user is guided to capture close-up pictures of specific damaged parts of the vehicle. There are 2 workflows available:
  • Part-selection: Before taking the picture, the user must first select the damaged part on the vehicle wireframe then a close-up picture of the damage.
  • Two-shot: The user is asked to take, first a wide picture of the vehicle, then a close-up picture of the damage.

Installing

To install the package, you can run the following command :

yarn add @monkvision/inspection-capture-web

If you are using TypeScript, this package comes with its type definitions integrated, so you don't need to install anything else!

PhotoCapture

The PhotoCapture workflow is aimed at guiding users in taking pictures of their vehicle in order to add them to a Monk inspection. The user is shown a set of car wireframes, which we call Sights and that are available in the @monkvision/sights package. These Sights act as guides, and the user is asked to take pictures of their vehicle by aligning it with the Sights.

Please refer to the official MonkJs documentation to have a detailed overview of the Photo Capture workflow.

PhotoCapture component

This package exports a ready-to-use single-page component called PhotoCapture that implements the PhotoCapture workflow. In order to use it, simply create a new page in your application containing just this component. You will then need to generate a Monk authentication token (using Auth0), and create a new inspection, in which all tasks statuses are set to NOT_STARTED (so that we can add images to them later). You can then pass the api config (with the auth token), the inspection ID, as well as a list of Sights (to display to the user) to the PhotoCapture component. Once the user has completed the capture workflow, the onComplete callback will be called, and you will then be able to navigate to another page. The complete list of configuration props for this component is available at the end of this section.

import { sights } from '@monkvision/sights';
import { PhotoCapture } from '@monkvision/inspection-capture-web';

const PHOTO_CAPTURE_SIGHTS = [
  sights['fesc20-0mJeXBDf'],
  sights['fesc20-26n47kaO'],
  sights['fesc20-2bLRuhEQ'],
  sights['fesc20-4Wqx52oU'],
  sights['fesc20-Tlu3sz8A'],
];

const apiDomain = 'api.preview.monk.ai/v1';

export function MonkPhotoCapturePage({ authToken }) {
  return (
    <PhotoCapture
      inspectionId={inspectionId}
      apiConfig={{ apiDomain, authToken }}
      sights={PHOTO_CAPTURE_SIGHTS}
      onComplete={() => { /* Navigate to another page */ }}
    />
  );
}

VideoCapture

The VideoCapture workflow is aimed at asking users to record a walkaround video of their vehicle (around ~1min per video) to send vehicle inspection pictures to the Monk API. In reality, no video is being recorded. Instead, screenshots of the camera stream a repeatidly taken while the users walks around their vehicle. An algorithm is run to select the best video frames (the less blurry ones), and they are then sent to the Monk API.

Please refer to the official MonkJs documentation to have a detailed overview of the Video Capture workflow.

VideoCapture component

This package exports a ready-to-use single-page component called VideoCapture that implements the VideoCapture workflow. The implementation for it is extremely similar to the PhotoCapture component described above. The only difference being the configuration options that differ, as well as the fact that you need to pass certain parameters when creating your inspection to ake sure it will be able to receive video frames as inputs (if you are creating your inspection using the createInspection requests of the MonkJs SDK, you can simply set the isVideoCapture option to true).

import { sights } from '@monkvision/sights';
import { VideoCapture } from '@monkvision/inspection-capture-web';

const apiDomain = 'api.preview.monk.ai/v1';

export function MonkVideoCapturePage({ authToken }) {
  return (
    <VideoCapture
      inspectionId={inspectionId}
      apiConfig={{ apiDomain, authToken }}
      onComplete={() => { /* Navigate to another page */ }}
    />
  );
}

Props

DamageDisclosure

The DamageDisclosure workflow is designed to guide users in documenting and disclosing damage to their vehicles during a Monk inspection. This workflow is ideal for capturing detailed images of specific damages such as dents, scratches, or other issues that need to be highlighted in the inspection report. There are 2 workflows available.

Please refer to the official MonkJs documentation for a comprehensive overview of the Add damage workflow.

DamageDisclosure component

This package exports a ready-to-use single-page component called DamageDisclosure that implements the DamageDisclosure workflow. You can integrate it into your application by creating a new page containing only this component. Before using it, you must generate an Auth0 authentication token and create a new inspection using the Monk API. Ensure that all task statuses in the inspection are set to NOT_STARTED.

You can then pass the inspection ID, API configuration (including the auth token). Once the user completes the workflow, the onComplete callback is triggered, allowing you to navigate to another page or perform additional actions.

The following example demonstrates how to use the DamageDisclosure component:

import { DamageDisclosure } from '@monkvision/inspection-capture-web';

const apiDomain = 'api.preview.monk.ai/v1';

export function MonkDamageDisclosurePage({ authToken }) {
  return (
    <DamageDisclosure
      inspectionId={inspectionId}
      apiConfig={{ apiDomain, authToken }}
      onComplete={() => { /* Navigate to another page */ }}
    />
  );
}

Props