SDK

Standard SDK and Interactive (360°) SDK.

Two packages

	Standard SDK	Interactive SDK
Package	`@outerview/sdk`	`@outerview/sdk-360`
Runs	Server	Browser
Does	Calls the Stream API	Plays 360° results
Needs	API key	A video_url from an interactive result (Pro or Scale)

bash

npm install @outerview/sdk @outerview/sdk-360

Standard SDK: @outerview/sdk

A JavaScript client for the Stream API. Use it on the server and keep your key there.

JavaScript

import { createOuterviewClient } from "@outerview/sdk";

const outerview = createOuterviewClient({
  apiKey: process.env.OUTERVIEW_API_KEY,
});

const result = await outerview.stream({
  query: "street trees in Toronto",
  position: {
    points: [
      { latitude: 43.6532, longitude: -79.3832 },
      { latitude: 43.6629, longitude: -79.3957 },
    ],
  },
  year: 2026,
  limit: 50,
});

for (const feature of result.data.geojson.features) {
  console.log(feature.properties.feature_name, feature.geometry.coordinates);
}

stream() accepts the same parameters as the Stream API and returns the same response.

Client options

Option	Description
`apiKey`	Required. Your Outerview API key
`baseUrl`	Optional. Compatible development endpoint. Defaults to https://api.outerview.ai
`fetch`	Optional. Custom fetch implementation

Errors. Failed requests throw OuterviewApiError with the HTTP status and the parsed response body.

JavaScript

import { OuterviewApiError } from "@outerview/sdk";

try {
  await outerview.stream({ query: "bike lanes", limit: 50 });
} catch (error) {
  if (error instanceof OuterviewApiError) {
    console.error(error.status, error.body);
  }
}

Interactive SDK: @outerview/sdk-360

Turns an interactive result into a draggable 360° player in your web product.

1. On your server, request interactive-only results. interactive() always sends interactive: true, so you never receive flat-only results.

JavaScript

const result = await outerview.interactive({
  query: "walkable waterfront paths in Chicago",
  limit: 50,
});

const videoUrl = result.data.geojson.features[0].properties.video_url;
// Send videoUrl to your client.

Without the Standard SDK, interactiveSearchInput({ query, limit }) from @outerview/sdk-360 returns your input with interactive: true added.

2. In the browser, mount the player. Give the container an explicit height; the player fills it.

html

<div id="outerview-360" style="height: 480px; border-radius: 16px"></div>

JavaScript

import { create360Player } from "@outerview/sdk-360";

const player = await create360Player({
  container: "#outerview-360",
  videoUrl,
  autoplay: true,
  muted: true,
  loop: true,
  onLoad: () => console.log("ready"),
  onError: (error) => console.error(error),
});

Player options

Option	Default	Description
`container`	required	Element or CSS selector to mount into
`videoUrl`	required	CORS-readable equirectangular video URL
`autoplay`	true	Start playback after the first decoded frame
`muted`	true	Mute playback (needed for browser autoplay)
`loop`	true	Loop playback
`onLoad`	none	Called when the panorama is ready
`onError`	none	Called with any renderer or media error

Player methods

Method	Description
`play()`	Start playback
`pause()`	Pause playback
`destroy()`	Release the player. Call it when your component unmounts or the capture changes

Good to know

Users drag to look around the full sphere and can zoom with the built-in controls.

The player loads the Pannellum renderer from a CDN at runtime.

video_url needs a Pro or Scale key, and the video host must allow CORS.

Non-interactive results (interactive: false) are flat media. Show their image_url, or play video_url in your own <video> element.

SDK

Standard SDK and Interactive (360°) SDK.

Two packages

	Standard SDK	Interactive SDK
Package	`@outerview/sdk`	`@outerview/sdk-360`
Runs	Server	Browser
Does	Calls the Stream API	Plays 360° results
Needs	API key	A video_url from an interactive result (Pro or Scale)

bash

npm install @outerview/sdk @outerview/sdk-360

Standard SDK: @outerview/sdk

A JavaScript client for the Stream API. Use it on the server and keep your key there.

JavaScript

import { createOuterviewClient } from "@outerview/sdk";

const outerview = createOuterviewClient({
  apiKey: process.env.OUTERVIEW_API_KEY,
});

const result = await outerview.stream({
  query: "street trees in Toronto",
  position: {
    points: [
      { latitude: 43.6532, longitude: -79.3832 },
      { latitude: 43.6629, longitude: -79.3957 },
    ],
  },
  year: 2026,
  limit: 50,
});

for (const feature of result.data.geojson.features) {
  console.log(feature.properties.feature_name, feature.geometry.coordinates);
}

stream() accepts the same parameters as the Stream API and returns the same response.

Client options

Option	Description
`apiKey`	Required. Your Outerview API key
`baseUrl`	Optional. Compatible development endpoint. Defaults to https://api.outerview.ai
`fetch`	Optional. Custom fetch implementation

Errors. Failed requests throw OuterviewApiError with the HTTP status and the parsed response body.

JavaScript

import { OuterviewApiError } from "@outerview/sdk";

try {
  await outerview.stream({ query: "bike lanes", limit: 50 });
} catch (error) {
  if (error instanceof OuterviewApiError) {
    console.error(error.status, error.body);
  }
}

Interactive SDK: @outerview/sdk-360

Turns an interactive result into a draggable 360° player in your web product.

1. On your server, request interactive-only results. interactive() always sends interactive: true, so you never receive flat-only results.

JavaScript

const result = await outerview.interactive({
  query: "walkable waterfront paths in Chicago",
  limit: 50,
});

const videoUrl = result.data.geojson.features[0].properties.video_url;
// Send videoUrl to your client.

Without the Standard SDK, interactiveSearchInput({ query, limit }) from @outerview/sdk-360 returns your input with interactive: true added.

2. In the browser, mount the player. Give the container an explicit height; the player fills it.

html

<div id="outerview-360" style="height: 480px; border-radius: 16px"></div>

JavaScript

import { create360Player } from "@outerview/sdk-360";

const player = await create360Player({
  container: "#outerview-360",
  videoUrl,
  autoplay: true,
  muted: true,
  loop: true,
  onLoad: () => console.log("ready"),
  onError: (error) => console.error(error),
});

Player options

Option	Default	Description
`container`	required	Element or CSS selector to mount into
`videoUrl`	required	CORS-readable equirectangular video URL
`autoplay`	true	Start playback after the first decoded frame
`muted`	true	Mute playback (needed for browser autoplay)
`loop`	true	Loop playback
`onLoad`	none	Called when the panorama is ready
`onError`	none	Called with any renderer or media error

Player methods

Method	Description
`play()`	Start playback
`pause()`	Pause playback
`destroy()`	Release the player. Call it when your component unmounts or the capture changes

Good to know

Users drag to look around the full sphere and can zoom with the built-in controls.

The player loads the Pannellum renderer from a CDN at runtime.

video_url needs a Pro or Scale key, and the video host must allow CORS.

Non-interactive results (interactive: false) are flat media. Show their image_url, or play video_url in your own <video> element.