• Stars
    star
    113
  • Rank 310,115 (Top 7 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created about 8 years ago
  • Updated about 4 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Capture video screenshot from a `<video>` tag (at the current time)

capture-frame travis npm downloads javascript style guide

Capture video screenshot from a <video> tag (at the current time)

Sauce Test Status

Works in the browser with browserify! This module is used by WebTorrent Desktop.

install

npm install capture-frame

usage

simple example

const captureFrame = require('capture-frame')

const frame = captureFrame('.video') // Buffer that contains .png file data

// show the captured video frame in the DOM
const image = document.createElement('img')
image.width = frame.width
image.height = frame.height
image.src = window.URL.createObjectURL(new window.Blob([frame.image]))
document.body.appendChild(image)

complete example

const captureFrame = require('capture-frame')

const video = document.createElement('video')
video.addEventListener('canplay', onCanPlay)

video.volume = 0
video.autoplay = true
video.muted = true // most browsers block autoplay unless muted
video.setAttribute('crossOrigin', 'anonymous') // optional, when cross-domain
video.src = 'http://example.com/test.mp4'

function onCanPlay () {
  video.removeEventListener('canplay', onCanPlay)
  video.addEventListener('seeked', onSeeked)

  video.currentTime = 2 // seek 2 seconds into the video
}

function onSeeked () {
  video.removeEventListener('seeked', onSeeked)

  const frame = captureFrame(video)

  // unload video element, to prevent memory leaks
  video.pause()
  video.src = ''
  video.load()

  // show the captured image in the DOM
  const image = document.createElement('img')
  image.width = frame.width
  image.height = frame.height
  image.src = window.URL.createObjectURL(new window.Blob([frame.image]))
  document.body.appendChild(image)
}

api

frame = captureFrame(video, [format])

Capture a video frame the the video tag specified by video. This can be a reference to a video element in the page, or a string CSS selector. This must refer to a video element.

Optionally, specify a format for the image to be captured in. Must be one of "png", "jpeg", or "webp".

The returned object, frame, has three properties:

frame.image

The captured image, as a Buffer.

frame.width

The captured image's width, as a number.

frame.height

The captured image's height, as a number.

license

MIT. Copyright (c) Feross Aboukhadijeh.

More Repositories

1

simple-peer

πŸ“‘ Simple WebRTC video, voice, and data channels
JavaScript
7,405
star
2

SpoofMAC

πŸ’Ό Change your MAC address for debugging
Python
3,028
star
3

thanks

πŸ™Œ Give thanks to the open source maintainers you depend on! ✨
JavaScript
2,768
star
4

buffer

The buffer module from node.js, for the browser.
JavaScript
1,772
star
5

spoof

Easily spoof your MAC address in macOS, Windows, & Linux!
JavaScript
1,771
star
6

awesome-mad-science

Delightful npm packages that make you say "wow, didn't know that was possible!"
1,124
star
7

filldisk.com

πŸ’Ύ Masterful trolling with HTML5 localStorage
HTML
910
star
8

hostile

Simple, programmatic `/etc/hosts` manipulation (in node.js)
JavaScript
777
star
9

TheAnnoyingSite.com

The Annoying Site a.k.a. "The Power of the Web Platform"
JavaScript
727
star
10

yt-player

Simple, robust, blazing-fast YouTube Player API
JavaScript
662
star
11

clipboard-copy

Lightweight copy to clipboard for the web
JavaScript
585
star
12

bitmidi.com

🎹 Listen to free MIDI songs, download the best MIDI files, and share the best MIDIs on the web
JavaScript
507
star
13

electron-workshop

Workshop: Build cross-platform desktop apps with Electron
JavaScript
492
star
14

drag-drop

HTML5 drag & drop for humans
JavaScript
490
star
15

simple-get

Simplest way to make http get requests. Supports HTTPS, redirects, gzip/deflate, streams in < 100 lines
JavaScript
396
star
16

md5-password-cracker.js

Crack MD5 passwords with JavaScript Web Workers
JavaScript
381
star
17

run-parallel

Run an array of functions in parallel
JavaScript
363
star
18

magickeyboard.io

Ultimate hacker keyboard
JavaScript
339
star
19

safe-buffer

Safer Node.js Buffer API
JavaScript
338
star
20

timidity

Play MIDI files in the browser w/ Web Audio, WebAssembly, and libtimidity
Shell
315
star
21

p2p-graph

Real-time P2P network visualization with D3
JavaScript
286
star
22

multistream

A stream that emits multiple other streams one after another (streams3)
JavaScript
283
star
23

zelda

Automatically `npm link` all your packages together!
JavaScript
280
star
24

run-series

Run an array of functions in series
JavaScript
240
star
25

funding

Let's get open source maintainers paid ✨
JavaScript
209
star
26

render-media

Intelligently render media files in the browser
JavaScript
199
star
27

cs253.stanford.edu

CS 253 Web Security course at Stanford University
JavaScript
194
star
28

simple-websocket

Simple, EventEmitter API for WebSockets
JavaScript
184
star
29

queue-microtask

fast, tiny `queueMicrotask` shim for modern engines
JavaScript
172
star
30

last-fm

Simple, robust LastFM API client (for public data)
JavaScript
169
star
31

studynotes.org

✏️ Learn faster. Study better.
JavaScript
159
star
32

whiteboard

P2P Whiteboard powered by WebRTC and WebTorrent
JavaScript
154
star
33

ytinstant.com

Real-time YouTube video surfing.
JavaScript
148
star
34

mediasource

MediaSource API as a node.js Writable stream
JavaScript
138
star
35

chrome-net

Use the Node `net` API in Chrome Apps
JavaScript
134
star
36

login-with-twitter

Login with Twitter. OAuth without the nonsense.
JavaScript
123
star
37

cross-zip

Cross-platform .zip file creation
JavaScript
120
star
38

Fullscreen-API-Attack

Demo of phishing attack on the native HTML5 full screen API.
JavaScript
116
star
39

unmute-ios-audio

Enable/unmute WebAudio on iOS, even while mute switch is on
JavaScript
113
star
40

ieee754

Read/write IEEE754 floating point numbers from/to a Buffer or array-like object.
JavaScript
111
star
41

cyberhobo

Offline `git push` and `npm publish` for cyberhobos
JavaScript
111
star
42

Instant.fm

Share music playlists with friends.
JavaScript
108
star
43

available

Scan npm for available package names
JavaScript
100
star
44

bg-sound

Web Component to emulate the old-school <bgsound> HTML element
JavaScript
95
star
45

lxjs-chat

Talk to strangers! (P2P video chat using WebRTC)
JavaScript
94
star
46

play.cash

🎢 Music lovers, rejoice.
JavaScript
93
star
47

reddit

Simple Reddit API client
JavaScript
90
star
48

is-buffer

Determine if an object is a Buffer
JavaScript
89
star
49

run-waterfall

Run an array of functions in series, each passing its results to the next function
JavaScript
89
star
50

run-auto

Determine the best order for running async functions, LIKE MAGIC!
JavaScript
86
star
51

WireSheep

WireSheep shows you each user on the network and all the HTTP requests they're making in a pretty News Feed, a la Facebook.
C++
84
star
52

oculus-drone

Pilot a Parrot AR Drone with the Oculus Rift virtual reality headset!
C
81
star
53

arch

Better `os.arch()` for node and the browser -- detect OS architecture
JavaScript
79
star
54

string-to-stream

Convert a string into a stream (streams2)
JavaScript
79
star
55

feross.org

Pure concentrated awesome (a.k.a. my blog)
HTML
78
star
56

config

Server config files (nginx, mysql, certbot)
HTML
78
star
57

run-parallel-limit

Run an array of functions in parallel, but limit the number of tasks executing at the same time
JavaScript
76
star
58

blob-to-buffer

Convert a Blob to a Buffer.
JavaScript
72
star
59

CMSploit

Security scanner to find temporary config files that contain passwords on public websites
CoffeeScript
70
star
60

location-history

Lightweight browser location history abstraction
JavaScript
69
star
61

fromentries

Object.fromEntries() ponyfill (in 6 lines)
JavaScript
66
star
62

typedarray-to-buffer

Convert a typed array to a Buffer without a copy.
JavaScript
65
star
63

speakeasyjs.com

The JavaScript meetup for πŸ₯Ό mad science, πŸ§™β€β™‚οΈ hacking, and πŸ§ͺ experiments
JavaScript
64
star
64

express-sitemap-xml

Serve sitemap.xml from a list of URLs in Express
JavaScript
63
star
65

beepbeep

Make a console beep sound.
JavaScript
62
star
66

connectivity

Detect if the network is up (do we have connectivity?)
JavaScript
60
star
67

stream-to-blob

Convert a Readable Stream to a Blob
JavaScript
59
star
68

color-scheme-change

Detect system color scheme changes on the web (Dark Mode)
JavaScript
58
star
69

conferences

Conferences that I will attend or have already attended
53
star
70

Life

An experiment in treating life like a software project.
50
star
71

git-pull-or-clone

Ensure a git repo exists on disk and that it's up-to-date
JavaScript
50
star
72

cctv.js

Watch live visitors using your website.
JavaScript
48
star
73

Facebook-Like-Everything

Bookmarklet to Like every post+comment that you see on Facebook.
JavaScript
47
star
74

load-script2

Dynamic script loading for modern browsers
JavaScript
46
star
75

simple-sha256

Generate SHA-256 hashes (in Node and the Browser)
JavaScript
45
star
76

async-lru

A simple async LRU cache supporting O(1) set, get and eviction of old keys
JavaScript
45
star
77

peerdb

JavaScript
44
star
78

dotfiles

Configuration files for zsh, screen, git, ssh, sublime, dot dot dot
Shell
39
star
79

chrome-dgram

Use the Node `dgram` API in Chrome Apps
JavaScript
39
star
80

webcam-spy

Demo of Adobe Flash clickjacking vulnerability to spy on a user's webcam.
JavaScript
39
star
81

standard-react

JavaScript Standard Style for React Users
JavaScript
36
star
82

BrainGrinder

Instant foreign language flashcards (with audio!)
CSS
34
star
83

ahh-windows

Windows XP Emulator -- in the browser :)
HTML
34
star
84

