В последнее время гифка ниже очень популярна у нас.

Поэтому я пытаюсь написать инструмент для записи видео и создания GIF в браузерах. Демонстрационный корпус здесь:

Как это работает

Gif.js — это библиотека JavaScript для кодирования скриншота холста в gif. Вы можете увидеть простое использование ниже:

var gif = new GIF({
  workers: 2,
  quality: 10
});

// add an image element
gif.addFrame(imageElement);

// or a canvas element
gif.addFrame(canvasElement, {delay: 200});

// or copy the pixels from a canvas context
gif.addFrame(ctx, {copy: true});

gif.on('finished', function(blob) {
  window.open(URL.createObjectURL(blob));
});

gif.render();

А daycaca помогает мне преобразовать источник любого типа (элемент изображения / элемент видео / объект файла / код base64) в источник изображения.

import daycaca from 'daycaca';
// src specify an image src (url or base64)
daycaca.base64(videoEle (data) => {
  // your code here
});

И нам нужно использовать setInterval (возможно, setTimeout лучше), чтобы записать снимок экрана и добавить его в задачи gif.

const intvalTime = Math.ceil(1000 / this.options.fps)
if (!this._startShotTime) {
  this._startShotTime = (new Date).getTime()
}
this._intval = window.setInterval(() => {
// 待优化
  this._startShotAnimation()
  daycaca.base64(this.video, (source, canvas) => {
    const time = (new Date).getTime()
    if (time — this._startShotTime > options._duration * 1000) {
      this._stopScreentshot(options)
      return
    }
    this._gif.addFrame(canvas, {delay: intvalTime})
  })
}, intvalTime)

Теперь мне нужно представить библиотеку core-video-to-gif.

НПМ

$ npm install core-video-to-gif --save

CDN

<script src="./dist/core-video-to-gif.min.js"></script>
const v2g = new CoreVideoToGif({
    // specify the video element
    el: document.querySelector('video')
})
v2g.shot({
    // options,
    start: 5, // ms
    end: 8
}, (result) => {
    // ...
    image.src = result
})

Параметры

API

выстрел (параметры, обратный вызов)

Вы можете использовать этот метод для получения скриншотов видео.

// get current screenshot
v2g.shot( (result) => {
   // ...
   image.src = result
})
// get screenshot from 5s - 8s
v2g.shot({
   // options,
   start: 5, // ms
   end: 8
}, (result) => {
   // ...
   image.src = result
})

загрузить (параметры, обратный вызов)

API все еще находится в черновике. Не работа!!!

Гитхаб

Ссылка