Add the audio tag to page

Shane-Casey-Kate/Jade-CSS-Conversion

@@ -0,0 +1,141 @@
+| @import url(http://fonts.googleapis.com/css?family=PT+Sans+Caption:400,700);
+| body {
+| background-color:white;
+| color: white;
+| font-size: 100%;
+| font-family: 'PT Sans Caption', sans-serif;
+| font-weight: 100;
+| }
+| h1 {
+| color:slategray;
+| font-weight:100;
+| text-align: center;
+| padding-bottom: 0.2em;
+| border-bottom: 1px solid silver;
+| }
+| form {
+| /*  border-top: 1px solid coral;*/
+| width: 552px;
+| margin: 40px auto;
+| /*  background-color: grey;*/
+| }
+| fieldset {
+| margin: auto;
+| width: 470px;
+| height: auto;
+| border: 1px solid #e5e5e5;
+| border-top: 0px solid #e5e5e5;
+| background: #fdfdfd;
+| padding: 40px;
+| background-color: lightgray;;
+| }
+| form div {
+| padding: 0 0 40px 0;
+| }
+| form label {
+| float: left;
+| width: 200px;
+| font-size: 1em;
+| color: slategray;
+| }
+| form label.mid {
+| line-height: 40px;
+| }
+| form input,
+| form select {
+| background: coral;
+| border: 2px solid #fff;
+| color: #fff;
+| font-family: 'PT Sans Caption', sans-serif;
+| font-size: 1em;
+| font-weight: 400;
+| height: 40px;
+| margin: 0;
+| padding: 0 10px;
+| width: 240px;
+| vertical-align: middle;
+| }
+| form input:hover,
+| form select:hover,
+| form textarea:hover {
+| border: 2px solid grey;
+| }
+| form input:focus,
+| form select:focus,
+| form textarea:focus {
+| border-color: silver;
+| outline: none;
+| }
+| form select {
+| float: left;
+| margin-bottom: 40px;
+| appearance: none;
+| width: 260px;
+| border-radius: 0;
+| }
+| form input.checkbox,
+| form input.radio {
+| margin: 0;
+| padding: 2px 0;
+| width: auto;
+| height: auto;
+| }
+| form input.button {
+| width: 270px;
+| height: 40px;
+| border: 0px solid #fff;
+| }
+| form textarea {
+| width: 240px;
+| height: 200px;
+| padding: 10px;
+| background: coral;
+| border: 2px solid #fff;
+| color: #fff;
+| }
+| form input.submit {
+| float: left;
+| margin-left: 200px;
+| width: 100px;
+| height: 40px;
+| color: #fff;
+| }
+| form input.submit:hover {
+| background: silver;
+| background: -webkit-linear-gradient(#1d9676, #01caa7);
+| background: -moz-linear-gradient(#1d9676, #01caa7);
+| background: -o-linear-gradient(#1d9676, #01caa7);
+| background: -ms-linear-gradient(#1d9676, #01caa7);
+| background: linear-gradient(#1d9676, #01caa7);
+| }
+| ::-webkit-input-placeholder { /* WebKit browsers */
+| color:white;
+| }
+| :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
+| color:white;
+| opacity:  1;
+| }
+| ::-moz-placeholder { /* Mozilla Firefox 19+ */
+| color:white;
+| opacity:  1;
+| }
+| :-ms-input-placeholder { /* Internet Explorer 10+ */
+| color:white;
+| }
+| .welcome {
+| background-color: slategray;
+| margin-top:1em;
+| margin-bottom:2em;
+| }
+| video {
+| margin-left:20%;
+| }
+| .site, h2 {
+| color:slategray;
+| text-size:0.2em;
+| font-weight: 100;
+| }
+| .canvas {
+| border 1px solid red;
+| float:left;
+| }

Shane-Casey-Kate/Jade-HTML Conversion

@@ -0,0 +1,47 @@
+!!! 5
+header
+  h1 Give Us Your Info
+main
+  section.welcome
+    video(poster='welcome-neon-sign.jpg', controls='')
+      source(src='https://developers.google.com/web/fundamentals/documentation/introduction-to-media/video/video/chrome.webm', type='video/webm')
+      source(src='https://developers.google.com/web/fundamentals/documentation/introduction-to-media/video/video/chrome.mp4', type='video/mp4')
+      p This browser does not support the video element.
+  form
+    fieldset
+      video#video(width='150', height='', autoplay='')
+      button#snap Add a Profile Picture
+      canvas#canvas(width='150', height='150')
+      div
+        label.mid(for='name') Username or Email:
+        input#name(type='text', name='name', value='', tabindex='1', placeholder='youremail@email.com')
+      div
+        label.mid(for='password') Password:
+        input#password(type='password', name='password', value='', tabindex='2', placeholder='password')
+      div
+        label(for='radio-choice-1') Male:
+        input#radio-choice-1.radio(type='radio', name='radio-choice', tabindex='5', value='choice-1')
+      div
+        label(for='radio-choice-2') Female:
+        input#radio-choice-2.radio(type='radio', name='radio-choice', tabindex='6', value='choice-2')
+      div
+        label.mid(for='select-choice-2') Country:
+        select#select-choice-2(name='extraoptions')
+          optgroup(label='1')
+            option(value='Choice 1') United States
+            option(value='Choice 2') Canada
+            option(value='Choice 3') United Kingdome
+          optgroup(label='2')
+            option(value='Choice 1') Country 1
+            option(value='Choice 2') Country 2
+            option(value='Choice 3') Country 3
+      div
+        label(for='textarea') Bio:
+        textarea#textarea(cols='40', rows='10', name='textarea', placeholder='tell us about yourself!')
+      div
+        label(for='check') Click the box if you agree to our termas and conditions:
+        input#check.checkbox(type='checkbox', name='check')
+      div
+        input.submit(type='submit', value='Sign Up')
+        audio#page_audio(src='Yakety_Sax_-_Benny_Hill.mp3', preload='auto')
+script(type='text/javascript', src='media.js')

Shane-Casey-Kate/Jade-HTML-Video Conversion

@@ -0,0 +1,7 @@
+!!! 5
+p Here is the audio
+p Here is the video
+video(poster='poster.jpg', controls='')
+  source(src='https://developers.google.com/web/fundamentals/documentation/introduction-to-media/video/video/chrome.webm', type='video/webm')
+  source(src='https://developers.google.com/web/fundamentals/documentation/introduction-to-media/video/video/chrome.mp4', type='video/mp4')
+  p This browser does not support the video element.

Shane-Casey-Kate/Jade-JS-Camera-Conversion

@@ -0,0 +1,33 @@
+| // Put event listeners into place
+| window.addEventListener("DOMContentLoaded", function() {
+| // Grab elements, create settings, etc.
+| var canvas = document.getElementById("canvas"),
+| context = canvas.getContext("2d"),
+| video = document.getElementById("video"),
+| videoObj = { "video": true },
+| errBack = function(error) {
+| console.log("Video capture error: ", error.code);
+| };
+| // Put video listeners into place
+| if(navigator.getUserMedia) { // Standard
+| navigator.getUserMedia(videoObj, function(stream) {
+| video.src = stream;
+| video.play();
+| }, errBack);
+| } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
+| navigator.webkitGetUserMedia(videoObj, function(stream){
+| video.src = window.webkitURL.createObjectURL(stream);
+| video.play();
+| }, errBack);
+| }
+| else if(navigator.mozGetUserMedia) { // Firefox-prefixed
+| navigator.mozGetUserMedia(videoObj, function(stream){
+| video.src = window.URL.createObjectURL(stream);
+| video.play();
+| }, errBack);
+| }
+| }, false);
+| // Trigger photo take
+| document.getElementById("snap").addEventListener("click", function() {
+| context.drawImage(video, 0, 0, 640, 480);
+| });

Shane-Casey-Kate/Jade-JS-Media-Conversion

@@ -0,0 +1,73 @@
+| window.addEventListener("DOMContentLoaded", function() {
+| var canvas = document.getElementById("canvas"),
+| context = canvas.getContext("2d"),
+| video = document.getElementById("video"),
+| videoObj = { "video" : true },
+| errBack = function(error) {
+| console.log("Video capture error: ", error.code);
+| };
+| document.getElementById("snap").addEventListener("click", function() {
+| context.drawImage(video, 0, 0, 150, 150);
+| });
+| if(navigator.getUserMedia) {
+| navigator.getUserMedia(videoObj, function(stream) {
+| video.src = stream;
+| video.play();
+| }, errBack);
+| } else if(navigator.webkitGetUserMedia) {
+| navigator.webkitGetUserMedia(videoObj, function(stream){
+| video.src = window.webkitURL.createObjectURL(stream);
+| video.play();
+| }, errBack);
+| }
+| else if(navigator.mozGetUserMedia) {
+| navigator.mozGetUserMedia(videoObj, function(stream){
+| video.src = window.URL.createObjectURL(stream);
+| video.play();
+| }, errBack);
+| }
+| }, false);
+| window.onload = function(){
+| name.value = localStorage.getItem(name.id);
+| password.value = localStorage.getItem(password.id);
+| radio1.value = localStorage.getItem(radio1.id);
+| radio2.value = localStorage.getItem(radio2.id);
+| select2.value = localStorage.getItem(select2.id);
+| textarea.value = localStorage.getItem(textarea.id);
+| check.value = localStorage.getItem(check.id);
+| };
+| var fname = document.getElementById("name");
+| var password = document.getElementById("password");
+| var radio1 = document.getElementById("radio-choice-1");
+| var radio2 = document.getElementById("radio-choice-2");
+| var select2 = document.getElementById("select-choice-2");
+| var textarea = document.getElementById("textarea");
+| var check = document.getElementById("check");
+| name.onblur = function(){
+| storeData(this.id, this.value);
+| };
+| password.onblur = function(){
+| storeData(this.id, this.value);
+| };
+| radio1.onblur = function(){
+| storeData(this.id, this.value);
+| };
+| radio2.onblur = function(){
+| storeData(this.id, this.value);
+| };
+| select2.onblur = function(){
+| storeData(this.id, this.value);
+| };
+| textarea.onblur = function(){
+| storeData(this.id, this.value);
+| };
+| check.onblur = function(){
+| storeData(this.id, this.value);
+| };
+| function storeData(name, value){
+| localStorage.setItem(name, value);
+| };
+| var audio = document.getElementById("page_audio");
+| audio.onClick = function(){
+| audio.play();
+| };

Shane-Casey-Kate/README.md

@@ -0,0 +1,17 @@
++### A project for Code Fellows B25 by Kate Fleming, Casey Holly, and Shane Kalles.
++
++Our build of HTML5-as-a-platform.
++
++Capturing photos with the camera access was pretty simple, but being able to capture video is really difficult, since  the new file would need to be stored somewhere and local storage doesn't work for this type of information.
++
++Our form layout is simple and we made sure to include local storage. Found that you need to write different JavaScript code for local storage of text items vs. radio checkboxes. Another obstical we came across is that if a button is inside a form is takes on "submit" function which if used to trigger an event you need to change its default to not reload the page.
++
++Adding the video element is very simple and the controls available to you in HTML5 make for an easy addition to any page with the playback results that you want. We didn't add any custom controls but this process seems fairly easy.
++
++Resources:
++* [UX Design](http://www.anotheruiguy.com/ux-design-dev/_book/html5/audio.html)
++* [Custom Video Control](http://www.creativebloq.com/html5/build-custom-html5-video-player-9134473)
++*
++*[Video & Audio Elements](http://www.sitepoint.com/essential-audio-and-video-events-for-html5/)
++*[Radio Local Storage](http://stackoverflow.com/questions/19451862/localstorage-not-saving-changed-radio-button-values-if-checked-is-used)
+

Shane-Casey-Kate/camera.js

@@ -0,0 +1,36 @@
+// Put event listeners into place
+window.addEventListener("DOMContentLoaded", function() {
+  // Grab elements, create settings, etc.
+  var canvas = document.getElementById("canvas"),
+    context = canvas.getContext("2d"),
+    video = document.getElementById("video"),
+    videoObj = { "video": true },
+    errBack = function(error) {
+      console.log("Video capture error: ", error.code);
+    };
+
+  // Put video listeners into place
+  if(navigator.getUserMedia) { // Standard
+    navigator.getUserMedia(videoObj, function(stream) {
+      video.src = stream;
+      video.play();
+    }, errBack);
+  } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
+    navigator.webkitGetUserMedia(videoObj, function(stream){
+      video.src = window.webkitURL.createObjectURL(stream);
+      video.play();
+    }, errBack);
+  }
+  else if(navigator.mozGetUserMedia) { // Firefox-prefixed
+    navigator.mozGetUserMedia(videoObj, function(stream){
+      video.src = window.URL.createObjectURL(stream);
+      video.play();
+    }, errBack);
+  }
+
+}, false);
+
+// Trigger photo take
+document.getElementById("snap").addEventListener("click", function() {
+  context.drawImage(video, 0, 0, 640, 480);
+});