glitch images
+
diff --git a/scripts/lib/getusermedia.js b/scripts/lib/getusermedia.js
new file mode 100644
index 0000000..f3c7780
--- /dev/null
+++ b/scripts/lib/getusermedia.js
@@ -0,0 +1,10 @@
+;(function ()
+{
+ navigator.getUserMedia = (
+ navigator.getUserMedia ||
+ navigator.webkitGetUserMedia ||
+ navigator.mozGetUserMedia ||
+ navigator.msGetUserMedia ||
+ false
+ );
+})()
\ No newline at end of file
diff --git a/scripts/main.js b/scripts/main.js
index 6182192..d72492c 100644
--- a/scripts/main.js
+++ b/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 )
diff --git a/scripts/src/cam.js b/scripts/src/cam.js
new file mode 100644
index 0000000..eb525e5
--- /dev/null
+++ b/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
+ };
+ }
+);
\ No newline at end of file
diff --git a/scripts/src/image.js b/scripts/src/image.js
index c383680..14f8b1c 100644
--- a/scripts/src/image.js
+++ b/scripts/src/image.js
@@ -24,6 +24,11 @@ define(
function imageLoaded()
{
signals['image-loaded'].dispatch( image );
+
+ if ( initialized ) {
+ signals['close-intro'].dispatch();
+ }
+
initialized = true;
}
diff --git a/styles/main.css b/styles/main.css
index 9593301..08dc8a5 100644
--- a/styles/main.css
+++ b/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;