Swind/Get User Media

## Get User Media
 同時取得 Audio 與 Video 的權限

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>getUserMedia Example</title>
    <meta name="description" content="WebRTC Simple example" />
    <meta name="author" content="Ido Green | greenido.wordpress.com">

    <meta name="keywords" content="WebRTC, HTML5, JavaScript, Hack, Ido Green" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1">
    <meta http-equiv="X-UA-Compatible" content="chrome=1" />
    <base target="_blank">
    <style>
      video {
        height: 25em;
        position: relative;
        left: 15%;
      }
      #video-space {
        padding: 1em;
        background-color: rgba(70, 70, 6, 0.55);
        border-radius: 25px;
      }
      ul {
        padding: 2em;
        font-family: sans-serif;
        font-size: 120%;
        line-height:160%;
        background-color: lightgray;
        border-radius: 25px
      }
    </style>
  </head>

  <body>

    <h1>getUserMedia API Example</h1>
    <div id='video-space'>
      <video autoplay></video>
    </div>

    <script>
      navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
      var constraints = {audio: true, video: true};
      var video = document.querySelector("video");

      function successCallback(stream) {
        // stream available to console so you could inspect it and see what this object looks like
        window.stream = stream;
        video.srcObject = stream;
        video.onloadedmetadata = function(e) {
          video.play();
        };
      }

      function errorCallback(error) {
        console.log("navigator.getUserMedia error: ", error);
      }

      navigator.getUserMedia(constraints, successCallback, errorCallback);

    </script>

    <p>
    <ul>
      <li>
        (!) Please remember to run this example from a (local) web server and not by 'just' clicking on the html. Why? because the browser will block getUserMedia API by default if you won't serve it from a web server. Even in the case of a web server you need to 'allow' this permission in the top-right corner of this page.
      </li>
      <li>
        <a href="http://greenido.wordpress.com/2013/08/14/webrtc-updates/" title="WebRTC post on Ido's blog">WebRTC Updates with Demos</a>
      </li>
      <li>
        <a href="https://gist.github.com/greenido/6238800" title="View source for this page on github" id="viewSource">The source on github</a>
      </li>
    </ul>
  </p>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>getUserMedia Example</title>
	<meta name="description" content="WebRTC Simple example" />
	<meta name="author" content="Ido Green \| greenido.wordpress.com">

	<meta name="keywords" content="WebRTC, HTML5, JavaScript, Hack, Ido Green" />
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1">
	<meta http-equiv="X-UA-Compatible" content="chrome=1" />
	<base target="_blank">
	<style>
	video {
	height: 25em;
	position: relative;
	left: 15%;
	}
	#video-space {
	padding: 1em;
	background-color: rgba(70, 70, 6, 0.55);
	border-radius: 25px;
	}
	ul {
	padding: 2em;
	font-family: sans-serif;
	font-size: 120%;
	line-height:160%;
	background-color: lightgray;
	border-radius: 25px
	}
	</style>
	</head>

	<body>

	<h1>getUserMedia API Example</h1>
	<div id='video-space'>
	<video autoplay></video>
	</div>

	<script>
	navigator.getUserMedia = navigator.getUserMedia \|\| navigator.webkitGetUserMedia \|\| navigator.mozGetUserMedia;
	var constraints = {audio: true, video: true};
	var video = document.querySelector("video");

	function successCallback(stream) {
	// stream available to console so you could inspect it and see what this object looks like
	window.stream = stream;
	video.srcObject = stream;
	video.onloadedmetadata = function(e) {
	video.play();
	};
	}

	function errorCallback(error) {
	console.log("navigator.getUserMedia error: ", error);
	}

	navigator.getUserMedia(constraints, successCallback, errorCallback);

	</script>

	<p>
	<ul>
	<li>
	(!) Please remember to run this example from a (local) web server and not by 'just' clicking on the html. Why? because the browser will block getUserMedia API by default if you won't serve it from a web server. Even in the case of a web server you need to 'allow' this permission in the top-right corner of this page.
	</li>
	<li>
	<a href="http://greenido.wordpress.com/2013/08/14/webrtc-updates/" title="WebRTC post on Ido's blog">WebRTC Updates with Demos</a>
	</li>
	<li>
	<a href="https://gist.github.com/greenido/6238800" title="View source for this page on github" id="viewSource">The source on github</a>
	</li>
	</ul>
	</p>

	</body>
	</html>