├── .airtap.yml
├── .npmignore
├── .travis.yml
├── LICENSE
├── README.md
├── index.js
├── package.json
└── test
    ├── basic.js
    └── server
        ├── index.js
        └── static
            └── test.mp4


/.airtap.yml:
--------------------------------------------------------------------------------
 1 | sauce_connect: true
 2 | loopback: airtap.local
 3 | browsers:
 4 |   - name: chrome
 5 |     version: latest
 6 |   - name: firefox
 7 |     version: latest
 8 |   - name: safari
 9 |     version: latest
10 |   - name: microsoftedge
11 |     version: latest
12 |   - name: android
13 |     version: latest
14 |   - name: iphone
15 |     version: latest
16 | server: ./test/server/index.js
17 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | .airtap.yml
2 | .travis.yml
3 | test/
4 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | language: node_js
 2 | node_js:
 3 |   - lts/*
 4 | addons:
 5 |   sauce_connect: true
 6 |   hosts:
 7 |     - airtap.local
 8 | env:
 9 |   global:
10 |   - secure: asT2vVJ3bib7PwklxG2lQ9mnVp9sE2F1yK9Tf+nF4Nb1P+ih7K9jMGn2AlCiKl+5tGQy+KoyACVBInZJK2sJyObLHFmosSKqWsql63yMFRjbbvvniF7q6TaQABf836kvZLM9ne9qsxaI19m8J0eePY7jP/9dL0D1gAqCE33wEtAbhCSjg4Rh53PWtj1bVgusiOOg9PhEZ+qy/ov5P6aW42vtdJTGPtd9tsYmKP/tHGXYlgYXiy5LcoxA/RJOpmvHx75qHfN6kToOvjk1X1b8zU/2sZpB30IncAnHYdnslO+ktsSJTS1aBGH6FcHIBAnpZDDsFH/9Lc3Jfch6Tw5t6K/Di1KfIZ+iOuUd+WDgV2M9OQouI8o2rsSjgtbGs7SRybnhmeviFvh+nrjMWsjiT9f1Q8mguAlNmXpRfc0f/lp/ilRPocI8/tDnVfDdiZOh8FjANCyrsR7DvCxfWV7pVCOXjZMbuvhKVWB3MIHvLeDW2cT68Yzz+hPUeL3bJeDCetaICPQWrFyb04npnNOD5HKY9zAG7jiDm68xAy6slgz1fY2iLKPydDZLmdS/oAi505XFAe10F3O/FhW6RzA7wxhKO2JrbOEGC3yvhh1Kn2pLXrPCX35IfcOCAEvnLbhHZeVxmQyUhZV5+AlwmPPQnecAlMb+8PphsXwr2rbdz3c=
11 |   - secure: iKdLfj+Ruy37uEAhiyooSPcCiknUZwVXJgcl/CNG5eNJAMPWARMz9tP5ber1iVVXm5Cs+X+hl4SsnPXuYl6Y1wH+8E5so7+yfaxwH7P4of0MrZonwlyAKJmX7eKls2u7rsNo50vBNp4qQlkEJkJ5LgtOqhf42uLEmhN5z6RCd0vU7iyxNAwWrRWvp8UK8vjCq0XzhDBc9P0PYjZNoKt0XFaOFDZ60U/ZlHtwbXd5wBKE4SmVTk/E/Og2rx96wcUmiOZg/jLzykOmHItEM1x+75B/fkeUvR6todNwenODeM9waF2DM3sTAIN8/JP6c+XvaVM72cQ7dXhkSeEw85t9bGKCEaGnL0HyDLHkpt0v/dFz9zbXDtz0mE8yoRz/Pe9J1ypyUaroCcI/Er5PyBzddJZCViLQJuH6ZsTMhY9p1MGSwJHxO6lRj5hnI03yV/N1Fwru33A0jZUMFB9Ssd0uiRnvDMevY8FV7l9e3uueAWcA9sRCSZpBKkEKCYfSV3ZpL4h8a6HWJtj82njgUQJrRX0pEo22jGYRhXr5NXlcrRHRs0OgyyHMWTAUAEq7VzuEEtnEKYTcxsOtlNDQYaIBiL0R1kiO27ioW1WzEL07OcHU9SPjzYqEK648k5q0DGeyfWr6aEMS9ore1L9QVbG/eV/63KsAlnJa2ZDSMr0Z5Nw=
12 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) Feross Aboukhadijeh
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of
 6 | this software and associated documentation files (the "Software"), to deal in
 7 | the Software without restriction, including without limitation the rights to
 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
 9 | the Software, and to permit persons to whom the Software is furnished to do so,
10 | subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
21 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # capture-frame [![travis][travis-image]][travis-url] [![npm][npm-image]][npm-url] [![downloads][downloads-image]][downloads-url] [![javascript style guide][standard-image]][standard-url]
  2 | 
  3 | [travis-image]: https://img.shields.io/travis/feross/capture-frame/master.svg
  4 | [travis-url]: https://travis-ci.org/feross/capture-frame
  5 | [npm-image]: https://img.shields.io/npm/v/capture-frame.svg
  6 | [npm-url]: https://npmjs.org/package/capture-frame
  7 | [downloads-image]: https://img.shields.io/npm/dm/capture-frame.svg
  8 | [downloads-url]: https://npmjs.org/package/capture-frame
  9 | [standard-image]: https://img.shields.io/badge/code_style-standard-brightgreen.svg
 10 | [standard-url]: https://standardjs.com
 11 | 
 12 | ### Capture video screenshot from a `<video>` tag (at the current time)
 13 | 
 14 | [![Sauce Test Status](https://saucelabs.com/browser-matrix/capture-frame.svg)](https://saucelabs.com/u/capture-frame)
 15 | 
 16 | Works in the browser with [browserify](http://browserify.org/)! This module is used by [WebTorrent Desktop](http://webtorrent.io/desktop).
 17 | 
 18 | ## install
 19 | 
 20 | ```
 21 | npm install capture-frame
 22 | ```
 23 | 
 24 | ## usage
 25 | 
 26 | ### simple example
 27 | 
 28 | ```js
 29 | const captureFrame = require('capture-frame')
 30 | 
 31 | const frame = captureFrame('.video') // Buffer that contains .png file data
 32 | 
 33 | // show the captured video frame in the DOM
 34 | const image = document.createElement('img')
 35 | image.width = frame.width
 36 | image.height = frame.height
 37 | image.src = window.URL.createObjectURL(new window.Blob([frame.image]))
 38 | document.body.appendChild(image)
 39 | ```
 40 | 
 41 | ### complete example
 42 | 
 43 | ```js
 44 | const captureFrame = require('capture-frame')
 45 | 
 46 | const video = document.createElement('video')
 47 | video.addEventListener('canplay', onCanPlay)
 48 | 
 49 | video.volume = 0
 50 | video.autoplay = true
 51 | video.muted = true // most browsers block autoplay unless muted
 52 | video.setAttribute('crossOrigin', 'anonymous') // optional, when cross-domain
 53 | video.src = 'http://example.com/test.mp4'
 54 | 
 55 | function onCanPlay () {
 56 |   video.removeEventListener('canplay', onCanPlay)
 57 |   video.addEventListener('seeked', onSeeked)
 58 | 
 59 |   video.currentTime = 2 // seek 2 seconds into the video
 60 | }
 61 | 
 62 | function onSeeked () {
 63 |   video.removeEventListener('seeked', onSeeked)
 64 | 
 65 |   const frame = captureFrame(video)
 66 | 
 67 |   // unload video element, to prevent memory leaks
 68 |   video.pause()
 69 |   video.src = ''
 70 |   video.load()
 71 | 
 72 |   // show the captured image in the DOM
 73 |   const image = document.createElement('img')
 74 |   image.width = frame.width
 75 |   image.height = frame.height
 76 |   image.src = window.URL.createObjectURL(new window.Blob([frame.image]))
 77 |   document.body.appendChild(image)
 78 | }
 79 | ```
 80 | 
 81 | ## api
 82 | 
 83 | ### `frame = captureFrame(video, [format])`
 84 | 
 85 | Capture a video frame the the video tag specified by `video`. This can be a
 86 | reference to a video element in the page, or a string CSS selector. This must
 87 | refer to a video element.
 88 | 
 89 | Optionally, specify a `format` for the image to be captured in. Must be one of
 90 | "png", "jpeg", or "webp".
 91 | 
 92 | The returned object, `frame`, has three properties:
 93 | 
 94 | #### `frame.image`
 95 | 
 96 | The captured image, as a `Buffer`.
 97 | 
 98 | #### `frame.width`
 99 | 
100 | The captured image's width, as a `number`.
101 | 
102 | #### `frame.height`
103 | 
104 | The captured image's height, as a `number`.
105 | 
106 | ## license
107 | 
108 | MIT. Copyright (c) [Feross Aboukhadijeh](http://feross.org).
109 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | /*! capture-frame. MIT License. Feross Aboukhadijeh <https://feross.org/opensource> */
 2 | 'use strict'
 3 | 
 4 | module.exports = captureFrame
 5 | 
 6 | function captureFrame (video, format) {
 7 |   if (typeof video === 'string') {
 8 |     video = document.querySelector(video)
 9 |   }
10 | 
11 |   if (video == null || video.nodeName !== 'VIDEO') {
12 |     throw new TypeError('First argument must be a <video> element or selector')
13 |   }
14 | 
15 |   if (format == null) {
16 |     format = 'png'
17 |   }
18 | 
19 |   if (format !== 'png' && format !== 'jpeg' && format !== 'webp') {
20 |     throw new TypeError('Second argument must be one of "png", "jpeg", or "webp"')
21 |   }
22 | 
23 |   const canvas = document.createElement('canvas')
24 |   const width = canvas.width = video.videoWidth
25 |   const height = canvas.height = video.videoHeight
26 | 
27 |   canvas.getContext('2d').drawImage(video, 0, 0)
28 | 
29 |   const dataUri = canvas.toDataURL('image/' + format)
30 |   const data = dataUri.split(',')[1]
31 | 
32 |   return {
33 |     image: Buffer.from(data, 'base64'),
34 |     width,
35 |     height
36 |   }
37 | }
38 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "capture-frame",
 3 |   "description": "Capture video screenshot from a `<video>` tag (at the current time)",
 4 |   "version": "4.0.0",
 5 |   "author": {
 6 |     "name": "Feross Aboukhadijeh",
 7 |     "email": "feross@feross.org",
 8 |     "url": "https://feross.org"
 9 |   },
