Step by step integration


Install the Retinad package in by running npm install retinad or by downloading it from Github and adding it to the dependencies of the web project.


In the head of the main .html file of the project, include the retinad script.

<script src="node_modules/retinad/dist/retinad.js"></script>

Copy the App ID and Account Key that has been sent by Retinad for the next step: Connection.

Don't have an App ID or Account Key? Send a quick email to

How to use


A retinad variable is available with a whole set of functions.

  1. Connect: (Mandatory first step)
    • retinad.connect({appId: RETINAD_APP_ID, accountKey: RETINAD_ACCOUNT_KEY})
    • RETINAD_APP_ID and RETINAD_ACCOUNT_KEY are the App ID and the Account Key that has been sent by email.
  2. Set context name: (Mandatory step)
    • retinad.setContextName(name)
    • Usually, name would correspond to the name of the video file, or a unique name to identify it easily.
    • Call this function at the start of all videos. Don't forget to call this function at the beginning of the session as well.
  3. Play: (Mandatory step)
    •{u: currentU, v: currentV}, currentTime)
    • currentU and currentV are the coordinates of the current camera position, in the UV coordinates system. Please see Coordinates section for more details.
    • currentTime corresponds to the playback time in seconds.
    • Call this function when a video begins to play -- this includes when the user presses play or when a video auto-plays.
  4. Collect data: (Must be called at each frame)
    • retinad.collectData({u: currentU, v: currentV}, currentTime)
  5. Pause:
    • retinad.pause({u: currentU, v: currentV}, currentTime)
    • Call this function when a video is paused.
  6. Stop: (Must be called at the very end of the session)
    • retinad.stop({u: currentU, v: currentV}, currentTime)

The orientation of the camera needs to be transposed to a UV format (Mercator Projection).
Right now, only one public conversion function is available : retinad_convertVector3ToUV({x: vectorX, y: vectorY, z: vectorZ}).
It assumes that the Vector3 is in the right-handed coordinates system.