<!--
> Muaz Khan     - github.com/muaz-khan 
> MIT License   - www.webrtc-experiment.com/licence
> Documentation - www.RTCMultiConnection.org
-->
<!DOCTYPE html>
<html id="home" lang="en">

<head>
    <title>audio-conferencing + file-sharing + text-chat using RTCMultiConnection ® Muaz Khan</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <link rel="author" type="text/html" href="https://plus.google.com/+MuazKhan">
    <meta name="author" content="Muaz Khan">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <style>
    @import url(https://fonts.googleapis.com/css?family=Inconsolata);
    html {
        background: #eee;
    }
    body {
        font-family: "Inconsolata", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace;
        font-size: 1.2em;
        line-height: 1.2em;
        margin: 0;
    }
    article,
    footer {
        display: block;
        max-width: 900px;
        min-width: 360px;
        width: 80%;
    }
    article {
        background: #fff;
        border: 1px solid;
        border-color: #ddd #aaa #aaa #ddd;
        margin: 2.5em auto 0 auto;
        padding: 2em;
    }
    h1 {
        margin-top: 0;
    }
    article p:first-of-type {
        margin-top: 1.6em;
    }
    article p:last-child {
        margin-bottom: 0;
    }
    footer {
        margin: 0 auto 2em auto;
        text-align: center;
    }
    footer a {
        color: #666;
        font-size: inherit;
        padding: 1em;
        text-decoration: none;
        text-shadow: 0 1px 1px #fff;
    }
    footer a:hover,
    footer a:focus {
        color: #111;
    }
    h1,
    h2 {
        border-bottom: 1px solid black;
        display: inline;
        font-weight: normal;
        line-height: 36px;
        padding: 0 0 3px 0;
    }
    a {
        color: #2844FA;
        text-decoration: none;
    }
    a:hover,
    a:focus {
        color: #1B29A4;
    }
    a:active {
        color: #000;
    }
    :-moz-any-link:focus {
        border: 0;
        color: #000;
    }
    ::selection {
        background: #ccc;
    }
    ::-moz-selection {
        background: #ccc;
    }
    button,
    select {
        -moz-border-radius: 3px;
        -moz-transition: none;
        -webkit-transition: none;
        background: #0370ea;
        background: -moz-linear-gradient(top, #008dfd 0, #0370ea 100%);
        background: -webkit-linear-gradient(top, #008dfd 0, #0370ea 100%);
        border: 1px solid #076bd2;
        border-radius: 3px;
        color: #fff;
        display: inline-block;
        font-family: inherit;
        font-size: .8em;
        line-height: 1.3;
        padding: 5px 12px;
        text-align: center;
        text-shadow: 1px 1px 1px #076bd2;
    }
    button:hover {
        background: rgb(9, 147, 240);
    }
    button:active {
        background: rgb(10, 118, 190);
    }
    button[disabled] {
        background: none;
        border: 1px solid rgb(187, 181, 181);
        color: gray;
        text-shadow: none;
    }
    strong {
        color: rgb(204, 14, 14);
        font-family: inherit;
        font-weight: normal;
    }
    #result div {
        border: 1px solid Gray;
        border-bottom: 0;
        padding: .8em 1.5em;
    }
    select {
        color: black;
        text-align: left;
        text-shadow: none;
    }
    #remote-media-streams video {
        width: 10em;
    }
    #local-media-stream video {
        width: 34em;
    }
    td {
        vertical-align: top;
    }
    #chat-output div {
        border: 1px solid black;
        border-bottom: 0;
        padding: .1em .4em;
    }
    input {
        border: 1px solid black;
        font-family: inherit;
        margin: .1em .3em;
        outline: none;
        padding: .1em .2em;
        width: 93%;
    }
    #chat-output {
        margin: 0 0 0 .4em;
        max-height: 12em;
        overflow: auto;
    }
    pre {
        border-left: 2px solid red;
        margin-left: 2em;
        padding-left: 1em;
    }
    </style>
    <!-- for HTML5 el styling -->
    <script>
    document.createElement('article');
    document.createElement('footer');
    </script>

    <script src="//cdn.webrtc-experiment.com/firebase.js">
    </script>
    <script src="//cdn.webrtc-experiment.com/RTCMultiConnection-v1.2.js">
    </script>
</head>

