<!doctype html>
<html lang="en">

  <head>
    <meta charset="utf-8">

    <title>palava: FOSS P2P-Videoconferences on the web</title>

    <meta name="description" content="palava: FOSS P2P-Videoconferences on the web">
    <meta name="author" content="Marius Melzer">

    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="css/reveal.min.css">
    <link rel="stylesheet" href="css/theme/default.css" id="theme">
    <link rel="stylesheet" href="lib/css/zenburn.css">

    <script>
      document.write( '<link rel="stylesheet" href="css/print/' + ( window.location.search.match( /print-pdf/gi ) ? 'pdf' : 'paper' ) + '.css" type="text/css" media="print">' );
    </script>

    <style>
      #gum-video {
        height: 1000px;
        background: black;
        box-shadow: 0px 0px 20px #333;
      }
      pre code {
        font-size: 21pt;
        line-height: 25pt;
        background: #111;
      }
      pre .xml .javascript {
        opacity: 1;
        color: #fff;
      }
    </style>

    <!--[if lt IE 9]>
    <script src="lib/js/html5shiv.js"></script>
    <![endif]-->
  </head>

  <body>
    <div class="reveal">
      <!-- Any section element inside of this container is displayed as a slide -->
      <div class="slides">
        <section>
          <section>
            <h1>palava
              <h2>Encrypted P2P-Videoconferences<br> on the web</h2>  
            <br>
            <h3>Marius Melzer</h3>
          </section>
        </section>

        <section>
          <section>
            <img src="images/palava-website1.png" />
          </section>

          <section>
            <img src="images/palava-website2.png" />
          </section>

          <section>
            <img src="images/palava-website3.png" />
          </section>
        </section>

        <section>
          <section>
            <h2>WebRTC</h2>
            <h4>new web standard (currently in firefox & chrome)</h4>
            <h4>allows p2p-connections between browsers ...</h4>
            <h4>... and video/audio streams on top</h4>
          </section>
              
          <section>
            <img src="images/webrtc-components.png" />
          </section>

          <section>
            <pre><code data-trim contenteditable>
<video id="gum-video" autoplay="autoplay">

<script>
  navigator.webkitGetUserMedia(
    {video: true, audio: false},
    function(stream) {
      document.getElementById('gum-video').src =
          webkitURL.createObjectURL(stream);
    }
  );
