Safecam360 React JS SDK

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

Installation

Add the following inside your index.html file inside the root directory of your React app

<script src=<JS_BUNDLEFILE_PATH> />

Production SDK url - https://staging.s20.ai/safecam360/safecam360-viewer-web_sdk-0.1.0/Safecam360Viewer.js (this can be set as the src attribute above)

Quick Start

<safecam-360-viewer
  interior360="{[]}"
  exterior360="{[]}"
  galleryData="{[]}"
  initialTour="{}"
  interiorConfig="{}"
  hotspotConfig="{}"
  otherConfig="{}"
></safecam-360-viewer>

Extra Props

Property	Type	Default	Required	Description
galleryData	array	undefined	No	An array of objects defining data for the gallery. See object definition here
hotspotIcon	string	undefined	No	A URL string specifying an icon for hotspots. Major image formats and SVGs are supported.
initialTour	object	undefined	No	An object to configure the tour with messaging for orientation changes, exterior and interior rotations, zooming, and exterior zooming.
otherConfig	object	undefined	No	An object that defines additional configuration settings for the SDK
interiorConfig	object	undefined	No	An object that defines additional configuration settings for the interior view
hotspotConfig	object	undefined	No	This object allows customization of hotspot size and toggle button text for displaying defects and features

galleryData

Property	Type	Default	Required	Description
title	string	undefined	Yes	Title/caption for the image
imageSource	string	undefined	Yes	URL string for the image

initialTour

Property	Type	Default	Required	Description
orientationChangeMessage	boolean	true	No	Indicates whether the orientation change message is enabled or disabled in the initial tour.
exteriorRotateMessage	boolean	true	No	Indicates whether the exterior rotate message is enabled or disabled in the initial tour.
interiorRotateMessage	boolean	true	No	Indicates whether the interior rotate message is enabled or disabled in the initial tour.
zoomMessage	boolean	true	No	Indicates whether the zoom message is enabled or disabled in the initial tour.
exteriorZoomMessage	boolean	true	No	Indicates whether the exterior zoom message is enabled or disabled in the initial tour.
interiorZoomMessage	boolean	true	No	Indicates whether the interior zoom message is enabled or disabled in the initial tour.

otherConfig

Property	Type	Default	Required	Description
minHFOV	number	90	No	The minimum horizontal field of view (in degrees) for the interior view.
initialHFOV	number	120	No	The initial horizontal field of view (in degrees) for the interior view.
maxHFOV	number	150	No	The maximum horizontal field of view (in degrees) for the interior view.

hotspotConfig

Property	Type	Default	Required	Description
size	string	medium	No	The size of the hotspots (e.g., small, medium, large).
hotspotToggleButtonText	string	Defects and Features	No	The text displayed on the hotspot toggle button.

otherConfig

Property	Type	Default	Required	Description
defaultView	string	exterior	No	Specifies the default view for the object.
hideGalleryButton	boolean	true	No	Indicates whether the gallery button is hidden.
enableGallery	boolean	false	No	Enables or disables the gallery.
openDoorView	boolean	false	No	Indicates whether the open door view is enabled.
showRotateButton	boolean	false	No	Indicates whether the rotate button is shown.
gyroMode	boolean	false	No	Enables or disables gyro mode.
viewSwitchInCarouselMode	boolean	false	No	Enables or disables view switch in carousel mode.
hotspotCardsLooping	boolean	true	No	Indicates whether the hotspot cards loop.

Example

<safecam-360-viewer
    interior360={JSON.stringify([{
    spinTitle: "Interior 360"
    interior360Type: "equirectangular",
    imageSource: [ "https://safecam360-mobile-images.s3.ap-south-1.amazonaws.com/demo/interior360_demo.jpeg" ],
    hotspotImages: [
    {
      hotspotRefId: "internal-hotpsot-steering"
      imageSrc: "https://"
    },
    {
      hotspotRefId: "internal-hotpsot-infotainment-system"
      imageSrc: "https://"
    }
  ]
    hotspots: [
    {
      pitch: 4.140852751630522,
      yaw: 23.544021973218946,
      hotspotRefId: "internal-hotpsot-steering",
      triggerFrame: {
        pitch: -6.5250622571992025,
        yaw: -24.67466498175444
      }.
      description: "Sample description"
    },
    {
      pitch: -6.032111892702112,
      yaw: -1.552639896791029,
      hotspotRefId: "internal-hotpsot-infotainment-system"
      triggerFrame: {
        pitch: -6.5250622571992025,
        yaw: -24.67466498175444
      },
      description: "Sample description",
      imageSrc: "https://"
    }
  ]
  }])}
exterior360 = {JSON.stringify([{
    spinTitle: "Close door spin"
    imageSource: [ "https://safecam360-mobile-images.s3.ap-south-1.amazonaws.com/demo/spin/hd/img_01.jpg", ... ],
    highResImages: [ "https://safecam360-mobile-images.s3.ap-south-1.amazonaws.com/demo/spin/high_res/img_01.jpg", ... ],
    frames: 54,
    index: 1,
    hotspotImages:[
      {
        hotspotRefId: "headlight-hotspot"
        imageSrc: "https://"
      },
      {
        hotspotRefId: "orvm-left-hotspot"
        imageSrc: "https://"
      }
    ]
    hotspots:[
      {
        frameId: 1,
        x: 23.4,
        y: 44.5,
        triggerFrame: 6,
        description: "Sample description",
        hotspotRefId: "headlight-hotspot"
      },
      {
        frameId: 1,
        x: 23.4,
        y: 44.5,
        triggerFrame: 7,
        description: "Sample description",
        hotspotRefId: "orvm-left-hotspot",
        imageSrc: "https://"
      },
      ...
    ]
    galleryData: [
       {
          title: "Front View",
          imageSource: "https://safecam360-mobile-images.s3.ap-south-1.amazonaws.com/TEST1935/slot/car0368_0.jpeg",
       },
       {
          title: "45˚ Left Front View",
          imageSource: "https://safecam360-mobile-images.s3.ap-south-1.amazonaws.com/TEST1935/slot/car0368_13.jpeg",
       }
    ]
  }])}
/>