How does it handle video storage and metadata?

It integrates with existing storage and database skills to save processed video files and track their metadata (like resolution and duration) via Drizzle ORM.

Can users see the progress of the video conversion?

Yes, the included React hook provides an onProgress callback that allows developers to implement real-time progress bars for the conversion process.

Is it compatible with all browsers?

Media Bunny requires a modern browser that supports the WebCodecs API, which includes Chrome 94+, Edge 94+, and Opera 80+.

Does this skill require a server for video transcoding?

No, Media Bunny utilizes the browser's WebCodecs API to perform video processing and conversion locally on the client's machine, saving server bandwidth and costs.

Which video formats are supported?

The skill supports reading, writing, and converting between MP4, WebM, and MKV containers, supporting codecs like AVC (H.264), HEVC, VP9, and AV1 depending on browser compatibility.

Media Bunny Video Processor

Name: Media Bunny Video Processor
Author: mattwoodco

bymattwoodco

•

Content Management

Enables browser-based video processing and metadata management in Next.js applications using the WebCodecs API.

Media Bunny provides a robust framework for handling video files directly in the browser, leveraging the high-performance WebCodecs API and the mediabunny library. It eliminates the need for expensive server-side transcoding for many common tasks by enabling client-side conversion between MP4, WebM, and MKV formats. With built-in integration for Drizzle ORM and storage services, it offers a complete end-to-end solution for extracting metadata, processing video streams, and persisting records in a Next.js App Router environment, ensuring a seamless and efficient media workflow.

Key Features

01Client-side video conversion for MP4, WebM, and MKV formats

02Automated metadata extraction including resolution, duration, and codecs

03Full-stack Next.js API routes for video lifecycle management

04Lazy-loaded React hooks for efficient browser resource management

05Pre-configured Drizzle ORM schema for video record persistence

063 GitHub stars

Use Cases

01Implementing a media library with automatic metadata indexing and storage

02Creating high-performance video upload workflows with real-time progress tracking

03Building a client-side video converter to reduce server-side processing costs

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add mattwoodco/skills media-bunny

For use in Claude.ai and ChatGPT

Download Skill