2.44.0 • Published 4 months ago

@luxonis/visualizer-protobuf v2.44.0

Weekly downloads
-
License
UNLICENSED
Repository
-
Last release
4 months ago

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>
  1. 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
2.29.0

6 months ago

2.25.0

6 months ago

2.27.0

6 months ago

2.11.0

8 months ago

2.11.1

8 months ago

2.2.0

10 months ago

2.0.2

11 months ago

2.34.0

6 months ago

2.4.1

10 months ago

2.32.1

6 months ago

2.4.0

10 months ago

2.6.0

8 months ago

2.30.0

6 months ago

2.8.0

8 months ago

2.0.1

11 months ago

2.0.0

11 months ago

2.19.0

7 months ago

2.5.6

8 months ago

2.5.5

9 months ago

2.17.0

7 months ago

2.5.8

8 months ago

2.5.7

8 months ago

2.36.0

6 months ago

2.15.0

7 months ago

2.38.0

5 months ago

2.13.0

7 months ago

2.11.2

8 months ago

2.43.0

4 months ago

2.20.0

7 months ago

2.22.0

7 months ago

2.41.0

5 months ago

1.11.0

11 months ago

2.28.0

6 months ago

2.24.0

6 months ago

2.26.0

6 months ago

2.31.1

6 months ago

2.10.1

8 months ago

2.3.0

10 months ago

2.31.0

6 months ago

2.12.0

7 months ago

2.1.1

11 months ago

2.5.0

9 months ago

2.33.0

6 months ago

2.10.0

8 months ago

2.7.0

8 months ago

2.5.2

9 months ago

2.5.1

9 months ago

2.9.0

8 months ago

2.5.4

9 months ago

2.5.3

9 months ago

2.18.1

7 months ago

2.39.0

5 months ago

2.16.1

7 months ago

2.18.0

7 months ago

2.16.2

7 months ago

2.35.0

6 months ago

2.16.0

7 months ago

2.37.0

5 months ago

2.14.0

7 months ago

2.21.0

7 months ago

2.42.0

5 months ago

2.23.0

7 months ago

2.44.0

4 months ago

2.40.0

5 months ago

1.10.0

12 months ago

1.9.0

12 months ago

1.8.8

12 months ago

1.8.7

12 months ago

1.7.7

12 months ago

1.7.6

12 months ago

1.7.3

1 year ago

1.7.2

1 year ago

1.7.1

1 year ago

1.6.2

1 year ago

1.7.0

1 year ago

1.7.5

12 months ago

1.7.4

1 year ago

1.6.1

1 year ago

1.6.0

1 year ago

1.5.4

1 year ago

1.4.4

1 year ago

1.4.3

1 year ago

1.4.2

1 year ago

1.4.1

1 year ago

1.4.0

1 year ago

1.3.1

1 year ago

1.2.1

1 year ago

1.1.1

1 year ago

1.0.1

1 year ago

1.0.0

1 year ago