add webcam support

index.html

@@ -11,6 +11,7 @@
 		<div class="nav-wrapper dark-bg">
 			<div class="export-wrapper center">
 				<h1 class="headline">glitch images</h1>
+				<button id="cam-button" class="button" title="take photo with you web cam">take photo</button>
 				<button id="import-button" class="button" title="open image from your computer">open image</button>
 				<input type="file" id="import-input" accept="image/*" />
 				<button id="export-button" class="button" title="save image to your computer">download image</button>

scripts/lib/getusermedia.js

@@ -0,0 +1,10 @@
+;(function ()
+{
+	navigator.getUserMedia = (
+		navigator.getUserMedia ||
+		navigator.webkitGetUserMedia ||
+		navigator.mozGetUserMedia ||
+		navigator.msGetUserMedia ||
+		false
+	);
+})()

scripts/main.js

@@ -20,6 +20,7 @@ require(
 		'src/random-button',
 		'src/upload-imgur',
 		'src/intro',
+		'src/cam',
 		'util/feature-test',
 		'lib/signals-1.0.0'
 	],
@@ -34,6 +35,7 @@ require(
 		random_button,
 		imgur,
 		intro,
+		cam,
 		testFeatures,
 		Signal
 	)
@@ -65,6 +67,7 @@ require(
 			file.init( shared );
 			imgur.init( shared );
 			intro.init( shared );
+			cam.init( shared );
 		}
 
 		function showError( required_features )

scripts/src/cam.js

@@ -0,0 +1,113 @@
+/*global define*/
+define(
+	[ 'lib/getusermedia' ],
+	function ()
+	{
+		var cam_button_el = document.getElementById( 'cam-button' );
+		var video_wrapper_el;
+		var video_el;
+		var stream;
+
+		var canvas_el;
+		var ctx;
+
+		var signals;
+
+		function init ( shared ) {
+
+			signals = shared.signals;
+
+			if ( navigator.getUserMedia ) {
+				cam_button_el.classList.add( 'is-supported' );
+				cam_button_el.addEventListener( 'click', camButtonClicked );
+
+				video_wrapper_el = document.createElement( 'div' );
+				video_wrapper_el.classList.add( 'cam-wrapper' );
+
+				var take_picture_el = document.createElement( 'div' );
+				take_picture_el.textContent = 'Take Picture';
+				take_picture_el.classList.add( 'take-picture' );
+				take_picture_el.classList.add( 'button' );
+				take_picture_el.addEventListener( 'click', videoClicked );
+
+				video_wrapper_el.appendChild( take_picture_el );
+
+				video_el = document.createElement( 'video' );
+				video_el.classList.add( 'cam' );
+
+				video_el.addEventListener( 'click', videoClicked );
+				video_wrapper_el.appendChild( video_el );
+
+				document.body.appendChild( video_wrapper_el );
+				
+				canvas_el = document.createElement( 'canvas' );
+			}
+		}
+
+		function camButtonClicked ( event ) {
+			var cam_options = { video: true };
+
+			navigator.getUserMedia( cam_options, gotCamData, failed );
+		}
+
+		function gotCamData ( media_stream ) {
+			var source;
+
+			if ( window.webkitURL )
+			{
+				source = window.URL.createObjectURL( media_stream );
+			}
+
+			else
+			{
+				source = media_stream;
+			}
+
+			if ( video_el.mozSrcObject !== undefined )
+			{
+				video_el.mozSrcObject = source;
+			}
+
+			else
+			{
+				video_el.src = source;
+			}
+
+			stream = media_stream;
+
+			video_el.play();
+			video_el.style.display = 'block';
+
+			video_wrapper_el.classList.add( 'is-active' );
+
+			
+
+			canvas_el.width = 640;
+			canvas_el.height = 480;
+			ctx = canvas_el.getContext( '2d' );
+		}
+
+		function failed () {
+			console.log( 'sorry, but there was an error accessing you camera...' );
+		}
+
+		function videoClicked ( event ) {
+			ctx.translate( canvas_el.width, 0 );
+			ctx.scale( -1, 1 );
+			ctx.drawImage( video_el, 0, 0 );
+
+			var data = ctx.getImageData( 0, 0, canvas_el.width, canvas_el.height );
+			var image_src = canvas_el.toDataURL( 'image/png' );
+
+			video_wrapper_el.classList.remove( 'is-active' );
+
+			signals['set-new-src'].dispatch( image_src );
+
+			setTimeout( function() { stream.stop(); }, 500 );
+		}
+
+		return {
+			init: init
+		};
+	}
+);

scripts/src/image.js

@@ -24,6 +24,11 @@ define(
 		function imageLoaded()
 		{
 			signals['image-loaded'].dispatch( image );
+
+			if ( initialized ) {
+				signals['close-intro'].dispatch();
+			}
+
 			initialized = true;
 		}
 

styles/main.css

@@ -337,6 +337,42 @@ a:hover {
 	max-width: 100%;
 }
 
+.cam-wrapper {
+	width: 100%;
+	height: 0;
+	background-color: rgba(255, 255, 255, 0.5);
+	position: absolute;
+	z-index: 3;
+	transition: all 0.4s;
+	top: 60px;
+	overflow: hidden;
+	opacity: 0;
+}
+
+.cam-wrapper.is-active {
+	height: 100%;
+	opacity: 1;
+}
+
+.take-picture {
+	position: absolute;
+	top: 450px;
+	left: 50%;
+	margin-left: -43px;
+	cursor: pointer;
+	z-index: 3;
+}
+
+.cam {
+	display: block;
+	width: 100%;
+	max-width: 640px;
+	margin-left: auto;
+	margin-right: auto;
+	margin-top: 68px;
+	transform: scalex(-1);
+}
+
 @media all and (max-width: 860px) {
 	.nav-wrapper {
 		text-align: center;