Get started with gifshot CDN

MIT licensed

Library: Captures, saves animated GIFs from HTML5 videos.

Tags:
  • gif
  • animated gif
  • WebRTC
  • getUserMedia

Stable version

Copied!

How to start using gifshot CDN


<!DOCTYPE html>
<html>
<head>
    <title>Get started with gifshot CDN - cdnhub.io</title>
    <style>
        #gif-container {
            width: 300px;
            height: 300px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <button id="capture">Capture Gif</button>
    <div id="gif-container">
        <img src="https://example.com/image.gif" alt="Example Gif" width="300" height="300">
    </div>
    <script src="https://cdn.cdnhub.io/gifshot/0.4.5/gifshot.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const captureButton = document.getElementById('capture');
            const gifContainer = document.getElementById('gif-container');

            captureButton.addEventListener('click', () => {
                gifshot(gifContainer, {
                    quality: 10,
                    width: 300,
                    height: 300,
                    type: 'gif'
                })
                    .then(blob => {
                        const url = URL.createObjectURL(blob);
                        const a = document.createElement('a');
                        a.href = url;
                        a.download = 'output.gif';
                        a.click();
                    })
                    .catch(error => {
                        console.error(error);
                    });
            });
        });
    </script>
</body>
</html>

All versions