Screenshot

Adds a Save frame row to the settings menu. Pause on a frame you like below, open the settings menu, and save it.

"use client";import { VideoPlayer } from "react-video-kit/player";import { screenshot } from "react-video-kit/screenshot";const plugins = [screenshot()];export default function Screenshot() {  return <VideoPlayer src="/media/sample-720.mp4" poster="/media/poster.jpg" plugins={plugins} load="visible" />;}

Usage

import { VideoPlayer } from "react-video-kit/player";import { screenshot } from "react-video-kit/screenshot";const plugins = [screenshot()];<VideoPlayer src="/video.mp4" plugins={plugins} />;

Files are named for the frame's position, such as frame-00-01-30.png. Choose your own with filename, which gets the position in seconds:

screenshot({  filename: (time) => `first-light-${Math.floor(time)}.png`,});

Use the frame yourself

capture returns the frame as a Blob, for uploading or showing in your own interface.

"use client";import { useCommands } from "react-video-kit";import { screenshot } from "react-video-kit/screenshot";function AttachFrame({ onFrame }: { onFrame(frame: Blob): void }) {  const { capture } = useCommands(screenshot);  return (    <button      onClick={async () => {        const frame = await capture();        if (frame) onFrame(frame);      }}    >      Attach this frame    </button>  );}

Video from another origin

A browser only lets a page read a video's pixels when the video is on the same origin or is served with CORS. For a video on a CDN, allow your site in the Access-Control-Allow-Origin header and ask for it with CORS:

<VideoPlayer  src="https://cdn.example.com/video.mp4"  media={{ crossOrigin: "anonymous" }}  plugins={plugins}/>

Browsers don't hand out frames of protected video, so DRM content usually saves as a black picture.

Behaviour

• capture never rejects. If the frame can't be read it returns null and sets error, where tainted means the browser refused to read the video.
• download saves the file, tells the viewer how it went in a short message, and returns whether it worked.
• The picture is saved at the video's own size, however large the player is on the page.
• The message is announced to screen readers.

API

Options

State

Read it with useVideoState(screenshot, (state) => …).

Commands

Call them with useCommands(screenshot).

Parts