This is a Foxglove Studio extension specifically designed for H.264 video processing and visualization. It provides custom panels for handling H.264 video streams in robotics and autonomous systems.

Foxglove Studio allows developers to create extensions, or custom code that is loaded and executed inside the Foxglove Studio application. This extension is authored in TypeScript using the @foxglove/extension SDK.

• H.264 Video Panel: Custom panel for H.264 video stream visualization
• Video Topic Subscription: Automatically subscribes to common video topics
• TypeScript Support: Full TypeScript support with modern ES features
• PNPM Package Management: Uses PNPM for efficient dependency management

• Node.js (version 18 or higher)
• PNPM package manager
• Foxglove Studio desktop application

Extension development uses the pnpm package manager to install development dependencies and run build scripts.

To install extension dependencies, run pnpm install from the root of the extension package:

pnpm install

To build and install the extension into your local Foxglove Studio desktop app, run:

pnpm local-install

Open the Foxglove Studio desktop (or ctrl-R to refresh if it is already open). Your extension is installed and available within the app.

To build the extension without installing it locally:

pnpm build

Extensions are packaged into .foxe files. These files contain the metadata (package.json) and the build code for the extension.

Before packaging, make sure to set name, publisher, version, and description fields in package.json. When ready to distribute the extension, run:

pnpm package

This command will package the extension into a .foxe file in the local directory.

You can publish the extension for the public marketplace or privately for your organization.

See documentation here: https://foxglove.dev/docs/studio/extensions/publish#packaging-your-extension

• pnpm build - Build the extension
• pnpm local-install - Build and install the extension locally
• pnpm package - Package the extension into a .foxe file
• pnpm lint - Run ESLint
• pnpm lint:fix - Run ESLint with auto-fix

.
├── src/
│   ├── index.ts              # Extension entry point
│   └── ExamplePanel.tsx      # H.264 Video Panel component
├── dist/                     # Build output (generated)
├── package.json              # Package configuration
├── tsconfig.json             # TypeScript configuration
├── eslint.config.js          # ESLint configuration
└── README.md                 # This file

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Run tests and linting
5. Submit a pull request

This project is licensed under the MIT License - see the LICENSE file for details.

• Foxglove Studio Extension Documentation
• Foxglove Studio Extension API
• Foxglove Studio