WebRTC Example

by AaronLayton

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css">
<div class="container">
    <div class="hero-unit">
        <h1>WebRTC</h1>
        <p>Just a quick example</p>
        <p>
            <a href="http://www.html5rocks.com/en/tutorials/webrtc/basics/" target="_blank" class="btn btn-primary btn-large">
              Learn more
            </a>
        </p>
    </div>
    <div class="row">
        <div class="span6">
            <div class="thumbnail" id="myVideo">
                
            </div>
        </div>
        <div class="span6">
            <div class="thumbnail">
                <img src="http://placehold.it/300x200" alt="">
            </div>
        </div>
    </div>
</div>

JavaScript

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
    navigator.mozGetUserMedia || navigator.msGetUserMedia;
window.URL = window.URL || window.webkitURL;

navigator.getUserMedia({video: true}, function(localMediaStream) { 
  var video = document.createElement("video");
  video.autoplay = true;
  video.src = window.URL.createObjectURL(localMediaStream);
  video.style.width = "100%";
    document.getElementById("myVideo").appendChild(video);
}, function(error) {
  console.log(error);
});