https://github.com/kettek/mediastream-gifrecorder

JavaScript MediaRecorder-like class for recording HTML5 MediaStreams to GIFs
https://github.com/kettek/mediastream-gifrecorder

gif javascript mediarecorder mediastream

Last synced: 3 months ago
JSON representation

JavaScript MediaRecorder-like class for recording HTML5 MediaStreams to GIFs

• Host: GitHub
• URL: https://github.com/kettek/mediastream-gifrecorder
• Owner: kettek
• License: mit
• Created: 2019-04-22T16:41:51.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2024-07-25T22:55:14.000Z (over 1 year ago)
• Last Synced: 2024-07-26T01:16:35.349Z (over 1 year ago)
• Topics: gif, javascript, mediarecorder, mediastream
• Language: JavaScript
• Size: 955 KB
• Stars: 10
• Watchers: 3
• Forks: 2
• Open Issues: 8
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# MediaStream-GifRecorder

This library provides an implementation of the [MediaRecorder](https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder) interface for recording MediaStreams, such as those from a webcam or desktop capture, to GIFs.

## Basic Usage

The following will record a 5 seconds GIF at 5 frames per second.

```

navigator.mediaDevices.getUserMedia({ video: true })

.then((stream) => {

  document.getElementById('preview-video').srcObject = stream

  let recorder = new GifRecorder(stream, {

    videoFramesPerSecond: 5,

    videoQuality: 10,

    videoDithering: false,

    // optional source and destination rectangles

    sx: 200,

    sy: 50,

    swidth: 1920,

    sheight: 1080,

    dx: 0,

    dy: 0,

    dwidth: 1080,

    dheight: 720,

  })

  recorder.addEventListener('dataavailable', (e) => {

    document.getElementById('preview-gif').src = URL.createObjectURL(e.data)

  })

  recorder.start()

  setTimeout(() => {

    recorder.stop()

  }, 5000)

})

.catch((err) => {

  console.log(err)

}

```