Widget / WebRTC Client PeerJs

This widget receives a video stream via WebRTC. You must have the server widget running in another window, or on a different machine.

by Frank Graffagnino

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-webrtc-client" class="panel panel-default">
    <div class="panel-heading">
        <div class="btn-toolbar pull-right" role="toolbar">
            <div class="btn-group">
                <button type="button" class="btn btn-xs btn-default disconnect"><span class="glyphicon glyphicon-off"></span></button>
            </div>
            <div class="btn-group">
                <button type="button" class="btn btn-xs btn-default hidebody"><span class="glyphicon glyphicon-chevron-up"></span></button>
            </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">Webcam</span>
        <!-- <span style="font-size:10px">Your id: </span> -->
        <!-- <span id="my-id">...</span> -->

    </div>
    <div id="com-chilipeppr-widget-webrtc-body" class="panel-body">
        
        <div class="pure-g">
            
        <div id="container">
            <div id="remote">
                <video id="remote-video" autoplay="">
                    Your browser does not support the video tag.
                </video>
            </div>
        </div>
        Signalling Server Address: <input type="text" id="signalling_server" value="192.168.0.116:8080" title="<host>:<port>, default address is autodetected"/><br>
        <button id="start" onclick="start();">Start</button>
        <button disabled id="stop" onclick="stop();">Stop</button>
        <button id="mute"...

CSS

#com-chilipeppr-widget-webrtc-body {
    padding:0;
}
#my-video {
    /* margin-top: 15px; */
    width:100%;
  /* width: 280px; */
    height: auto;
    background-color: #eee;
}

#com-chilipeppr-widget-webrtc-client #remote-video {
  width: 320px;
  height: 240px;
  /* max-height: 480px; */
  background-color: #eee;
}

#com-chilipeppr-widget-webrtc-client #video-container {
    padding: 0;
    text-align: center;
    margin-bottom:-5px;
}

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

#com-chilipeppr-widget-webrtc-client .pure-u-1-3-wrapper-relative{
    /* position:relative; */
}
#com-chilipeppr-widget-webrtc-client .alert {
    margin-bottom:0;
}
#com-chilipeppr-widget-webrtc-client .pure-u-1-3 {
    /* position:absolute; */
    left:10px;
    top:10px;
    right:10px;
}
#com-chilipeppr-widget-webrtc-body:after {
    content:none;
}

JavaScript

requirejs.config({
    paths: {
        peerJs: 'http://cdn.peerjs.com/0.3/peer',
        jqueryui: '//chilipeppr.com/js/jquery-ui-1.10.4/ui/jquery.ui.core',
        jqueryuiWidget: '//chilipeppr.com/js/jquery-ui-1.10.4/ui/jquery.ui.widget',
        jqueryuiMouse: '//chilipeppr.com/js/jquery-ui-1.10.4/ui/jquery.ui.mouse',
        jqueryuiResizeable: '//chilipeppr.com/js/jquery-ui-1.10.4/ui/jquery.ui.resizable',
    },
    shim: {
        jqueryuiWidget: ['jqueryui'],
        jqueryuiMouse: ['jqueryuiWidget'],
        jqueryuiResizeable: ['jqueryuiMouse' ]
    }
});

            var ws = null;
            var pc;
            var pcConfig = {"iceServers": [
                    {"url": "stun:stun.l.google.com:19302"},
                    {"url": "stun:192.168.0.116:3478"}
                ]};
            var pcOptions = {
                optional: [
                    {DtlsSrtpKeyAgreement: true}
                ]
            };
            var mediaConstraints = {
                optional: [],
                mandatory: {
                    OfferToReceiveAudio: true,
                    OfferToReceiveVideo: true
                }
            };

            RTCPeerConnection = window.mozRTCPeerConnection || window.webkitRTCPeerConnection;
            RTCSessionDescription = window.mozRTCSessionDescription || window.RTCSessionDescription;
            RTCIceCandidate = window.mozRTCIceCandidate || window.RTCIceCandidate;
            getUserMedia = navigator.mozGetUserMedia || navigator.webkitGetUserMedia;
            URL = window.webkitURL || window.URL;

            function createPeerConnection() {
                try {
                    pc = new RTCPeerConnection(pcConfig, pcOptions);
                    pc.onicecandidate = onIceCandidate;
                    pc.onaddstream = onRemoteStreamAdded;
                    pc.onremovestream = onRemoteStreamRemoved;
                    console.log("peer connection successfully created!");
                } catch (e) {
...