chrome-dns

Use the Node `dns` API in Chrome Apps
JavaScript
34
star
85

objection-slug

Automatically generate slugs for an Objection.js model
JavaScript
33
star
86

call-log

Instrument a JavaScript class (or object) so that anytime a method function is called it gets logged to the console.
JavaScript
33
star
87

zero-fill

Zero-fill a number to the given size.
JavaScript
31
star
88

caught-in-a-web-of-apis

Attack code to accompany "Caught in a Web of APIs: An Analysis of Powerful Web APIs" research paper
JavaScript
30
star
89

cache-chunk-store

In-memory LRU (least-recently-used) cache for abstract-chunk-store compliant stores
JavaScript
28
star
90

clash

A Simple Bash-Like Shell
C++
28
star
91

preload-img

Preload an image on a webpage
JavaScript
26
star
92

chunk-store-stream

Convert an abstract-chunk-store compliant store into a readable or writable stream
JavaScript
26
star
93

feross-card

It's me, Feross!
JavaScript
24
star
94

vlc-command

Find VLC player command line path
JavaScript
24
star
95

raft

An understandable consensus algorithm
C++
23
star
96

simple-concat

Super-minimalist version of `concat-stream`. Less than 15 lines!
JavaScript
23
star
97

stream-to-blob-url

Convert a Readable Stream to a Blob URL
JavaScript
23
star
98

SuperTranslate

"Super translate" words into many different languages at once
CSS
21
star
99

Fling

Send songs, videos, web urls from your phone to your desktop with a flick of your wrist
Objective-C
21
star
100

detect-proxy

Using <img> to detect whether the user is browsing through a proxy or not.
21
star