</script>
            </code></pre>
          </section>
        </section>

        <section>
          <section>
            <h2>P2P connection requirements</h2>
            <h4>Initialisation over signaling server</h4>
            <h4>Exchange of streaming properties over SDP</h4>
            <h4>NAT traversal via ICE (STUN server)</h4>
            <h4>Interop problems & workarounds</h4>
          </section>
        </section>

        <section>
          <section>
            <h2>Signaling</h2>
          </section>
          <section>
            <img src="images/signaling-server.png">
          </section>
          <section>
            <img src="images/join.png">
          </section>
          <section>
            <img src="images/offer-answer.png">
          </section>
          <section>
            <img src="images/stun1.png">
          </section>
          <section>
            <img src="images/stun2.png">
          </section>
          <section>
            <img src="images/peerconnection.png">
          </section>
        </section>

        <section>
          <section>
            <h2>palava software stack<h2>
            <h4> completely free & open source</h4>
          </section>

          <section>
            <h2> palava machine</h2>
            <h4>our "tracker"</h4>
            <h4>room & signaling server</h4>
          </section>

          <section>
            <h2>palava client</h2>
            <h4>webrtc wrapper library for video conferencing</h4>
          </section>

          <section>
            <h2>palava portal</h2>
            <h4>web plattform using the palava client</h4>
          </section>
        </section>

        <section>
          <section>
            <h3>Signaling Protocol</h3>
            <p class="fragment">A few defined JSON messages</p>
          </section>

          <section>
            <h3>Client → Server</h3><br/>
            <p><code>join_room(room_id, status)</code></p>
            <p><code>send_to_peer(peer_id, data)</code></p>
            <p><code>update_status(status)</code></p>
          </section>

          <section>
            <h3>Server → Client</h3><br/>
            <p><code>joined_room(me, peers)</code></p>
            <p><code>peer_updated_status(peer_id, peer_status)</code></p>
            <p><code>error(id, message)</code></p>
            <p><code>shutdown(seconds)</code></p>
          </section>

          <section>
            <h3>Client → Client</h3>
            <h4>via <code>send_to_peer</code></h4><br/>
            <p><code>offer(sdp)</code></p>
            <p><code>answer(sdp)</code></p>
            <p><code>ice_candidate(...)</code></p>
          </section>
        </section>
        
        <section>
          <section>
            <h2> https://palava.tv</h2>
            <h4> one running palava instance</h4>
            <h4> video conferences with as many people as your bandwidth allows</h4>
            <h4> no registration or login required</h4>
            <h4> provides open stun + signaling</h4>
          </section>
        </section>
        
        <section>
          <section>
            <h2> who is palava?</h2>
            <h4> 4 founders: Jan Lelis, Marius Melzer, Stephan Thamm, Kilian Ulbrich</h4>
            <h4> non-profit organisation</h4>
            <h4> 14 members</h4>
            <br>
            <img src="images/palava-logo.png" style="border:none;" width="350px" />
          </section>

          <section>
            <h2> How you can help us?</h2>
            <h4> Hack on it!</h4>
          </section>
          <section>
            <h2>Code</h2>
            <a href="https://github.com/palavatv" style="white-space:nowrap">https://github.com/palavatv</a>
          </section>
          <section>
            <h2>Setting up the components</h2>
            <a href="https://blog.palava.tv/2013/12/How_to_host_your_own_WebRTC_Video_Conferencing_on_ubuntu/" style="white-space:nowrap;font-size:19pt">https://blog.palava.tv/2013/12/How_to_host_your_own_WebRTC_Video_Conferencing_on_ubuntu/</a>
          </section>
          <section>
            <h2>Basic usage of palava client library</h2>
            <a href="https://gist.github.com/farao/8392186" style="white-space:nowrap">https://gist.github.com/farao/8392186</a>
          </section>
          <section>
            <h4>You can use your own signaling & stun (2 ips!) or ours!</h4>
          </section>

          <section>
            <h2>Ideas</h2>
            <h4>More decentralisation</h4>
          </section>

          <section>
            <h2>Ideas</h2>
            <h4>Easy Deployment</h4>
          </section>

          <section>
            <h2>Ideas</h2>
            <h4>Usability for "regular pc users"</h4>
          </section>

          <section>
            <h2>Ideas</h2>
            <h4>I18n</h4>
          </section>

          <section>
            <h2>Ideas</h2>
            <h4>Error management +<br>Automated browser testing</h4>
          </section>

          <section>
            <h2>Ideas</h2>
            <h4>TURN + Ports 80/443</h4>
          </section>

          <section>
            <h2>Ideas</h2>
            <h4>Features: Text chat, File transfer, Screen sharing</h4>
          </section>

          <section>
            <h2>Ideas</h2>
            <h4>Mobile</h4>
          </section>

          <section>
            <h2> How can you help?</h2>
            <h4> Coding</h4>
            <h4> Designing</h4>
            <h4> Money (appeal for funds coming soon)</h4>
            <h4> Spreading the word!</h4>
          </section>
        </section>

        <section>
          <section>
            <h2>Get in contact with palava</h2>
            <h4><a href="https://twitter.com/palavatv">@palavatv</a></h4>
            <h4><a href="https://blog.palava.tv" style="white-space:nowrap">https://blog.palava.tv</a></h4>
            <h4>Developer Mailinglist: http://discuss.palava.tv</h4>
            <h4>Newsletter ("Get updates")</h4>
            <h4>Email: contact@palava.tv</h4>
          </section>

          <section>
            <h2>Get in contact with me</h2>
            <h4><a href="https://twitter.com/faraoso">@faraoso</a></h4>
            <h4>Email & Jabber: marius@rasumi.net</h4>
          </section>
        </section>
      </div>
    </div>

    <script src="lib/js/head.min.js"></script>
    <script src="js/reveal.min.js"></script>

    <script>
      // Full list of configuration options available here:
      // https://github.com/hakimel/reveal.js#configuration
      Reveal.initialize({
        controls: true,
        progress: true,
        history: true,
        center: true,

        theme: Reveal.getQueryHash().theme || 'beige', // available themes are in /css/theme
        transition: Reveal.getQueryHash().transition || 'concave', // default/cube/page/concave/zoom/linear/fade/none

        // Optional libraries used to extend on reveal.js
        dependencies: [
          { src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
          { src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
          { src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
          { src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
          { src: 'plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
          { src: 'plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }
        ]
      });
    </script>
  </body>
</html>
