michaelcpuckett · November 29, 2014 23:12
diff --git a/gif-maker.htm b/gif-maker.htm
 <!DOCTYPE html5>
 <html>
 <head>
 <style>
    * { box-sizing: border-box; }
    img { max-width: 100%; }
    canvas { visibility: hidden; position: absolute; pointer-events: none; z-index: -1; }
 </style>
 </head>
 <body>
    <!-- MAKE SURE TO RUN THIS IS AS LOCALHOST -->
    <section class="stage"></section>
 <script>
 function ImageSequencer (parentEl) {
    this.imageSet = [];

    this.videoEl = document.createElement('video');
    this.videoEl.setAttribute('autoplay', 'true');
    this.videoEl.height = 500; // TODO
    this.videoEl.width = 500; // TODO

    this.canvasEl = document.createElement('canvas');

    parentEl.appendChild(this.videoEl);
    parentEl.appendChild(this.canvasEl);

    this.handlePermission(function () {
        this.emit('ready');
    }.bind(this));
 }

 ImageSequencer.prototype.matchDimensions = function () {
    this.canvasEl.setAttribute('width', this.videoEl.videoWidth);
    this.canvasEl.setAttribute('height', this.videoEl.videoHeight);
    return this;
 };

 ImageSequencer.prototype.drawImage = function () {
    var canvas = this.canvasEl.getContext('2d');
    this.matchDimensions();
    canvas.drawImage(this.videoEl, 0, 0);
    return this;
 };

 ImageSequencer.prototype.takeImage = function () {
    this.drawImage();
    this.imageSet.push(this.canvasEl.toDataURL());
    return this;
 };

 ImageSequencer.prototype.handlePermission = function (callback) {
    return this._requestPermission(function (stream) {
        this._handleStream(stream);
        callback();
    }.bind(this));
 };

 ImageSequencer.prototype._requestPermission = function (callback) {
    navigator.webkitGetUserMedia({ // TODO webkit
            'video': true
        }, function (stream) {
            callback(stream);
        }, function (error) {
            throw new Error(error);
        });
 };

 ImageSequencer.prototype._handleStream = function (stream) {
    this.stream = stream;
    this.videoEl.setAttribute('src', window.webkitURL.createObjectURL(stream)); // TODO webkit
 };

 ImageSequencer.prototype.on = function (ev, callback) {
    this._on = this._on || {};
    this._on[ev] = this._on[ev] || [];
    this._on[ev].push(callback);
 };

 ImageSequencer.prototype.emit = function (ev, data) {
    this._on[ev].forEach(function (fn) {
        fn(data);
    });
 };

 ImageSequencer.prototype.cleanup = function () {
    this.videoEl.parentNode.removeChild(this.videoEl);
    this.canvasEl.parentNode.removeChild(this.canvasEl);
    if (this.stream && this.stream.stop) {
        this.stream.stop();
    }
 };

 ImageSequencer.prototype.getImages = function () {
    return this.imageSet;
 };

 ImageSequencer.prototype.takeSequentialImages = function (qty, interval, callback) {
    var imageSequencer = this;
    qty = qty || 5;
    interval = interval || 200;
    (function () {
        var timerCounter = 0,
            timer = setInterval(function () {
                imageSequencer.takeImage();
                timerCounter++;
                if (timerCounter >= qty) {
                    clearTimeout(timer);
                    if (callback && typeof callback === 'function') {
                        callback();
                    }
                }
            }, interval);
    }());
 };
 </script>
 <script>
 /* MAKE SURE TO RUN THIS AS LOCALHOST */
 (function () {
    var stageEl = document.querySelectorAll('.stage')[0],
        buttonEl = document.createElement('button'),
        imageSequencer = new ImageSequencer(stageEl);

    imageSequencer.on('ready', function () {
        buttonEl.removeAttribute('disabled');
    });

    buttonEl.setAttribute('disabled', 'disabled');
    buttonEl.innerText = 'Take Photo Sequence';
    stageEl.appendChild(buttonEl);

    buttonEl.addEventListener('click', function () {
        imageSequencer.takeSequentialImages(5, 200, function () {
            imageSequencer.cleanup();
            console.log(imageSequencer.getImages());
            // gifly.makeGif(imageSequencer.getImages()); // TODO
        });
    });
 }());
 </script>
 </body>
 </html>
	<!DOCTYPE html5>
	<html>
	<head>
	<style>
	* { box-sizing: border-box; }
	img { max-width: 100%; }
	canvas { visibility: hidden; position: absolute; pointer-events: none; z-index: -1; }
	</style>
	</head>
	<body>
	<!-- MAKE SURE TO RUN THIS IS AS LOCALHOST -->
	<section class="stage"></section>
	<script>
	function ImageSequencer (parentEl) {
	this.imageSet = [];

	this.videoEl = document.createElement('video');
	this.videoEl.setAttribute('autoplay', 'true');
	this.videoEl.height = 500; // TODO
	this.videoEl.width = 500; // TODO

	this.canvasEl = document.createElement('canvas');

	parentEl.appendChild(this.videoEl);
	parentEl.appendChild(this.canvasEl);

	this.handlePermission(function () {
	this.emit('ready');
	}.bind(this));
	}

	ImageSequencer.prototype.matchDimensions = function () {
	this.canvasEl.setAttribute('width', this.videoEl.videoWidth);
	this.canvasEl.setAttribute('height', this.videoEl.videoHeight);
	return this;
	};

	ImageSequencer.prototype.drawImage = function () {
	var canvas = this.canvasEl.getContext('2d');
	this.matchDimensions();
	canvas.drawImage(this.videoEl, 0, 0);
	return this;
	};

	ImageSequencer.prototype.takeImage = function () {
	this.drawImage();
	this.imageSet.push(this.canvasEl.toDataURL());
	return this;
	};

	ImageSequencer.prototype.handlePermission = function (callback) {
	return this._requestPermission(function (stream) {
	this._handleStream(stream);
	callback();
	}.bind(this));
	};

	ImageSequencer.prototype._requestPermission = function (callback) {
	navigator.webkitGetUserMedia({ // TODO webkit
	'video': true
	}, function (stream) {
	callback(stream);
	}, function (error) {
	throw new Error(error);
	});
	};

	ImageSequencer.prototype._handleStream = function (stream) {
	this.stream = stream;
	this.videoEl.setAttribute('src', window.webkitURL.createObjectURL(stream)); // TODO webkit
	};

	ImageSequencer.prototype.on = function (ev, callback) {
	this._on = this._on \|\| {};
	this._on[ev] = this._on[ev] \|\| [];
	this._on[ev].push(callback);
	};

	ImageSequencer.prototype.emit = function (ev, data) {
	this._on[ev].forEach(function (fn) {
	fn(data);
	});
	};

	ImageSequencer.prototype.cleanup = function () {
	this.videoEl.parentNode.removeChild(this.videoEl);
	this.canvasEl.parentNode.removeChild(this.canvasEl);
	if (this.stream && this.stream.stop) {
	this.stream.stop();
	}
	};

	ImageSequencer.prototype.getImages = function () {
	return this.imageSet;
	};

	ImageSequencer.prototype.takeSequentialImages = function (qty, interval, callback) {
	var imageSequencer = this;
	qty = qty \|\| 5;
	interval = interval \|\| 200;
	(function () {
	var timerCounter = 0,
	timer = setInterval(function () {
	imageSequencer.takeImage();
	timerCounter++;
	if (timerCounter >= qty) {
	clearTimeout(timer);
	if (callback && typeof callback === 'function') {
	callback();
	}
	}
	}, interval);
	}());
	};
	</script>
	<script>
	/* MAKE SURE TO RUN THIS AS LOCALHOST */
	(function () {
	var stageEl = document.querySelectorAll('.stage')[0],
	buttonEl = document.createElement('button'),
	imageSequencer = new ImageSequencer(stageEl);

	imageSequencer.on('ready', function () {
	buttonEl.removeAttribute('disabled');
	});

	buttonEl.setAttribute('disabled', 'disabled');
	buttonEl.innerText = 'Take Photo Sequence';
	stageEl.appendChild(buttonEl);

	buttonEl.addEventListener('click', function () {
	imageSequencer.takeSequentialImages(5, 200, function () {
	imageSequencer.cleanup();
	console.log(imageSequencer.getImages());
	// gifly.makeGif(imageSequencer.getImages()); // TODO
	});
	});
	}());
	</script>
	</body>
	</html>