Capture React Native SDK

Captures 360° interior and exterior views of a product with hotspots.

Installation

1. NPM Installation

npm install @s20.ai/capture-sdk

Dependencies

Extra dependencies need to be installed via npm install @react-native-camera-roll/camera-roll @react-native-community/slider react-native-camera react-native-fs react-native-orientation-locker react-native-vector-icons react-native-video react-native-vision-camera react-native-async-storage deprecated-react-native-prop-types

iOS dependencies need to be installed via pod install

Example

import { SafecamCapture } from "@s20.ai/capture-sdk";

const MySafecamCapture = () => {
  return (
    <SafecamCapture
      productID={"12345"}
      sop={{
        steps: [
          {
            slots: [
              {
                action: {
                  captureType: "Video",
                  title: "image-capture",
                  sourceType: "DeviceCamera",
                },
                key: "exterior-360",
                postprocessingServices: [
                  {
                    service_id: "image_extraction",
                  },
                ],
                title: "Closed Door Spin",
              },
              {
                slotItems: [
                  {
                    title: "Slot-item-1",
                    availableActions: [
                      {
                        captureType: "Image",
                        title: "image-capture-2",
                        sourceType: "DeviceCamera",
                      },
                    ],
                  },
                  {
                    title: "Slot-item-2",
                    availableActions: [
                      {
                        captureType: "Image",
                        title: "image-capture-2",
                        sourceType: "DeviceCamera",
                      },
                    ],
                  },
                ],
                postprocessingServices: [
                  {
                    service_id: "image_extraction",
                  },
                ],
                title: "Open Door Spin",
              },
            ],
            title: "Spin",
          },
          {
            slots: [
              {
                action: {
                  captureType: "Image",
                  title: "exterior-spin-1",
                  sourceType: "DeviceCamera",
                },
                title: "Engine Bonnet View",
              },
              {
                action: {
                  captureType: "Image",
                  title: "exterior-spin-2",
                  sourceType: "DeviceCamera",
                },

                title: "Boot Inside View",
              },
              {
                action: {
                  captureType: "Image",
                  title: "exterior-spin-3",
                  sourceType: "DeviceCamera",
                },

                title: "Roof-Sunroof",
              },
              {
                action: {
                  captureType: "Image",
                  title: "exterior-spin-4",
                  sourceType: "DeviceCamera",
                },

                title: "Infotainment System",
              },
              {
                action: {
                  guide: true,
                  captureType: "Image",
                  title: "exterior-spin-5",
                  sourceType: "DeviceCamera",
                },

                title: "Left Side View",
              },
            ],
            title: "Exterior Manual",
          },
        ],
        title: "SOP Sample",
      }}
    />
  );
};

export default MySafecamCapture;

Props

Main Props

Property	Type	Default	Required	Description
productID	string	undefined	Yes	A unique identifier denoting the current product
sop	SOP	undefined	Yes	SOP definition

SOP

Property	Type	Default	Required	Description
title	string	undefined	Yes	The title denoting the SOP
steps	Step[]	undefined	Yes	Array of step definitions

Step

Property	Type	Default	Required	Description
title	string	undefined	Yes	The title of the step
slots	Slot[]	undefined	Yes	The slots present in each step

Slot

Property	Type	Default	Required	Description
title	string	undefined	Yes	The title of the slot
action	Action	undefined	Yes	The Action to be executed on the slot
key	string	undefined	Yes	Defines the type of action (for the viewer & gallery)
postprocessingServices	ServiceAction[]	undefined	no	A list of post processing services
slotItems	SlotItem[]	undefined	no	A list sequential actions to be executed on a slot (NOTE: slotItems take precedence in providing action to a slot)

SlotItem

Property	Type	Default	Required	Description
title	string	undefined	Yes	The title of the slotItem
availableActions	Action[]	undefined	Yes	The available actions (limited to 1 for now) on a particular slotItem

ServiceAction

Property	Type	Default	Required	Description
service_id	string	undefined	Yes	A unique identifier denoting the service

Action

Property	Type	Default	Required	Description
vision	boolean	false	no	Flag to use vision camera
guide	boolean	false	no	Flag to use static image guide on camera preview
title	string	undefined	Yes	The title of the action
captureType	string	undefined	Yes	The type of capture. Supported values "Image" / "Video"
sourceType	string	undefined	Yes	The source of the capture. Supported values "DeviceCamera" / "IPCamera" / "Ricoh"