First initial experiments

robnyman · Mar 8, 2012 · 0b98cfe · 0b98cfe
1 parent 86d48f0
commit 0b98cfe
Show file tree

Hide file tree

Showing 3 changed files with 183 additions and 0 deletions.
diff --git a/getusermedia/css/base.css b/getusermedia/css/base.css
@@ -0,0 +1,127 @@
+/* General font styles */
+html {
+	font: 100%/1.3 Verdana, Helvetica, Arial, sans-serif;
+    height: 100%;
+}
+
+body {
+	font: 70%/1.3 Verdana, Helvetica, Arial, sans-serif;
+}
+
+h1 {
+	font: bold 2em Arial, sans-serif;
+}
+
+h2 {                     
+	font: bold 1.5em Arial, sans-serif;
+}
+
+h3 {                     
+	font: bold 1.25em Arial, sans-serif;
+}
+
+h4 {                     
+	font: bold 1.1em Arial, sans-serif;
+}
+
+/* Default resetting */
+html, body, form, fieldset, legend, dt, dd {
+	margin: 0;
+	padding: 0;
+}
+
+h1, h2, h3, h4, h5, h6, p, ul, ol, dl {
+	margin: 0 0 1em;
+	padding: 0;
+}
+
+h1, h2, h3, h4, h5, h6 {
+	margin-bottom: 0.5em;
+}
+
+h2 {
+    margin-top: 20px;
+}
+
+pre {
+	font-size: 1.5em;
+}
+
+li, dd {
+	margin-left: 1.5em;
+}
+
+img {
+    border: none;
+	vertical-align: middle;
+}
+
+/* Basic element styles */
+a {
+	color: #000;
+}
+
+a:hover {
+	text-decoration: underline;
+}
+
+html {
+	color: #000;
+	min-height: 100%;	
+}
+
+body {
+    min-height: 100%;
+    background-image: -moz-linear-gradient(top, #ccc, #fff);
+    background-image: -webkit-linear-gradient(top, #ccc, #fff);
+    padding-top: 20px;
+}
+
+
+body {
+	margin-bottom: 30px;
+}
+
+ul {
+    margin: 10px 0;
+}
+
+
+/* Structure */
+.container {
+    width: 560px;
+	min-height: 600px;
+	background: #fff;
+	border: 1px solid #ccc;
+	border-top: none;
+	margin: 0 auto;
+	padding: 20px;
+	-moz-border-radius: 10px;
+	-webkit-border-radius: 10px;
+	border-radius: 10px;
+	-moz-box-shadow: 1px 1px 10px #000;
+	-webkit-box-shadow: 1px 1px 5px #000;
+	box-shadow: 1px 1px 10px #000;
+}
+
+@media screen and (max-width: 320px) {
+    #container {
+        width: 280px;
+        padding: 10px;
+    }
+}
+
+button {
+    display: block;
+    margin-bottom: 20px;
+}
+
+#error {
+    color: #f00;
+}
+
+.footer {
+    border-top: 1px solid #000;
+    margin-top: 30px;
+    padding-top: 10px;
+}
diff --git a/getusermedia/index.html b/getusermedia/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <title>getUserMedia</title>
+        <link rel="stylesheet" href="css/base.css" type="text/css" media="screen">
+    </head>
+
+    <body>
+
+        <div class="container">
+            <h1>getUserMedia</h1>
+
+            <section class="main-content">
+                <p>A demo of getUserMedia, currently implemented in Firefox, Google Chrome and Opera. Choose to stream live from your device's camera.</p>
+
+                <h2>Preview:</h2>
+                <p>
+                    <video id="live-video" style="border: 1px solid #000"></video>
+                </p>
+
+                <p id="error"></p>
+
+            </section>
+
+            <p class="footer">All the code is available in the <a href="https://github.com/robnyman/robnyman.github.com/tree/master/camera-api">Camera API repository on GitHub</a>.</p>
+        </div>
+
+
+        <script src="js/base.js"></script>
+
+
+    </body>
+</html>
diff --git a/getusermedia/js/base.js b/getusermedia/js/base.js
@@ -0,0 +1,22 @@
+(function () {
+    var liveVideo = document.querySelector("#live-video"),
+        getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia,
+        error = document.querySelector("#error");
+
+    alert(getUserMedia);
+
+    if (liveVideo && getUserMedia) {
+        navigator.webkitGetUserMedia("video", 
+            function (media) {
+                alert(media);
+                liveVideo.src = window.webkitURL.createObjectURL(media);
+            },
+            function (error) {
+                error.innerHTML = "An error occurred: " + error;
+            }
+        );
+    }
+    else {
+        error.innerHTML = "getUserMedia not supported";
+    }
+})();