Widget / WebRTC PeerJs

This widget to show video streams via WebRTC.

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://www.chilipeppr.com/js/require.js"></script>
<div id="com-chilipeppr-widget-hello" class="panel panel-default">
    <div class="panel-heading">
        <div class="btn-toolbar pull-right" role="toolbar">
            <div class="btn-group"></div>
            <div class="btn-group">
                <div class="dropdown">
                    <button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu dropdown-menu-right" role="menu"></ul>
                </div>
            </div>
        </div> 
        <span class="panel-title" data-toggle="popover">WebRTC</span>

    </div>
    <div id="com-chilipeppr-widget-webrtc-body" class="panel-body">
        
        <div class="pure-g">
            
            <!-- Video area -->
            <div class="pure-u-2-3" id="video-container">
                <video id="their-video" autoplay></video>
                <video id="my-video" muted="true" autoplay></video>
            </div>
            
            <!-- Steps -->
            <div class="pure-u-1-3">
                <h2>PeerJS Video Chat</h2>
                
                <!-- Get local audio/video stream -->
                <div id="step1">
                    <p>Please click `allow` on the top of the screen so we can access your webcam and microphone for calls.</p>
                    <div id="step1-error">
                        <p>Failed to access the webcam and microphone. Make sure to run this demo on an http server and click allow when asked for permission by the browser.</p>
                        <a href="#" class="pure-button pure-button-error" id="step1-retry">Try again</a>
                    </div>
                </div>
                
                <!-- Make calls to others -->
               ...

CSS

#my-video {
  margin-top: 15px;
  width: 280px;
  height: auto;
  background-color: #eee;
}

#their-video {
  width: 100%;
  height: 75%;
  max-height: 480px;
  background-color: #eee;
}

#video-container {
  padding: 25px;
  text-align: center;
}

#step1-error, #step2, #step3 {
  display: none;
}
#my-id {
  font-weight: bold;
}

JavaScript

requirejs.config({
    paths: {
        peerJs: 'http://cdn.peerjs.com/0.3/peer'
    },
    shim: {
    }
});

// Test this element. This code is auto-removed by the chilipeppr.load()
cprequire_test(["inline:com-chilipeppr-widget-webrtc"], function (hello) {
    console.log("test running of " + hello.id);
    hello.init();
} /*end_test*/ );

cpdefine("inline:com-chilipeppr-widget-webrtc", ["chilipeppr_ready", "peerJs"], function () {
    
    return {
        id: "com-chilipeppr-widget-webrtc",
        url: "http://fiddle.jshell.net/chilipeppr/K9f3m/show/light/",
        fiddleurl: "http://jsfiddle.net/chilipeppr/K9f3m/",
        name: "Widget / WebRTC",
        desc: "This widget is just a Hello World example.",
        publish: {},
        subscribe: {},
        foreignPublish: {},
        foreignSubscribe: {},
        init: function () {

            this.forkSetup();
            //this.setupWebRtc();
            this.setupPeerJs();
            
            console.log(this.name + " done loading.");
        },
        setupPeerJs: function() {
            // You can pick your own id or omit the id if you want to get a random one from the server.
            //var peer = new Peer({key: 'cpoxnt5u4z5xw29'});
            //var peer = new Peer('pick-an-id', {key: 'myapikey'}); 
            
             // Compatibility shim
            navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
            
            // PeerJS object
            var peer = new Peer({ key: 'cpoxnt5u4z5xw29', debug: 3, config: {'iceServers': [
                { url: 'stun:stun.l.google.com:19302' } // Pass in optional STUN and TURN server for maximum network compatibility
            ]}});
            
            peer.on('open', function(){
                $('#my-id').text(peer.id);
            });
            
            // Receiving a call
            peer.on('call', function(call){
                // Answer the call...