Widget / WebRTC

This widget to show video streams via WebRTC.

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-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 id="container" ondblclick="enterFullScreen()">
            <div id="card">
                <div id="local">
                    <video id="localVideo" autoplay="autoplay" muted="true"/>
                </div>
                <div id="remote">
                    <video id="remoteVideo" autoplay="autoplay">
                    </video>
                    <div id="mini">
                        <video id="miniVideo" autoplay="autoplay" muted="true"/>
                    </div>
                </div>
            </div>
        </div>
        <footer id="status">
        </footer>
        <div id="infoDiv"></div>
        
    </div>
    <div id="com-chilipeppr-widget-webrtc-ftr" class="panel-footer hidden">
        
    </div>
</div>

CSS

a:link { color: #FFFFFF; }
a:visited {color: #FFFFFF; }
html, body {
  background-color: #000000;
  height: 100%;
  font-family: Verdana, Arial, Helvetica, sans-serif;
}
body {
  margin: 0;
  padding: 0;
}
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 28px;
  background-color: #3F3F3F;
  color: #FFFFFF;
  font-size: 13px; font-weight: bold;
  line-height: 28px;
  text-align: center;
}
#container {
  background-color: #000000;
  position: absolute;
  height: 100%;
  width: 100%;
  margin: 0px auto;
  -webkit-perspective: 1000;
}
#card {
  -webkit-transition-duration: 2s;
  -webkit-transform-style: preserve-3d;
}
#local {
  position: absolute;
  width: 100%;
  transform: scale(-1, 1);
  -webkit-transform: scale(-1, 1);
  -webkit-backface-visibility: hidden;
}
#remote {
  position: absolute;
  width: 100%;
  -webkit-transform: rotateY(180deg);
  -webkit-backface-visibility: hidden;
}
#mini {
  position: absolute;
  height: 30%;
  width: 30%;
  bottom: 32px;
  right: 4px;
  opacity: 1.0;
  transform: scale(-1, 1);
  -webkit-transform: scale(-1, 1);
}
#localVideo {
  width: 100%;
  height: 100%;
  opacity: 0;
  -webkit-transition-property: opacity;
  -webkit-transition-duration: 2s;
}
#remoteVideo {
  width: 100%;
  height: 100%;
  opacity: 0;
  -webkit-transition-property: opacity;
  -webkit-transition-duration: 2s;
}
#miniVideo {
  width: 100%;
  height: 100%;
  opacity: 0;
  -webkit-transition-property: opacity;
  -webkit-transition-duration: 2s;
}
#hangup {
 font-size: 13px; font-weight: bold;
 color: #FFFFFF;
 width: 128px;
 height: 24px;
 background-color: #808080;
 border-style: solid;
 border-color: #FFFFFF;
 margin: 2px;
}
#infoDiv {
  position: absolute;
  float: right;
  background-color: grey;
  margin: 2px;
  display: none;
}

JavaScript

requirejs.config({
    paths: {
        webrtc: 'https://webrtc.googlecode.com/svn/stable/samples/js/apprtc/js/main',
        webrtcAdapter: 'https://webrtc.googlecode.com/svn/stable/samples/js/base/adapter',
        webrtcChannel: 'https://talkgadget.google.com/talkgadget/channel'
    },
    shim: {
        webrtc: ['webrtcChannel', 'webrtcAdapter']
    }
});

// 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*/ );

            var errorMessages = '{{ error_messages }}';
            var channelToken = '{{ token }}';
            var me = '{{ me }}';
            var roomKey = '{{ room_key }}';
            var roomLink = '{{ room_link }}';
            var initiator = '{{ initiator }}';
            var pcConfig = '{{ pc_config|safe }}';
            var pcConstraints = '{{ pc_constraints|safe }}';
            var offerConstraints = '{{ offer_constraints | safe }}';
            var mediaConstraints = '{{ media_constraints | safe }}';
            var turnUrl = '{{ turn_url }}';
            var stereo = '{{ stereo }}';
            var audio_send_codec = '{{ audio_send_codec }}';
            var audio_receive_codec = '{{ audio_receive_codec }}';

cpdefine("inline:com-chilipeppr-widget-webrtc", ["chilipeppr_ready", "webrtc"], 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();
            
            console.log(this.name + " done loading.");
        },
       ...