Luxonis | Visualizer library

Visualize your streams and data with ease

Usage 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 (
    <VisualizerFlatContext connections={connections}>
      <CanvasPanel imageTopic="/cam/color" width={1280} height={800} />
    </VisualizerFlatContext>
  );
};

Development

• Run yarn build under ./apps/depthai-visualizer/src/frontend to build