Luxonis | Visualizer Library

Visualize your streams and data with ease

Quick Example

export const App: React.FC = () => {
  const [connections, setConnections] = React.useState<WebRtcConnection[]>([]);

  React.useEffect(() => {
    const newConnection = new WebRtcConnection({
      clientId: "YOUR-CLIENT-ID",
      applicationIdentifier: "YOUR-APPLICATION-IDENTIFIER",
      authPayload: "YOUR-AUTH-PAYLOAD",
      iceServers: [
        {
          urls: ["turn:example.url:1234"],
          username: "EXAMPLE-USERNAME",
          credential: "EXAMPLE-CREDENTIAL",
        },
      ],
    });

    setConnections([newConnection]);
  }, []);

  return (
    <VisualizerContext connections={connections}>
      <PanelLayout>
          <ImagePanel topic="h264" annotationTopics={['detections']} />
          <ImagePanel topic="mjpeg" />
          <ImagePanel topic="depth" annotationTopics={['detections']} />
          <ImagePanel topic="raw" />
          <PointCloudPanel topic="pointcloud" />
      </PanelLayout>
    </VisualizerContext>
  );
};

Usage

Initialization

1. Create connection array using WebRtcConnection or WebSocketConnection classes
2. Wrap your structure with VisualizerContext

<VisualizerContext connections={connections}>
  {/* Panels */}
</VisualizerContext>

3. For locale loading and basic layout use PanelLayout wrapper

<VisualizerContext connections={connections}>
  <PanelLayout>
    {/* Panels */}
  </PanelLayout>
</VisualizerContext>

Panels

• Use ImagePanel for regular image streams. annotationTopics property can be used to specify topics with drawings on top of the stream; extraAnnotationTopics is the same but initially will be hidden from UI selection under dropdown

<ImagePanel
  topic="raw"
  annotationTopics={['main']}
  extraAnnotationTopics={['additional']}
/>

• Use PointCloudPanel for Point Cloud streams

<PointCloudPanel topic="pointcloud" />

Services

Visualizer library supports RPC (remote procedure call) services:

const response: DataView = await connection.request({
  name: 'getData',
  ignoreResponse: false, // Optional
  body: { field: 'test' }, // Optional. Will be sent as binary DataView
});

Development

• Install protoc for protobuf compilation
• Run yarn build under ./apps/depthai-visualizer to build