<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" data-useragent="Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>adPush | Winning with an Edge</title>
<meta name="description" content="At adPush we are rethinking everything "/>
<meta name="author" content="ray@rccloud.me"/>
<meta name="copyright" content="adpush (c) 2011"/>
<link rel="stylesheet" href="http://foundation.zurb.com/assets/css/templates/foundation.css"/>
<style>body{font-family:'Raleway',sans-serif;font-size:18px;}hr{text-align:center;margin:0 auto;opacity:0.5;}ul{text-transform:uppercase;}ul.inline-list.right{text-transform:none;}ul.inline-list.right a{color:#000;}ul.inline-list.right a:hover{color:rgba(0,0,0,0.5);}h1{font-family:'American Typewriter','Courier New',Courier,Monaco,mono;font-size:42px;color:#fff;line-height:42px;margin-top:16px;margin-bottom:0px;text-align:center;}h2{font-family:'American Typewriter','Courier New',Courier,Monaco,mono;color:#fff;font-size:36px;line-height:36px;}h3{font-family:'American Typewriter','Courier New',Courier,Monaco,mono;font-size:24px;color:#fff;line-height:10px;text-align:center;font-weight:500;padding-bottom:10px;}h4{font-family:'American Typewriter','Courier New',Courier,Monaco,mono;color:#000;font-size:28px;padding-top:5px;}.columns.large-centered{padding-left:5px;padding-right:5px;}@media only screen and (max-width: 40em) {.columns.large-centered{font-size:13px;}}@media only screen and (min-width: 40.063em) {.columns.large-centered{font-size:14px;}}.about-box{color:#fff;}.black-box{background-color:rgba(0,0,0,0.55);/*padding:35px padding:15px 50px 15px 50px;*/padding:35px;font-weight:900;}.black-box p{font-weight:900;}.secondary.small.button{background-color:transparent;color:#fff;border:2px #FF69B4 solid;border-radius:5px;padding:15px 50px 15px 50px;margin:0;}.secondary.small.button:hover{background-color:#FF69B4;}.row .main-wrapper{color:#fff;}.about-content{background-color:#fff;box-shadow:2px 2px 10px rgba(0,0,0,0.1);}.button-group li .button{border:0!important;}.button{-webkit-appearance:none;background-color:transparent;border-width:0;text-align:center;box-shadow:0 0 0;}.button:hover{color:rgba(255,255,255,0.7);background-color:transparent;}footer p,footer a{font-size:14px;}.hero{padding-bottom:50px;background-image:url("http://webmx-cdn-static.s3-website-us-west-2.amazonaws.com/assets/underwater.jpg");background-size:cover;box-shadow:inset 0px 0px 0 2000px rgba(0,0,0,0.2);}.hero-content{padding-top:40px;padding-bottom:40px;background-color:#EAEAEA;}.panel{margin:40px 0 40px 0;box-shadow:2px 2px 10px rgba(0,0,0,0.2);border:none;background-color:#EAEAEA;}.large-4 img{box-shadow:2px 2px 10px rgba(0,0,0,0.1);}.radius.right.button{color:#000;border:2px #000 solid;border-radius:5px;padding:15px 50px 15px 50px;margin:0;font-size:0.8125em;}@media only screen and (min-width: 64.063em) {.radius.right.button{color:#000;border:2px #000 solid;border-radius:5px;/*padding:35px padding:15px 50px 15px 50px;*/padding:35px;margin-top:25px;font-size:0.8125em;}}@media only screen and (min-width: 40.063em) {.radius.right.button{color:#000;border:2px #000 solid;border-radius:5px;/*padding:35px*/padding:35px;margin-top:25px;font-size:0.8125em;}}.radius.right.button:hover{background-color:rgba(0,0,0,0.1);}</style>
<!-- backdrop style alt http://38.media.tumblr.com/0ce0bc9816f51963af73c7fdf7757d23/tumblr_na0k70npJI1st5lhmo1_1280.jpg -->
<link href="//vjs.zencdn.net/4.1/video-js.css" rel="stylesheet">
</head>
<body>
<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<section class="hero">
<div class="row">
<div class="large-12 columns">
<div class="main-wrapper">
<h1 style="text-transform:uppercase;">responsive media</h1>
<h3>Scalable Growth for the New Media Revolution</h3>
<hr>
<div class="row">
<div class="large-6 columns large-centered">
<ul class="button-group even-4">
<li><a href="#" class="button">Run</a></li>
<li><a href="#" class="button">Examples</a></li>
<li><a href="#" class="button">About</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="large-6 columns about-box">
<div class="black-box container">
<h2 style="text-align:center;">Check out a Demo</h2>
</div></div></div>
<br><br>
<div class="row">
<div class="black-box container">
<div class="large-4 columns">
<p><a id="get-user-media" class="secondary small button">Show Me →</a></p>
<audio id="audio_example" class="video-js vjs-default-skin" controls preload="auto" width="200" poster="//rayanthony.io/logo.png" data-setup='{}'>
<source src="http://livetube.io/media/music/lossless/PinkFloyd-ObscuredByClouds.flac" type='audio/flac'/>
</audio>
</div>
<div class="large-4 columns">
<p><a id="get-user-media" class="secondary small button">Show Me →</a></p>
<div class="info">
<p> </p>
</div>
<video id="video"
class="video-js vjs-default-skin"
preload="auto" width="200" poster="https://rayanthony.io/features/tongue.png"
controls
data-setup='{ "techOrder": ["aurora"] }'>
<source src="//video-js.zencoder.com/oceans-clip.flac" type='audio/flac' />
</video>
</div>
<div class="large-4 columns">
<p><a id="get-user-media" class="secondary small button">Show Me →</a></p>
<video id="user-media" autoplay class="video-js vjs-default-skin" controls preload="auto" width="200" poster="https://cloudup.com/cp544DZlhuV+" data-setup='{}'>
</video>
</div>
<div class="large-4 columns">
<p><a id="get-user-media" class="secondary small button">Show Me →</a></p>
<audio id="audio_example" class="video-js vjs-default-skin" controls preload="auto" width="200" poster="https://cloudup.com/cp544DZlhuV+" data-setup='{}'>
<source src="http://livetube.io/media/music/lossless/PinkFloyd-ObscuredByClouds.flac" type='audio/flac'/>
</audio>
</div>
<br>
</div>
</div>
</div>
<script src="//cdn.WebRTC-Experiment.com/RecordRTC.js"></script>
<script>$(function(){
document.querySelector('#chat-message').onchange = function (event) {
user.peers.emit('message', this.value);
};
document.querySelector('#enable-microphone').onclick = function () {
user.peers.emit('enable', 'microphone');
};
document.querySelector('#enable-camera').onclick = function () {
user.peers.emit('enable', 'camera');
};
document.querySelector('#enable-screen').onclick = function () {
user.peers.emit('enable', 'screen');
};
});
</script>
<script>
// Do the vendor prefix dance
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia || navigator.msGetUserMedia;
// Set up an error handler on the callback
var errCallback = function(e) {
console.log('Did you just reject me?!', e);
};
// Request the user's media
function requestMedia(e) {
e.preventDefault();
// Use the vendor prefixed getUserMedia we set up above and request just video
navigator.getUserMedia({video: true, audio: true}, showMedia, errCallback);
}
function showMedia(stream) {
var video = document.getElementById('user-media');
video.src = window.URL.createObjectURL(stream);
video.onloadedmetadata = function(e) {
console.log('Locked and loaded.');
};
}
$(function() {
$('#get-user-media').click(requestMedia);
});</script>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://foundation.zurb.com/assets/js/modernizr.js"></script>
<script src="//vjs.zencdn.net/4.1/video.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/aurora.js-flac/0.2.1/flac.js"> </script>
<script src="//cdn.WebRTC-Experiment.com/RecordRTC.js"></script>
</body>
</html>
