Workspace / WebRTC Server

This is a workspace for serving up a webcam.

HTML

<script src="http://www.chilipeppr.com/js/require.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!-- This is the workspace layout for the Serial Port Workspace -->
<div id="com-chilipeppr-ws-webrtcserver">
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-12 widget padrt">
                <!-- Workspace Hdr -->
                <div id="com-chilipeppr-ws-serialport-hdr" class="well">Workspace - WebRTC Server
                    <div id="com-chilipeppr-ws-webrtcserver-menu" class="pull-right">            
                        <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">
                                    <li id="com-chilipeppr-ws-webrtcserver-menu-billboard" style="width:350px;"></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Serial In/Out Text Log-->
                <div id="com-chilipeppr-webrtcserver" class="zhigh">Load WebRTC Server Widget Here</div>
            </div>
        </div>
    </div>
</div>

CSS

#com-chilipeppr-ws-serialport-hdr {
    margin-bottom:10px;
    padding: 10px 15px;
}
.row .widget {
    margin:0;
    padding:0;
}
.panel {
    margin-bottom:10px;
}
.row .padrt {
    padding-right:10px;
}
.nopadding {
    padding:0;
}
.nomargin {
    margin:0;
}
.noheight {
    height:0;
}

JavaScript

// Makes sure we only run once jquery is loaded as well
// as ensuring we don't load javascript libraries multiple times
cprequire(["chilipeppr_ready"], function () {

    // Define standard ChiliPeppr objects
    var ws = {
        id: "com-chilipeppr-ws-webrtcserver",
        url: 'http://jsfiddle.net/chilipeppr/wG25a/show/light',
        fiddleurl: 'http://jsfiddle.net/chilipeppr/wG25a/',
        name: "Workspace / WebRTC Server",
        desc: "This is a workspace for serving up a webcam.",
        foreignSubscribe: {
        },
        foreignPublish: {
        }
    }
            
    // Load top bar elements


    // Workspace Menu with Workspace Billboard
    // http://jsfiddle.net/jlauer/yC8Hv/
    //chilipeppr.load(
    //    "#com-chilipeppr-ws-serialport-menu-billboard",
    //    "http://fiddle.jshell.net/chilipeppr/astYW/show/light/");
    chilipeppr.load(
        "http://fiddle.jshell.net/chilipeppr/zMbL9/show/light/", 
        function () {
            require(['inline:com-chilipeppr-elem-pubsubviewer'], function (pubsubviewer) {
                    pubsubviewer.attachTo(
                        $('#com-chilipeppr-ws-webrtcserver-menu .dropdown-menu'), 
                        ws, 
                        "Mi Workspace"
                    );
                });
            });
            

    // WebRTC Server Widget
    // http://jsfiddle.net/chilipeppr/7P2bJ/
    chilipeppr.load("#com-chilipeppr-webrtcserver",
        "http://fiddle.jshell.net/chilipeppr/7P2bJ/show/light/",

    function () {
        cprequire(
        ["inline:com-chilipeppr-widget-webrtc-server"],

        function (webrtcserver) {
            webrtcserver.init();
            
            // resize this console on a browser resize
            $(window).on('resize', function (evt) {
                //console.log("serial-port-console. resize evt:", evt);
                if ($.isWindow(evt.target)) {
                    //console.log("resize was window. so resizing");
         ...