10 |   "bugs": {
11 |     "url": "https://github.com/feross/capture-frame/issues"
12 |   },
13 |   "devDependencies": {
14 |     "airtap": "^3.0.0",
15 |     "cors": "^2.8.5",
16 |     "ecstatic": "^4.1.4",
17 |     "file-type": "^14.6.2",
18 |     "standard": "*",
19 |     "tape": "^5.0.1"
20 |   },
21 |   "homepage": "https://github.com/feross/capture-frame",
22 |   "keywords": [
23 |     "browser",
24 |     "browser video",
25 |     "canvas",
26 |     "capture",
27 |     "frame",
28 |     "screenshot",
29 |     "video",
30 |     "video screenshot",
31 |     "video tag"
32 |   ],
33 |   "license": "MIT",
34 |   "main": "index.js",
35 |   "repository": {
36 |     "type": "git",
37 |     "url": "git://github.com/feross/capture-frame.git"
38 |   },
39 |   "scripts": {
40 |     "test": "standard && npm run test-browser",
41 |     "test-browser": "airtap -- test/*.js",
42 |     "test-browser-local": "airtap --local -- test/*.js"
43 |   },
44 |   "funding": [
45 |     {
46 |       "type": "github",
47 |       "url": "https://github.com/sponsors/feross"
48 |     },
49 |     {
50 |       "type": "patreon",
51 |       "url": "https://www.patreon.com/feross"
52 |     },
53 |     {
54 |       "type": "consulting",
55 |       "url": "https://feross.org/support"
56 |     }
57 |   ]
58 | }
59 | 


