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.

by chilipeppr

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();
            });
        },
  ...