Name: gifshot
Owner: Yahoo Inc.
Description: JavaScript library that can create animated GIFs from media streams, videos, or images
Created: 2014-09-24 20:15:02.0
Updated: 2018-01-17 07:07:07.0
Pushed: 2017-12-18 18:07:58.0
Homepage: http://yahoo.github.io/gifshot/
Size: 19035
Language: JavaScript
GitHub Committers
| User | Most Recent Commit | # Commits |
|---|
Other Committers
| User | Most Recent Commit | # Commits |
|---|
JavaScript library that can create animated GIFs from media streams, videos, or images
gifshot uses the following technologies:
The webRTC getUserMedia() API to get permission to use a user's webcam and manipulate the CameraStream Media object
The HTML5 Filesystem APIs to handle the temporary blob URL creation
The HTML5 video element to stream the blob URL
The canvas API to create a dynamic image from an HTML5 video, or images
Web workers to process the GIF frames
Typed Arrays to handle binary image data
Base 64 encoding to create a base 64 encoded image string
Animated GIF from Webcam :
Firefox 17+, Chrome 21+, Opera 18+, Blackberry Browser 10+, Opera Mobile 12+, Chrome For Android 35+, Firefox for Android 29+
Animated GIF from Existing Video :
All modern browsers (IE10+)
Animated GIF from Existing Images :
All modern browsers (IE10+)
gifshot on your HTML page (gifshot.js can be found in the build directory)ipt src='gifshot.js'></script>
y default, a user's webcam is used to create the animated GIF
hot.createGIF({}, function(obj) {
(!obj.error) {
var image = obj.image,
animatedImage = document.createElement('img');
animatedImage.src = image;
document.body.appendChild(animatedImage);
git clone git@github.com:yahoo/gifshot.gitnpm installnpm run previewlocalhost:8001 to try out gifshot
Creates an animated GIF from either a webcam stream, an existing video (e.g. mp4), or existing images
Note: If you wish to use the default options, you can just pass a callback function as the only argument
Another Note: An object is passed back to the callback function with helpful data
hot.createGIF({}, function(obj) {
callback object properties
--------------------------
image - Base 64 image
cameraStream - The webRTC MediaStream object
error - Boolean that determines if an error occurred
errorCode - Helpful error label
errorMsg - Helpful error message
savedRenderingContexts - An array of canvas image data (will only be set if the saveRenderingContexts option was used)
Takes a snap shot (not animated) image from a webcam stream or existing video
Note: If you wish to use the default options, you can just pass a callback function as the only argument
Another Note: An object is passed back to the callback function with helpful data
hot.takeSnapShot({}, function(obj) {
callback object properties
--------------------------
image - Base 64 image
error - Boolean that determines if an error occurred
errorCode - Helpful error label
errorMsg - Helpful error message
savedRenderingContexts - An array of canvas image data (will only be set if the saveRenderingContexts option was used)
Turns off the user's webcam (by default, the user's webcam is turned off)
Note: This is helpful when you use the keepCameraOn option
hot.stopVideoStreaming();
If the current browser supports all of the gifshot animated GIF options
hot.isSupported();
If the current browser supports creating animated GIFs from a webcam video stream
hot.isWebCamGIFSupported();
If the current browser supports creating animated GIFs from an existing HTML video (e.g. mp4, ogg, ogv, webm)
Note: You can pass in an array of codec extensions to specifically check if the current browser supports at least one of them
hot.isExistingVideoGIFSupported(['mp4', 'ogg']);
If the current browser supports creating animated GIFs from existing images (e.g. jpeg, png, gif)
hot.isExistingImagesGIFSupported();
Web Cam
hot.createGIF(function(obj) {
(!obj.error) {
var image = obj.image,
animatedImage = document.createElement('img');
animatedImage.src = image;
document.body.appendChild(animatedImage);
HTML5 Video
hot.createGIF({
ideo': ['example.mp4', 'example.ogv']
nction(obj) {
(!obj.error) {
var image = obj.image,
animatedImage = document.createElement('img');
animatedImage.src = image;
document.body.appendChild(animatedImage);
Images
hot.createGIF({
mages': ['http://i.imgur.com/2OO33vX.jpg', 'http://i.imgur.com/qOwVaSN.png', 'http://i.imgur.com/Vo5mFZJ.gif']
nction(obj) {
(!obj.error) {
var image = obj.image,
animatedImage = document.createElement('img');
animatedImage.src = image;
document.body.appendChild(animatedImage);
Snap Shot
hot.takeSnapShot(function(obj) {
(!obj.error) {
var image = obj.image,
animatedImage = document.createElement('img');
animatedImage.src = image;
document.body.appendChild(animatedImage);
esired width of the image
Width': 200,
esired height of the image
Height': 200,
f this option is used, then a GIF will be created using these images
.g. ['http://i.imgur.com/2OO33vX.jpg', 'http://i.imgur.com/qOwVaSN.png', 'http://i.imgur.com/Vo5mFZJ.gif'],
ote: Make sure these image resources are CORS enabled to prevent any cross-origin JavaScript errors
ote: You may also pass a NodeList of existing image elements on the page
ges': [],
f this option is used, then a gif will be created using the appropriate video
TML5 video that you would like to create your animated GIF from
ote: Browser support for certain video codecs is checked, and the appropriate video is selected
ote: You may also pass a NodeList of existing video elements on the page
.g. 'video': ['example.mp4', 'example.ogv'],
eo': null,
ou can pass an existing video element to use for the webcam GIF creation process,
nd this video element will not be hidden (useful when used with the keepCameraOn option)
ro tip: Set the height and width of the video element to the same values as your future GIF
nother Pro Tip: If you use this option, the video will not be paused, the object url not revoked, and
he video will not be removed from the DOM. You will need to handle this yourself.
camVideoElement': null,
hether or not you would like the user's camera to stay on after the GIF is created
ote: The cameraStream Media object is passed back to you in the createGIF() callback function
pCameraOn': false,
xpects a cameraStream Media object
ote: Passing an existing camera stream will allow you to create another GIF and/or snapshot without
asking for the user's permission to access the camera again if you are not using SSL
eraStream': null,
SS filter that will be applied to the image (eg. blur(5px))
ter': '',
he amount of time (in seconds) to wait between each frame capture
erval': 0.1,
he amount of time (in seconds) to start capturing the GIF (only for HTML5 videos)
set': null,
he number of frames to use to create the animated GIF
ote: Each frame is captured every 100 milleseconds of a video and every ms for existing images
Frames': 10,
he amount of time (10 = 1s) to stay on each frame
meDuration': 1,
he text that covers the animated GIF
t': '',
he font weight of the text that covers the animated GIF
tWeight': 'normal',
he font size of the text that covers the animated GIF
tSize': '16px',
he minimum font size of the text that covers the animated GIF
ote: This option is only applied if the text being applied is cut off
FontSize': '10px',
hether or not the animated GIF text will be resized to fit within the GIF container
izeFont': false,
he font family of the text that covers the animated GIF
tFamily': 'sans-serif',
he font color of the text that covers the animated GIF
tColor': '#ffffff',
he horizontal text alignment of the text that covers the animated GIF
tAlign': 'center',
he vertical text alignment of the text that covers the animated GIF
tBaseline': 'bottom',
he X (horizontal) Coordinate of the text that covers the animated GIF (only use this if the default textAlign and textBaseline options don't work for you)
tXCoordinate': null,
he Y (vertical) Coordinate of the text that covers the animated GIF (only use this if the default textAlign and textBaseline options don't work for you)
tYCoordinate': null,
allback function that provides the current progress of the current image
gressCallback': function(captureProgress) {},
allback function that is called when the current image is completed
pleteCallback': function() {},
ow many pixels to skip when creating the palette. Default is 10. Less is better, but slower.
ote: By adjusting the sample interval, you can either produce extremely high-quality images slowly, or produce good images in reasonable times.
ith a sampleInterval of 1, the entire image is used in the learning phase, while with an interval of 10,
pseudo-random subset of 1/10 of the pixels are used in the learning phase. A sampling factor of 10 gives a
ubstantial speed-up, with a small quality penalty.
pleInterval': 10,
ow many web workers to use to process the animated GIF frames. Default is 2.
Workers': 2,
hether or not you would like to save all of the canvas image binary data from your created GIF
ote: This is particularly useful for when you want to re-use a GIF to add text to later
eRenderingContexts': false,
xpects an array of canvas image data
ote: If you set the saveRenderingContexts option to true, then you get the savedRenderingContexts
in the createGIF callback function
edRenderingContexts': []
hen existing images or videos are requested used, we set a CORS attribute on the request.
ptions are 'Anonymous', 'use-credentials', or a falsy value (like '') to not set a CORS attribute.
ssOrigin': 'Anonymous'
Please send all PR's to the dev branch.
If your PR is a code change:
npm installsrc/modules directory.sudo npm install gulp -ggulpdist/gifshot.js and dist/gifshot.min.js and that no unit tests are failing.Note: There is a gulp watch task set up that will automatically build, test, and minify gifshot whenever a module inside of the src/modules directory is changed. We recommend using it.
gifshot would not have been possible without the help/inspiration of the following libraries/awesome people:
An image quantization algorithm to reduce the number of colors required to represent the image (thus decreasing the file size). This script was ported from C into Java by Kevin Weiner and then to ActionScript 3 by Thibault Imbert, and to JavaScript by antimatter15, and fixed, patched and revised by sole.
Copyright (c) Anthony Dekker 1994 - MIT License
Encodes a GIF into the GIF89 spec
Copyright (c) Dean McNamee, 2013 - MIT License
A module wrapping WebRTC's getUserMedia
Uses web workers and encoding/decoding algorithms to produce a Base 64 data URI image
Jen Fong-Adwent's (aka Edna Piranha) Meatspace Chat
