initial commit

js/main.js

@@ -0,0 +1,149 @@
+navigator.getUserMedia = navigator.getUserMedia ||
+                         navigator.mozGetUserMedia ||
+                         navigator.webkitGetUserMedia ||
+                         navigator.oGetUserMedia ||
+                         navigator.msGetUserMedia;
+
+$(function() {
+  var peer;
+  $('a[href="#call"]').click(function(e) {
+    e.preventDefault();
+
+    $('.modal.call').removeClass('hidden');
+  });
+
+  $('.modal.wait button').prop('disabled', false);
+
+  $('#call').submit(function(e) {
+    e.preventDefault();
+    var dest = $(this).find('input').val();
+    navigator.getUserMedia({audio: true, video: true}, function(stream) {
+      $('.self video').prop('src', window.URL.createObjectURL(stream));
+      $('.self video')[0].play();
+
+      if(!stream.getVideoTracks().length) {
+        $('.self p').removeClass('hidden');
+      }
+
+      var name = $('#name input').val();
+      var con = peer.connect(dest, {metadata: {name: name, id: peer.id}});
+      var call = peer.call(dest, stream);
+      $('.call').addClass('hidden');
+      $('.connecting').removeClass('hidden');
+
+      $('#chat').keyup(function(e) {
+        if(e.keyCode == 13) {
+          con.send({message: $(this).val(), name: name});
+          $(this).val('');
+        }
+      });
+
+      call.on('stream', function(str) {
+        if(!str.getVideoTracks().length) {
+          $('.remote p').removeClass('hidden');
+        }
+        $('.remote video').prop('src', window.URL.createObjectURL(str));
+        $('.remote video')[0].play();
+      });
+
+      con.on('open', function() {
+        $('.connecting').addClass('hidden');
+        con.on('data', function(d) {
+          if(d.decline) {
+            $('.declined').removeClass('hidden');
+            return con.close();
+          } else if(d.accept) {
+            $('.accepted').removeClass('hidden');
+            return;
+          }
+          $('.chat div').append('<p>' + d.name + ': ' + d.message + '</p>');
+        });
+
+      });
+
+    }, function(error) {
+      $('.modal.err p').text('An error occured: ' + error);
+    });
+  });
+
+  $('.close').click(function(e) {
+    e.preventDefault();
+
+    $(this).parent().addClass('hidden');
+  });
+
+  $('#name').submit(function(e) {
+    e.preventDefault();
+    var name = $(this).find('input').val();
+    $('.modal.wait button').prop('disabled', true);
+    $('.modal.wait p').removeClass('hidden');
+    peer = new Peer({key: 'mj5sqj5jz53zncdi'});
+
+    // PeerJS
+
+    peer.on('open', function() {
+      $('#id').html('Your ID is: ' + peer.id);
+      $('.modal.wait p').html('Connected');
+      $('.modal.wait').addClass('hidden');
+      $('.chat').removeClass('hidden');
+    });
+
+    peer.on('connection', function(con) {
+      $('.connected').removeClass('hidden').find('span').html(con.metadata.name);
+
+      $('#decline').click(function(e) {
+        e.preventDefault();
+        con.send({decline: true});
+        con.close();
+      });
+
+      $('#accept').click(function(e) {
+        e.preventDefault();
+        con.send({accept: true});
+        $(this).parent().addClass('hidden');
+      });
+
+      var name = $('#name input').val();
+
+      $('#chat').keyup(function(e) {
+        if(e.keyCode == 13) {
+          con.send({message: $(this).val(), name: name});
+          $(this).val('');
+        }
+      });
+
+      con.on('data', function(d) {
+
+        $('.chat div').append('<p>' + d.name + ': ' + d.message + '</p>');
+      });
+
+    });
+
+    peer.on('call', function(call) {
+      navigator.getUserMedia({audio: true, video: true}, function(stream) {
+
+        if(!stream.getVideoTracks().length) {
+          $('.self p').removeClass('hidden');
+        }
+
+        $('.self video').prop('src', window.URL.createObjectURL(stream));
+        $('.self video')[0].play();
+        call.answer(stream);
+
+        call.on('stream', function(str) {
+          $('.remote video').prop('src', window.URL.createObjectURL(str));
+          $('.remote video')[0].play();
+
+          if(!str.getVideoTracks().length) {
+            $('.remote p').removeClass('hidden');
+          }
+        });
+      }, function(err) {
+        $('.error').removeClass('hidden').find('p').text('An error occured: ' + err);
+      });
+    });
+
+
+  });
+
+});