Safecam360 Viewer

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

Installation

1. Direct import

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

<script src=<JS_BUNDLEFILE_PATH> />

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

Quick Start

<safecam-360-viewer 
    interior360={[]}
    exterior360={[]}
    enableHotspots = {true} />

Props

Property	Type	Default	Required	Description
interior360	array	[]	yes	An array of objects defining data for the interior360 type. See object definition here.
exterior360	array	[]	yes	An array of objects defining data for the exterior360 type. See object definition here
toggleFullscreen	boolean	false	no	A boolean to toggle fullscreen mode
enableHotspots	boolean	false	no	A boolean to toggle hotspots

interior360

Property	Type	Default	Required	Description
spinTitle	string	undefined	no	Title of spin
interior360Type	string	equirectangular	no	Type of interior 360 (equirectangular or cubemap)
imageSource	array	[]	yes	Image URLs
hotspotImages	array	undefined	yes	Description of each hotspot image. See object definition here
hotspots	array	[]	no	Hotspot data for internal hotspots

exterior360

Property	Type	Default	Required	Description
spinTitle	string	undefined	no	Title of spin
imageSource	array	undefined	yes	An array of image sources
highResImages	array	undefined	no	An array of high resolution image sources (for zoom)
hotspotImages	array	undefined	yes	Description of each hotspot image. See object definition here
frames	number	undefined	yes	Total number of images needed for external 360
index	number	1	yes	Index of first image needed for external 360
hotspots	array	[]	yes	Hotspot data for external hotspots

External Hotspot

Property	Type	Default	Required	Description
id	string	undefined	no	A unique identifier for the hotspot
frameId	number	undefined	yes	The frame number in which the hotspot is to be displayed
x	string	undefined	yes	x-coordinate of the hotspot in the frame
y	string	undefined	yes	y-coordinate of the hotspot in the frame
hotspotRefId	string	undefined	yes	Reference ID or tag for the hotspot
description	string	undefined	no	Description for the hotspot
triggerFrame	number	undefined	yes	The final frame that needs to be triggered once the hotspot is selected

Interior Hotspot

Property	Type	Default	Required	Description
pitch	number	undefined	yes	The pitch value of where the hotspot should be present in the 360 view
yaw	number	undefined	yes	The yaw value of where the hotspot should be present in the 360 view
hotspotRefId	string	undefined	yes	Reference ID or tag for the hotspot
description	string	undefined	no	Description of the hotspot
triggerFrame	object	undefined	yes	The final point that needs to be triggered once the hotspot is selected

Hotspot Image

Property	Type	Default	Required	Description
hotspotRefId	string	undefined	yes	Reference ID or tag for the hotspot
imageSrc	string	undefined	yes	URL of the image source

Example

<safecam-360-viewer 
interior360={JSON.stringify([{
    spinTitle: "Interior 360"
    interior360Type: "equirectangular",
    imageSource: [ "https://images.s3.ap-south-1.amazonaws.com/safecam360/mt27xq/hd/interior_360/pz.jpg" ],
    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://images.s3.ap-south-1.amazonaws.com/safecam360/mt27xq/hd/exterior/1.jpg", ... ],
    highResImages: [ "https://highres-images.s3.ap-south-1.amazonaws.com/safecam360/mt27xq/hd/exterior/1.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://"
      },
      ...
    ]

  }])}
enableHotspots = {true} />

Troubleshooting

If you run into any problems, send us an email at infinity@s20.ai and we'll be happy to help you out!