@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.

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 wofklow 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 */ }}
    />
  );
}

| Prop | Type | Description | Required | Default Value | |------------------------------------|----------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------|----------------------------------------------| | sights | Sight[] | The list of Sights to take pictures of. The values in this array should be retreived from the @monkvision/sights package. | ✔️ | | | inspectionId | string | The ID of the inspection to add images to. Make sure that the user that created the inspection if the same one as the one described in the auth token in the apiConfig prop. | ✔️ | | | apiConfig | ApiConfig | The api config used to communicate with the API. Make sure that the user described in the auth token is the same one as the one that created the inspection provided in the inspectionId prop. | ✔️ | | | onClose | () => void | Callback called when the user clicks on the Close button. If this callback is not provided, the button will not be displayed on the screen. | | | | onComplete | () => void | Callback called when inspection capture is complete. | | | | onPictureTaken | (picture: MonkPicture) => void | Callback called when the user has taken a picture in the Capture process. | | | | lang | string | null | The language to be used by this component. | | 'en' | | enforceOrientation | DeviceOrientation | Use this prop to enforce a specific device orientation for the Camera screen. | | | | maxUploadDurationWarning | number | Max upload duration in milliseconds before showing a bad connection warning to the user. Use -1 to never display the warning. | | 15000 | | useAdaptiveImageQuality | boolean | Boolean indicating if the image quality should be downgraded automatically in case of low connection. | | true | | showCloseButton | boolean | Indicates if the close button should be displayed in the HUD on top of the Camera preview. | | false | | startTasksOnComplete | <code>boolean &#124; TaskName[]</code> | Value indicating if tasks should be started at the end of the inspection. See the inspection-capture-web package doc for more info. | | true | | additionalTasks | TaskName[] | An optional list of additional tasks to run on every Sight of the inspection. | | | | tasksBySight | Record<string, TaskName[]> | Record associating each sight with a list of tasks to execute for it. If not provided, the default tasks of the sight will be used. | | | | format | CompressionFormat | The output format of the compression. | | CompressionFormat.JPEG | | quality | number | Value indicating image quality for the compression output. | | 0.6 | | resolution | CameraResolution | Indicates the resolution of the pictures taken by the Camera. | | CameraResolution.UHD_4K | | allowImageUpscaling | boolean | Allow images to be scaled up if the device does not support the specified resolution in the resolution prop. | | false | | allowSkipRetake | boolean | If compliance is enabled, this prop indicate if the user is allowed to skip the retaking process if some pictures are not compliant. | | false | | enableCompliance | boolean | Indicates if compliance checks should be enabled or not. | | true | | enableCompliancePerSight | string[] | Array of Sight IDs that indicates for which sight IDs the compliance should be enabled. | | | | complianceIssues | ComplianceIssue[] | If compliance checks are enabled, this property can be used to select a list of compliance issues to check. | | DEFAULT_COMPLIANCE_ISSUES | | complianceIssuesPerSight | Record<string, ComplianceIssue[]> | A map associating Sight IDs to a list of compliance issues to check. | | | | useLiveCompliance | boolean | Indicates if live compliance should be enabled or not. | | false | | customComplianceThresholds | CustomComplianceThresholds | Custom thresholds that can be used to modify the strictness of the compliance for certain compliance issues. | | | | customComplianceThresholdsPerSight | Record<string, CustomComplianceThresholds> | A map associating Sight IDs to custom compliance thresholds. | | | | validateButtonLabel | string | Custom label for validate button in gallery view. | | | | enableSightGuideline | boolean | Boolean indicating whether the sight guideline feature is enabled. If disabled, the guideline text will be hidden. | | true | | sightGuidelines | sightGuideline[] | A collection of sight guidelines in different language with a list of sightIds associate to it. | | | | enableTutorial | PhotoCaptureTutorialOption | Options for displaying the photo capture tutorial. | | PhotoCaptureTutorialOption.FIRST_TIME_ONLY | | allowSkipTutorial | boolean | Boolean indicating if the user can skip the PhotoCapture tutorial. | | true | | thumbnailDomain | string | The API domain used to communicate with the resize micro service. | ✔️ | |