feross / capture-frame

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

feross

Feross Utility Functions

install

npm install feross

usage

TODO

license

MIT. Copyright (c) Feross Aboukhadijeh.

capture-frame's Issues

image/jpg is not a valid type

The correct type is image/jpeg. I tried running this, and it actually gives image/png data instead, when using format=jpg. Has this ever been working?

See:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL

See also:
mifi/lossless-cut#25

Some feedback

Formats

I tested chrome, ff & safari on this page:

https://kangax.github.io/jstests/toDataUrl_mime_type_test/

Apparently

• Safari supports png, jpeg, gif, bmp, and tiff
• Chrome supports png, jpeg and webp
• Firefox supports png, jpeg and bmp

(don't have IE/Edge on mac)

So i think this check should be removed and just allow whatever format gets thrown at it.
Other browser & format will be added at some point.
If it isn't supported then it will fallback to png. there is no harm in testing other unsupported formats.

capture-frame/index.js

Lines 18 to 20 in 947bb9a

	if (format !== 'png' && format !== 'jpeg' && format !== 'webp') {
	throw new TypeError('Second argument must be one of "png", "jpeg", or "webp"')
	}

Since it will default to png then there is no need to check for format either

capture-frame/index.js

Lines 14 to 16 in 947bb9a

	if (format == null) {
	format = 'png'
	}

since image/undefined will be a png anyway

But if you insist on keeping it, then use default parameter function n(format = png)

Output

Right now it returns a Buffer and makes it a dependent on Buffer. I think that it could as well return a Uint8Array instead. Uint8Array and Buffer are both instances of Uint8Array.
That would make this package a lot smaller when using browserify.
Node are now also able to write any TypedArray with fs and are not restricted to only Buffer. So there is that...

Using canvas.toBlob i think is also better. Which means it will be async...
So returning a new promise would be something worth considering?

then you can use the FileReader or Response to turn a blob into a arrayBuffer and then resolve the promise with a Uint8Array

// Response
new Promise(rs => 
  canvas.toBlob(blob => {
    rs(new Response(blob).arrayBuffer().then(ab => new Uint8Array(ab)))
  }, 'image/' + format)
)

// FileReader
new Promise(rs => 
  canvas.toBlob(blob => {
    const reader = new FileReader()
    reader.onload = () => {
      rs(new Uint8Array(reader.result))
    }
    reader.readAsArrayBuffer(blob)
  }, 'image/' + format)
)

---

But i almost think it should return a Blob instead of a Buffer or TypedArray.
then you are able to check if the format was what you wished for by checking if the blob.type matches.
You are then also able to create a ObjectURL or append the blob to a FormData. Wish I think could be more useful.
it's also more RAM friendlier to have a blob that might point to some place on the HDD instead of having the hole buffer in the RAM.
...There is no easy way to guess the mime type of a buffer and do the opposite thing.

If I used webp in firefox it would return a png (with buffer). So if i assumed it worked and save it as .webp then it would have the wrong extension type

Quality

Think you missing the quality parameter as well... 0-1 (default is 0.8)

An in-range update of standard is breaking the build 🚨

---

🚨 Reminder! Less than one month left to migrate your repositories over to Snyk before Greenkeeper says goodbye on June 3rd! 💜 🚚💨 💚

Find out how to migrate to Snyk at greenkeeper.io

---

The devDependency standard was updated from 14.3.3 to 14.3.4.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

standard is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ❌ continuous-integration/travis-ci/push: The Travis CI build could not complete due to an error (Details).

---

Release Notes for 14.3.4 - 2020-05-11

• Relax no-return-await rule (#1442)

Commits

The new version differs by 12 commits.

• bf35e5f 14.3.4
• 5b2af9c Merge pull request #1515 from Vrq/master
• bca7bd2 Add SwissDev JS Jobs to users
• 5040cff Merge pull request #1512 from iaurg/patch-1
• 64c0486 Adjusting some typo errors in PT-BR Readme
• c713105 Merge pull request #1510 from HCLonely/master
• fc0ab4f Fix link cannot be positioned correctly
• c93f3f3 Fix link cannot be positioned correctly
• 8445fee Merge pull request #1506 from joshuagoran/patch-1
• 0243b25 clarify constructor-super rule example
• a9dad9e Merge pull request #1502 from standard/greenkeeper/eslint-config-standard-14.1.1
• 282702b fix(package): update eslint-config-standard to version 14.1.1

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