@loaders.gl/video 4.2.0-alpha.4 → 4.2.0-alpha.5

package/dist/gif-builder.js

@@ -1,106 +1,139 @@
+// loaders.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+// A GIFBuilder based on the gifshot module
+// @ts-nocheck
 import { assert } from "./lib/utils/assert.js";
-import gifshot from "./lib/gifshot/gifshot.js";
+import gifshot from "./lib/gifshot/gifshot.js"; // TODO - load dynamically to avoid bloating
+// These are gifshot module options
 const GIF_BUILDER_OPTIONS = {
-  source: 'images',
-  width: 200,
-  height: 200,
-  crossOrigin: 'Anonymous',
-  progressCallback: captureProgress => {},
-  completeCallback: () => {},
-  numWorkers: 2,
-  sampleInterval: 10,
-  interval: 0.1,
-  offset: null,
-  numFrames: 10,
-  frameDuration: 1,
-  filter: '',
-  waterMark: null,
-  waterMarkHeight: null,
-  waterMarkWidth: null,
-  waterMarkXCoordinate: 1,
-  waterMarkYCoordinate: 1,
-  text: '',
-  showFrameText: true,
-  fontWeight: 'normal',
-  fontSize: '16px',
-  minFontSize: '10px',
-  resizeFont: false,
-  fontFamily: 'sans-serif',
-  fontColor: '#ffffff',
-  textAlign: 'center',
-  textBaseline: 'bottom',
-  textXCoordinate: null,
-  textYCoordinate: null,
-  webcamVideoElement: null,
-  keepCameraOn: false,
-  cameraStream: null,
-  saveRenderingContexts: false,
-  savedRenderingContexts: []
+    source: 'images',
+    width: 200, // Desired width of the image
+    height: 200, // Desired height of the image
+    crossOrigin: 'Anonymous', // Options are 'Anonymous', 'use-credentials', or a falsy value to not set a CORS attribute.
+    // CALLBACKS
+    progressCallback: (captureProgress) => { }, // Callback that provides the current progress of the current image
+    completeCallback: () => { }, // Callback function that is called when the current image is completed
+    // QUALITY SETTINGS
+    numWorkers: 2, // how many web workers to use to process the animated GIF frames. Default is 2.
+    sampleInterval: 10, // pixels to skip when creating the palette. Default is 10. Less is better, but slower.
+    interval: 0.1, // The amount of time (in seconds) to wait between each frame capture
+    offset: null, // The amount of time (in seconds) to start capturing the GIF (only for HTML5 videos)
+    numFrames: 10, // The number of frames to use to create the animated GIF. Note: Each frame is captured every 100 milliseconds of a video and every ms for existing images
+    frameDuration: 1, // The amount of time (10 = 1s) to stay on each frame
+    // CSS FILTER OPTIONS
+    filter: '', // CSS filter that will be applied to the image (eg. blur(5px))
+    // WATERMARK OPTIONS
+    waterMark: null, // If an image is given here, it will be stamped on top of the GIF frames
+    waterMarkHeight: null, // Height of the waterMark
+    waterMarkWidth: null, // Height of the waterMark
+    waterMarkXCoordinate: 1, // The X (horizontal) Coordinate of the watermark image
+    waterMarkYCoordinate: 1, // The Y (vertical) Coordinate of the watermark image
+    // TEXT OPTIONS
+    text: '', // The text that covers the animated GIF
+    showFrameText: true, // If frame-specific text is supplied with the image array, you can force to not be displayed
+    fontWeight: 'normal', // The font weight of the text that covers the animated GIF
+    fontSize: '16px', // The font size of the text that covers the animated GIF
+    minFontSize: '10px', // The minimum font size of the text that covers the animated GIF
+    resizeFont: false, // Whether or not the animated GIF text will be resized to fit within the GIF container
+    fontFamily: 'sans-serif', // The font family of the text that covers the animated GIF
+    fontColor: '#ffffff', // The font color of the text that covers the animated GIF
+    textAlign: 'center', // The horizontal text alignment of the text that covers the animated GIF
+    textBaseline: 'bottom', // The vertical text alignment of the text that covers the animated GIF
+    textXCoordinate: null, // The X (horizontal) Coordinate of the text that covers the animated GIF
+    textYCoordinate: null, // The Y (vertical) Coordinate of the text that covers the animated GIF
+    // ADVANCED OPTIONS
+    // WEBCAM CAPTURE OPTIONS
+    webcamVideoElement: null, // You can pass an existing video element to use for the webcam GIF creation process,
+    keepCameraOn: false, // Whether or not you would like the user's camera to stay on after the GIF is created
+    cameraStream: null, // Expects a cameraStream Media object
+    // CANVAS OPTIMIZATION OPTIONS
+    saveRenderingContexts: false, // Whether or not you would like to save all of the canvas image binary data
+    savedRenderingContexts: [] // Array of canvas image data
 };
 export default class GIFBuilder {
-  static get properties() {
-    return {
-      id: 'gif',
-      name: 'GIF',
-      extensions: ['gif'],
-      mimeTypes: ['image/gif'],
-      builder: GIFBuilder,
-      options: GIF_BUILDER_OPTIONS
-    };
-  }
-  constructor(options) {
-    this.options = {
-      ...options
-    };
-    this.source = options.source;
-    delete options.source;
-    this.files = [];
-    this.gifshot = gifshot;
-  }
-  async initialize(options) {}
-  async add(file) {
-    await this.initialize();
-    this.files.push(file);
-  }
-  async build() {
-    await this.initialize();
-    this._cleanOptions(this.options);
-    switch (this.source) {
-      case 'images':
-        this.options.images = this.files;
-        break;
-      case 'video':
-        this.options.video = this.files;
-        break;
-      case 'webcam':
-        assert(this.files.length === 0);
-        break;
-      default:
-        throw new Error('GIFBuilder: invalid source');
+    static get properties() {
+        return {
+            id: 'gif',
+            name: 'GIF',
+            extensions: ['gif'],
+            mimeTypes: ['image/gif'],
+            builder: GIFBuilder,
+            options: GIF_BUILDER_OPTIONS
+        };
     }
-    return await this._createGIF();
-  }
-  async _createGIF() {
-    return new Promise((resolve, reject) => {
-      this.gifshot.createGIF(this.options, result => {
-        if (result.error) {
-          reject(result.errorMsg);
-          return;
+    constructor(options) {
+        this.options = { ...options };
+        this.source = options.source;
+        delete options.source;
+        // Allow files to be added
+        this.files = [];
+        // Expose the gifshot module so that the full gifshot API is available to apps (Experimental)
+        this.gifshot = gifshot;
+    }
+    async initialize(options) {
+        // Expose the gifshot module so that the full gifshot API is available to apps (Experimental)
+        // this.gifshot = await loadGifshotModule(options);
+    }
+    async add(file) {
+        await this.initialize();
+        this.files.push(file);
+    }
+    async build() {
+        await this.initialize();
+        this._cleanOptions(this.options);
+        switch (this.source) {
+            case 'images':
+                this.options.images = this.files;
+                break;
+            case 'video':
+                this.options.video = this.files;
+                break;
+            case 'webcam':
+                assert(this.files.length === 0);
+                break;
+            default:
+                throw new Error('GIFBuilder: invalid source');
+        }
+        return await this._createGIF();
+    }
+    // PRIVATE
+    async _createGIF() {
+        return new Promise((resolve, reject) => {
+            this.gifshot.createGIF(this.options, (result) => {
+                // 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)
+                if (result.error) {
+                    reject(result.errorMsg);
+                    return;
+                }
+                // image - Base 64 image
+                resolve(result.image);
+                // var image = obj.image,
+                // animatedImage = document.createElement('img');
+                // animatedImage.src = image;
+                // document.body.appendChild(animatedImage);
+            });
+        });
+    }
+    // Remove some gifshot options
+    _cleanOptions(options) {
+        if (options.video || options.images || options.gifWidth || options.gifHeight) {
+            console.warn('GIFBuilder: ignoring options'); // eslint-disable-line
         }
-        resolve(result.image);
-      });
-    });
-  }
-  _cleanOptions(options) {
-    if (options.video || options.images || options.gifWidth || options.gifHeight) {
-      console.warn('GIFBuilder: ignoring options');
+        // We control these through options.source instead
+        delete options.video;
+        delete options.images;
+        // Use width/height props (to standardize across builders)
+        options.gifWidth = options.width;
+        options.gifHeight = options.height;
+        delete options.width;
+        delete options.height;
     }
-    delete options.video;
-    delete options.images;
-    options.gifWidth = options.width;
-    options.gifHeight = options.height;
-    delete options.width;
-    delete options.height;
-  }
 }
-//# sourceMappingURL=gif-builder.js.map

package/dist/index.cjs

@@ -17,15 +17,15 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// src/index.ts
-var src_exports = {};
-__export(src_exports, {
+// dist/index.js
+var dist_exports = {};
+__export(dist_exports, {
   GIFBuilder: () => GIFBuilder,
   VideoLoader: () => VideoLoader
 });
-module.exports = __toCommonJS(src_exports);
+module.exports = __toCommonJS(dist_exports);
 
-// src/lib/parsers/parse-video.ts
+// dist/lib/parsers/parse-video.js
 async function parseVideo(arrayBuffer) {
   const blob2 = new Blob([arrayBuffer]);
   const video = document.createElement("video");
@@ -33,8 +33,8 @@ async function parseVideo(arrayBuffer) {
   return video;
 }
 
-// src/video-loader.ts
-var VERSION = typeof __VERSION__ !== "undefined" ? __VERSION__ : "latest";
+// dist/video-loader.js
+var VERSION = true ? "4.2.0-alpha.4" : "latest";
 var EXTENSIONS = ["mp4"];
 var MIME_TYPES = ["video/mp4"];
 var DEFAULT_LOADER_OPTIONS = {
@@ -52,14 +52,14 @@ var VideoLoader = {
   options: DEFAULT_LOADER_OPTIONS
 };
 
-// src/lib/utils/assert.ts
+// dist/lib/utils/assert.js
 function assert(condition, message) {
   if (!condition) {
     throw new Error(message);
   }
 }
 
-// src/lib/gifshot/gifshot.ts
+// dist/lib/gifshot/gifshot.js
 var document2 = globalThis.document || {};
 var utils = {
   URL: globalThis.URL || globalThis.webkitURL || globalThis.mozURL || globalThis.msURL,
@@ -1523,17 +1523,7 @@ var screenShot = {
             sourceY = 0;
           }
           context.filter = filter;
-          context.drawImage(
-            videoElement,
-            sourceX,
-            sourceY,
-            sourceWidth,
-            sourceHeight,
-            0,
-            0,
-            gifWidth,
-            gifHeight
-          );
+          context.drawImage(videoElement, sourceX, sourceY, sourceWidth, sourceHeight, 0, 0, gifWidth, gifHeight);
           finishCapture();
         } catch (e) {
           if (e.name === "NS_ERROR_NOT_AVAILABLE") {
@@ -1673,9 +1663,7 @@ var videoStream = {
     if (existingVideo2) {
       if (utils.isString(existingVideo2)) {
         videoElement.src = existingVideo2;
-        videoElement.innerHTML = `<source src="${existingVideo2}" type="video/${utils.getExtension(
-          existingVideo2
-        )}" />`;
+        videoElement.innerHTML = `<source src="${existingVideo2}" type="video/${utils.getExtension(existingVideo2)}" />`;
       } else if (existingVideo2 instanceof Blob) {
         try {
           videoElement.src = utils.URL.createObjectURL(existingVideo2);
@@ -1754,20 +1742,16 @@ var videoStream = {
         completedCallback
       });
     } else {
-      utils.getUserMedia(
-        {
-          video: true
-        },
-        function(stream2) {
-          videoStream.stream({
-            videoElement,
-            cameraStream: stream2,
-            streamedCallback,
-            completedCallback
-          });
-        },
-        errorCallback
-      );
+      utils.getUserMedia({
+        video: true
+      }, function(stream2) {
+        videoStream.stream({
+          videoElement,
+          cameraStream: stream2,
+          streamedCallback,
+          completedCallback
+        });
+      }, errorCallback);
     }
   },
   startVideoStreaming: function startVideoStreaming(callback) {
@@ -1948,19 +1932,16 @@ function existingWebcam() {
     });
     return;
   }
-  videoStream.startVideoStreaming(
-    function() {
-      const obj2 = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-      obj2.options = options || {};
-      createAndGetGIF(obj2, callback);
-    },
-    {
-      lastCameraStream,
-      callback,
-      webcamVideoElement,
-      crossOrigin: options.crossOrigin
-    }
-  );
+  videoStream.startVideoStreaming(function() {
+    const obj2 = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    obj2.options = options || {};
+    createAndGetGIF(obj2, callback);
+  }, {
+    lastCameraStream,
+    callback,
+    webcamVideoElement,
+    crossOrigin: options.crossOrigin
+  });
 }
 function createGIF(userOptions, callback) {
   callback = utils.isFunction(userOptions) ? userOptions : callback;
@@ -2030,7 +2011,7 @@ var API = {
 };
 var gifshot_default = API;
 
-// src/gif-builder.ts
+// dist/gif-builder.js
 var GIF_BUILDER_OPTIONS = {
   source: "images",
   width: 200,
@@ -2179,3 +2160,4 @@ var GIFBuilder = class {
     delete options.height;
   }
 };
+//# sourceMappingURL=index.cjs.map