<body>
    <article>
        <a href="https://www.webrtc-experiment.com/" style="border-bottom: 1px solid #2844FA; font-size: 1.2em; position: absolute; right: 0; text-decoration: none; top: 0;">↑ WEBRTC EXPERIMENTS</a>


        <h1>
            audio-conferencing and data-sharing
            <a href="https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RTCMultiConnection" target="_blank">RTCMultiConnection</a>
        </h1>

        <p>
            <span>Copyright © 2013</span> <a href="https://github.com/muaz-khan" target="_blank">Muaz



                                                  Khan</a>
            <span>&lt;</span><a href="http://twitter.com/muazkh" target="_blank">@muazkh</a>
            <span>&gt;.</span>
        </p>
        <section class="plusone-gplus">
            <div class="g-plusone" data-href="https://www.webrtc-experiment.com/"></div>
        </section>

        <section>
            <h2>Open New Session:</h2>
            <button id="open-session">Open Session</button>
        </section>
        <table style="border-left: 1px solid black; width: 100%;">
            <tr>
                <td style="width: 80%;">
                    <h2 style="display: block; text-align: center;">Local Media Stream</h2>

                    <section id="local-media-stream"></section>
                    <table id="rooms-list"></table>
                </td>
                <td style="background: white; border-left: 1px solid black;">
                    <h2 style="display: block; font-size: 1em; text-align: center;">Share Files</h2>

                    <input type="file" id="file" disabled>
                    <br/>

                    <h2 style="display: block; font-size: 1em; text-align: center;">Text Chat</h2>

                    <div id="chat-output"></div>
                    <input type="text" id="chat-input" style="font-size: 1.2em;" placeholder="chat message" disabled>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <h2 style="display: block; text-align: center;">Remote Media Streams</h2>

                    <section id="remote-media-streams"></section>
                </td>
            </tr>
        </table>
        <script>
        var connection = new RTCMultiConnection('only-audio-and-data', {
            session: 'audio+data'
        });

        var roomsList = document.getElementById('rooms-list');
        connection.onNewSession = function(session) {
            console.log('New Session', session);

            var alreadyExists = document.getElementById(session.userid);
            if (alreadyExists) return;

            if (!window.sessions) window.sessions = {};
            window.sessions[session.userid] = session;

            var tr = document.createElement('tr');
            tr.innerHTML = '<td>' + session.userid + ' shared a room with you.</td>';

            var td = document.createElement('td');

            var button = document.createElement('button');
            button.setAttribute('id', session.userid);
            button.innerHTML = 'Join';

            td.appendChild(button);
            tr.appendChild(td);
            roomsList.insertBefore(tr, roomsList.firstChild);

            button.onclick = function() {
                var session = window.sessions[this.id];
                connection.join(session);
                roomsList.style.display = 'none';
                document.getElementById('open-session').disabled = true;
            };
        };
        connection.onopen = function() {
            if (document.getElementById('chat-input')) document.getElementById('chat-input').disabled = false;
            if (document.getElementById('file')) document.getElementById('file').disabled = false;

            if (document.getElementById('open-session')) document.getElementById('open-session').disabled = true;
        };

        connection.onmessage = function(data) {
            appendDIV(data);
        };

        connection.onstream = function(stream) {
            if (stream.type === 'remote') {
                var mediaElement = stream.mediaElement;
                if (stream.direction !== RTCDirection.OneWay) {
                    var remoteMediaStreams = document.getElementById('remote-media-streams');
                    remoteMediaStreams.insertBefore(mediaElement, remoteMediaStreams.firstChild);
                } else document.getElementById('local-media-stream').appendChild(mediaElement);
                mediaElement.controls = true;
            }

            if (stream.type === 'local') {
                mediaElement = stream.mediaElement;
                document.getElementById('local-media-stream').appendChild(mediaElement);
                mediaElement.controls = true;
            }
        };

        connection.onFileProgress = function(packets) {
            appendDIV(packets.remaining + ' packets remaining.');
            if (packets.sent) appendDIV(packets.sent + ' packets sent.');
            if (packets.received) appendDIV(packets.received + ' packets received.');
        };

        connection.onFileReceived = function(fileName) {
            appendDIV(fileName + ' received.');
        };

        connection.onFileSent = function(file) {
            appendDIV(file.name + ' sent.');
        };

        document.getElementById('open-session').onclick = function() {
            connection.open();

            this.disabled = true;
            var hash = location.hash.replace('#', '');
            roomsList.style.display = 'none';
            document.getElementById('open-session').disabled = true;
        };

        document.getElementById('file').onchange = function() {
            var file = this.files[0];
            connection.send(file);
        };

        var chatOutput = document.getElementById('chat-output');

        function appendDIV(data) {
            var div = document.createElement('div');
            div.innerHTML = data;
            chatOutput.insertBefore(div, chatOutput.firstChild);
            div.tabIndex = 0;
            div.focus();
        }

        document.getElementById('chat-input').onkeypress = function(e) {
            if (e.keyCode !== 13 || !this.value) return;
            appendDIV(this.value);
            connection.send(this.value);
            this.value = '';
            this.focus();
        };
        </script>
        <br/>
        <br/>

        <h2>Getting started with <a href="https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RTCMultiConnection" target="_blank">RTCMultiConnection</a>
        </h2>
        <pre>
            &lt;script src="<a href="https://www.webrtc-experiment.com/RTCMultiConnection-v1.2.js" target="_blank">https://www.webrtc-experiment.com/RTCMultiConnection-v1.2.js</a>"&gt;&lt;/script&gt; &lt;script&gt; var room = new
            <strong>RTCMultiConnection</strong>('session-id'); room.session = 'audio + data'; if(room-owner) room.
            <strong>open</strong>(); &lt;/script&gt;
        </pre>
        <br/>
        <br/>

        <section style="border: 1px solid rgb(189, 189, 189); border-radius: .2em; margin: 1em 3em;">
            <h2 id="feedback" style="border-bottom: 1px solid rgb(189, 189, 189); padding: .2em .4em;">Feedback</h2>
            <div>
                <textarea id="message" style="border: 1px solid rgb(189, 189, 189); height: 8em; margin: .2em; outline: none; resize: vertical; width: 98%;" placeholder="Have any message? Suggestions or something went wrong?"></textarea>
            </div>
            <button id="send-message" style="font-size: 1em;">Send Message</button>
        </section>
    </article>
    <footer>
        <p>
            <a href="https://www.webrtc-experiment.com/" target="_blank">WebRTC Experiments!</a>©
            <a href="https://plus.google.com/100325991024054712503" rel="author" target="_blank">Muaz Khan</a>,
            <span>2013 </span>»
            <a href="mailto:muazkh@gmail.com" target="_blank">Email</a>»
            <a href="http://twitter.com/muazkh" target="_blank">@muazkh</a>»
            <a href="https://github.com/muaz-khan" target="_blank">Github</a>
        </p>
    </footer>
</body>
<script src="//cdn.webrtc-experiment.com/commits.js">
</script>

</html>