https://github.com/ilkkao/capture-video-frame

Take screenshots from a <video> element
https://github.com/ilkkao/capture-video-frame

Last synced: 29 days ago
JSON representation

Take screenshots from a <video> element

• Host: GitHub
• URL: https://github.com/ilkkao/capture-video-frame
• Owner: ilkkao
• License: mit
• Created: 2015-08-08T15:05:40.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2022-11-16T08:30:49.000Z (about 2 years ago)
• Last Synced: 2024-11-07T10:42:51.456Z (about 1 month ago)
• Language: JavaScript
• Homepage:
• Size: 13.7 KB
• Stars: 99
• Watchers: 5
• Forks: 32
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# capture-video-frame

A micro-library for taking screenshots from a running HTML5 video.

## Installation

```bash

$ npm install --save capture-video-frame

```

or

```bash

$ yarn add capture-video-frame

```

## Example

HTML:

```html

  



```

JavaScript:

```js

import captureVideoFrame from "capture-video-frame";

// ...

// Call captureVideoFrame() when you want to record a screenshot

const frame = captureVideoFrame("my-video-id", "png");

// Show the image

const img = document.getElementById("my-screenshot");

img.setAttribute("src", frame.dataUri);

// Upload the image

const formData = new FormData();

formData.append("file", frame.blob, `my-screenshot.${frame.format}`);

const response = await fetch("/api/upload", {

  method: "POST",

  body: formData,

});

```

## Browser support

Tested on current Chrome and Firefox.

## API

#### `captureVideoFrame(source, format, quality)`

#### Parameters

`source` (element or string, mandatory) Source video. If string, id of the element.

`format` (string, optional) Output image format. Can be either `png` or `jpeg`. `png` is the default.

`quality` (number, optional) A Number between 0 and 1 indicating image quality if the requested type is image/jpeg or image/webp. The default value is 0.92.

#### Return value

- Object with `blob`, `dataUri`, and `format` properties if the capture succeeded

- `false` if the capture failed.

Image blob can be easily uploaded to the server using XHR2 FormData API.

Image data URI can be easily set as `` `src` attribute to show the captured image.

## License

MIT