JSFiddle - React, Tailwind, and code Playground

HTML

//////////////////////////////////////////////
I pretty much copied everything off here..
http://cdn.peerjs.com/demo/videochat/
//////////////////////////////////////////////

<div class="pure-g">
        <div class="pure-u-2-3" id="video-container">
            <video id="their-video" autoplay></video>
            <video id="my-video" muted="true" autoplay></video>
        </div>

        <div class="pure-u-1-3">
            <h2>PeerJS Video Chat</h2>

            <div id="step1">
                <p>Please click `allow` on the top of the screen so we can access your webcam and microphone for calls.</p>
                <div id="step1-error">
                    <p>Failed to access the webcam and microphone. Make sure to run this demo on an http server and click allow when    asked for permission by the browser.</p>
                    <a href="#" class="pure-button pure-button-error" id="step1-retry">Try again</a>
                </div>
            </div>

            <div id="step2">
                <p>Your id: <span id="my-id">...</span></p>
                <p>Share this id with others so they can call you.</p>
                <h3>Make a call</h3>
                <div class="pure-form">
                    <input type="text" placeholder="Call user id..." id="callto-id">
                    <a href="#" class="pure-button pure-button-success" id="make-call">Call</a>
                </div>
            </div>

            <div id="step3">
                <p>Currently in call with <span id="their-id">...</span></p>
                <p><a href="#" class="pure-button pure-button-error" id="end-call">End call</a></p>
            </div>
        </div>
    </div>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="jquery-2.1.1.min.js"><\/script>')</script>
    <script src="modernizr-2.6.2.min.js"></script>
    <script src="bootstrap.min.js"></script>
</html>

JavaScript

////////////////////// server.js ////////////////////////
var PeerServer = require('peer').PeerServer;
var server = PeerServer({port: 3031, path: '/'});

server.on('connection', function(id) {
	console.log('Connected');
});

server.on('disconnected', function() {
	console.log('Disconnected');
});

server.on('call', function(data) {
	console.log(data);
});

console.log('Peers Server on 3031');
//////////////////////  ON PAGE SCRIPT /////////////////
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
        var peer = new Peer(
            '2sn9dmq5b3xr', {
                    host: 'demo.site.com', 
                    port: 3031, 
                    path: '/', 
                    debug: 3,
                    config: {'iceServers': [
                        { url: 'stun:stun.l.google.com:19302' }
                    ]}
                }
            );
            peer.on('open', function(){
                $('#my-id').text(peer.id);
            });

            peer.on('call', function(call){
                call.answer(window.localStream);
                step3(call);
            });
            
            peer.on('error', function(err){
                alert(err.message);
                step2();
            });

            $(function(){
                $('#make-call').click(function(){
                    var call = peer.call($('#callto-id').val(), window.localStream);
                    step3(call);
                });

                $('#end-call').click(function(){
                    window.existingCall.close();
                    step2();
                });

                $('#step1-retry').click(function(){
                    $('#step1-error').hide();
                    step1();
                });

                step1();
            });

            function step1 () {
                navigator.getUserMedia({audio: true, video: true}, function(stream){
                   ...