Merge pull request #86 from FAC10/video-input

Use input tags to record media
FAC10 · May 25, 2017 · 5ba7d8f · 5ba7d8f
2 parents 9e24b0c + bf0a9d9
commit 5ba7d8f
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 14 deletions.
diff --git a/home.html b/home.html
@@ -33,7 +33,7 @@
       <div class="modal-content">
         <span class="close">&times;</span>
         <div class="modal-content__content">
-          <img class="modal-content__img" src="assets/memory.jpg" alt="A happy memory">
+          <img class="modal-content__img" src="public/assets/memory.jpg" alt="A happy memory">
           <p class = 'memoryText'>Cats are so funny! I love them!</p>
           <div class='modal-content__heart-container'><i class="fa fa-heart-o modal-content__heart" aria-hidden="true"></i></div>
         </div>
@@ -58,8 +58,9 @@
   <a href="#" class="menu-item normal" id='clock'> <i class="fa fa-clock-o"></i> </a>
   <a href="#" class="menu-item normal" id='cog'> <i class="fa fa-cog"></i> </a>
 
-
-  <video class="video"></video>
+  <input class="record record--camera" type="file" accept="video/*" capture="environment">
+  <input class="record record--voice" type="file" accept="audio/*" capture>
+  <!-- <video class="video"></video> -->
 
 
 </nav>

diff --git a/assets/memory.jpg → public/assets/memory.jpg b/assets/memory.jpg → public/assets/memory.jpg
diff --git a/public/index.js b/public/index.js
@@ -619,26 +619,26 @@ $('#camera').on('click', () => {
   console.log('clicked');
   $('.menu-open:checked ~ #camera').removeClass('normal').addClass('wipe');
 
-  var errorCallback = function(e) {
-    console.log('Reeeejected!', e);
-  };
-
-  navigator.getUserMedia({video: true}, function(localMediaStream) {
-    document.querySelector('video').srcObject = localMediaStream;
-    document.querySelector('video').play();
-  }, errorCallback);
+  // var errorCallback = function(e) {
+  //   console.log('Reeeejected!', e);
+  // };
+  //
+  // navigator.getUserMedia({video: true}, function(localMediaStream) {
+  //   document.querySelector('video').srcObject = localMediaStream;
+  //   document.querySelector('video').play();
+  // }, errorCallback);
 
   setTimeout(function () {
     $('.menu-open:checked ~ #camera').addClass('finished');
       $('.menu-open-button, .hamburger').fadeIn().addClass('active');
-      $('video').show();
+      $('.record--camera').show();
   }, 1000);
   $('.menu-open:checked ~ #pencil, #microphone, #cog, #clock').fadeOut();
   $('.menu-open-button').fadeOut();
   $('.menu-open-button').on('click', () => {
     $('.menu-open:checked ~ #camera').removeClass('wipe').addClass('normal');
-    $('video').hide();
-    document.querySelector('video').srcObject = null;
+    $('.record--camera').hide();
+    // document.querySelector('video').srcObject = null;
     $('.menu-open:checked ~ #camera').removeClass('finished');
       $('.menu-open-button, .hamburger').removeClass('active');
         $('.menu-open:checked ~ #pencil, #microphone, #cog, #clock').fadeIn();
@@ -650,11 +650,13 @@ $('#microphone').on('click', () => {
   setTimeout(function () {
     $('.menu-open:checked ~ #microphone').removeClass('normal').addClass('finished');
       $('.menu-open-button, .hamburger').fadeIn().addClass('active');
+      $('.record--voice').show();
   }, 1000);
   $('.menu-open:checked ~ #pencil, #camera, #cog, #clock').fadeOut();
   $('.menu-open-button').fadeOut();
   $('.menu-open-button').on('click', () => {
     $('.menu-open:checked ~ #microphone').removeClass('wipe').addClass('normal');
+    $('.record--voice').hide();
     $('.menu-open:checked ~ #microphone').removeClass('finished');
       $('.menu-open-button, .hamburger').removeClass('active');
         $('.menu-open:checked ~ #pencil, #camera, #cog, #clock').fadeIn();

diff --git a/public/style.css b/public/style.css
@@ -962,6 +962,15 @@ input {
   right: 0;
 }
 
+.record {
+  display: none;
+  background: greenyellow;
+  width: 70%;
+  margin: 2em 15%;
+  position: absolute;
+  top: -368%;
+  right: 0;
+
 /*Settings*/
 
 .settings {