--------------------------------------------------------------------------------
/test/basic.js:
--------------------------------------------------------------------------------
 1 | const captureFrame = require('../')
 2 | const FileType = require('file-type/browser')
 3 | const test = require('tape')
 4 | 
 5 | test('throws on invalid arguments', (t) => {
 6 |   t.throws(() => {
 7 |     captureFrame('.invalid-selector')
 8 |   })
 9 | 
10 |   t.throws(() => {
11 |     captureFrame(null)
12 |   })
13 | 
14 |   t.throws(() => {
15 |     const div = document.createElement('div')
16 |     captureFrame(div)
17 |   })
18 | 
19 |   t.throws(() => {
20 |     const video = document.createElement('video')
21 |     captureFrame(video, 'xxxx') // invalid format
22 |   })
23 | 
24 |   t.end()
25 | })
26 | 
27 | function captureFromTestMp4 (format, cb) {
28 |   const video = document.createElement('video')
29 |   video.addEventListener('canplay', onCanPlay)
30 | 
31 |   video.volume = 0
32 |   video.autoplay = true
33 |   video.muted = true
34 |   video.src = '/test.mp4'
35 |   document.body.append(video)
36 | 
37 |   function onCanPlay () {
38 |     video.removeEventListener('canplay', onCanPlay)
39 |     video.addEventListener('seeked', onSeeked)
40 | 
41 |     video.currentTime = 2
42 |   }
43 | 
44 |   function onSeeked () {
45 |     video.removeEventListener('seeked', onSeeked)
46 | 
47 |     const frame = captureFrame(video, format)
48 | 
49 |     // unload video element
50 |     video.pause()
51 |     video.src = ''
52 |     video.load()
53 | 
54 |     video.remove()
55 | 
56 |     cb(null, frame.image)
57 |   }
58 | }
59 | 
60 | test('capture frame from `test.mp4` (default)', (t) => {
61 |   t.plan(3)
62 |   captureFromTestMp4(null, async (err, buf) => {
63 |     t.error(err)
64 |     t.ok(buf.length, 'Captured image contains data')
65 |     t.equal((await FileType.fromBuffer(buf)).ext, 'png')
66 |   })
67 | })
68 | 
69 | test('capture frame from `test.mp4` (png)', (t) => {
70 |   t.plan(3)
71 |   captureFromTestMp4('png', async (err, buf) => {
72 |     t.error(err)
73 |     t.ok(buf.length, 'Captured image contains data')
74 |     t.equal((await FileType.fromBuffer(buf)).ext, 'png')
75 |   })
76 | })
77 | 
78 | test('capture frame from `test.mp4` (jpeg)', (t) => {
79 |   t.plan(3)
80 |   captureFromTestMp4('jpeg', async (err, buf) => {
81 |     t.error(err)
82 |     t.ok(buf.length, 'Captured image contains data')
83 |     t.equal((await FileType.fromBuffer(buf)).ext, 'jpg')
84 |   })
85 | })
86 | 


--------------------------------------------------------------------------------
/test/server/index.js:
--------------------------------------------------------------------------------
 1 | const cors = require('cors')
 2 | const ecstatic = require('ecstatic')
 3 | const http = require('http')
 4 | const path = require('path')
 5 | 
 6 | const server = http.createServer(function (req, res) {
 7 |   cors()(req, res, function (err) {
 8 |     if (err) throw err
 9 |     ecstatic({ root: path.join(__dirname, 'static') })(req, res)
10 |   })
11 | })
12 | 
13 | const port = Number(process.env.AIRTAP_PORT) || 8000
14 | console.log('Test server listening on port', port)
15 | 
16 | server.listen(port)
17 | 


--------------------------------------------------------------------------------
/test/server/static/test.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/feross/capture-frame/6eedc5a16826106b230f943135d0cd89324eeb1e/test/server/static/test.mp4


--------------------------------------------------------------------------------