An embeddable equirectangular video player for Outerview. It turns an Outerview interactive capture into an immersive, draggable browser view so developers can add a real-world experience to any web product.

Website: outerview.ai
Documentation: outerview.ai/docs
Interactive SDK guide: outerview.ai/docs/sdk

Install

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

The player loads Pannellum in the browser and needs a CORS-readable, equirectangular video URL. Use a Pro or Scale Outerview key for video access.

Stream and mount an interactive view

Use interactiveSearchInput() with the Outerview SDK. It always writes interactive: true, ensuring the stream only returns captures designed for a interactive experience.

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

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

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

const videoUrl = stream.data.geojson.features[0].properties.video_url;
const player = await create360Player({
  container: "#outerview-360",
  videoUrl,
  autoplay: true,
  muted: true,
  loop: true,
});

HTML setup

Give the mount element an explicit height. The player fills its container.

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

Player options

Option	Description
`container`	An element or CSS selector where the viewer mounts.
`videoUrl`	CORS-readable equirectangular interactive video URL.
`autoplay`	Starts playback after the first decoded frame. Default: `true`.
`muted`	Mutes the video for autoplay compatibility. Default: `true`.
`loop`	Loops playback. Default: `true`.
`onLoad`	Runs when the panorama is ready.
`onError`	Receives a renderer or media error.

Lifecycle

Destroy the player when the host component unmounts or its capture changes.

const player = await create360Player({ container: element, videoUrl });
// Later:
player.destroy();

Filters, plans, and security

interactiveSearchInput(input) is the safe filter helper for every interactive stream. It returns { ...input, interactive: true }. Never rely on a client-side check alone: use this filter at the API request boundary. Video URLs require Pro or Scale. Read the current rate and result limits in Outerview billing docs.