Widget / WebRTC Server v2

This widget to serves a video stream via WebRTC. The idea here is that the CNC machine is serving up the video. The companion widget would be the client widget to this server widget.

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-webrtcserver" 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 Server</span>
        <span class="server-id">Server ID Unknown</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="false" autoplay class="hidden"></video>
            </div>
            
            <!-- Steps -->
            <div class="pure-u-1-3">
                
                <div id="step-notloggedin" class="alert alert-warning alert-dismissible hidden" role="alert">
                    <p>You are not logged in to ChiliPeppr, therefore you can't become a server. You must be logged in because ChiliPeppr uses your login to create the peer-to-peer call.</p>
                </div>

                <!-- Get local audio/video stream -->
                <div id="step1" class="alert alert-warning alert-dismissible hidden" role="alert">
                    <p>Please click `allow` on the top of the screen so we can access your webcam and microphone.</p>
                ...

CSS

#com-chilipeppr-widget-webrtc-body {
    padding:0;
}
#com-chilipeppr-widget-webrtcserver .server-id {
    font-size:9px;
}
#com-chilipeppr-widget-webrtcserver .control-panel {
    padding:16px;
    margin-bottom:0;
}
#com-chilipeppr-widget-webrtcserver .camera-row {
    display:table;
    padding:2px 8px 2px 2px;
    margin:0;
}
#com-chilipeppr-widget-webrtcserver .camera-item {
    /* float:left; */
    display:table-cell;
    vertical-align:top;
}
#com-chilipeppr-widget-webrtcserver .camera-preview, #com-chilipeppr-widget-webrtcserver .camera-preview video {
    width:160px;
    height:auto;
}
#com-chilipeppr-widget-webrtcserver .glyphicon-volume-up {
    font-size:30px;
    line-height:96px;
    width: 100%;
    text-align: center;
}
#com-chilipeppr-widget-webrtcserver .camera-kind {
    /* font-size:9px; */
    padding-left:8px;
}
#com-chilipeppr-widget-webrtcserver .camera-id {
    /* font-size:9px; */
    padding-left:8px;
}
#com-chilipeppr-widget-webrtcserver .camera-resolution {
    font-size:9px;
}
#my-video {
    /* margin-top: 15px; */
    width:100%;
  /* width: 280px; */
    height: auto;
    background-color: #eee;
}

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

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

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

.pure-g {
    position:relative;
}
.pure-u-1-3 {
    position:absolute;
    left:10px;
    top:10px;
    right:10px;
}
#step2 {
    background: rgba(255,255,255,0.4);
    padding:10px;
}

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-server"], function (hello) {
    console.log("test running of " + hello.id);
    hello.init();
} /*end_test*/ );

cpdefine("inline:com-chilipeppr-widget-webrtc-server", ["chilipeppr_ready", "peerJs"], function () {
    
    return {
        id: "com-chilipeppr-widget-webrtc-server",
        url: "http://fiddle.jshell.net/chilipeppr/stpbm/show/light/",
        fiddleurl: "http://jsfiddle.net/chilipeppr/stpbm/",
        name: "Widget / WebRTC Server v2",
        desc: "This widget to serves a video stream via WebRTC. The idea here is that the CNC machine is serving up the video. The companion widget would be the client widget to this server widget.",
        publish: {},
        subscribe: {},
        foreignPublish: {},
        foreignSubscribe: {},
        init: function () {

            this.forkSetup();
            //this.setupWebRtc();
            this.showCameras();
            //this.setupPeerJs();
            //this.btnSetup();
            this.startServing();
            
            console.log(this.name + " done loading.");
        },
        serverid: null,
        peer: null,
        cameras: null,
        btnSetup: function() {
            var that = this;
            $('#com-chilipeppr-widget-webrtcserver .start-serving').click(function() {
                console.log("start serving");
                that.startServing();
            });
        },
        startServing: function() {
            //this.setupPeerJs();
            // connect to peerJs servers first, cuz we get an ID that
            // we need to register our cameras
            this.connectToPeerJs();
            var that = this;
            this.peer.on('open', function() {
                that.cameraRegisterServerPeer();
            });
        },
  ...