Whoops!

shama · shama · commit 57c0b1aba7b5 · 2018-05-04T17:48:16.000-07:00
diff --git a/simple-p2p-with-webrtc/README.md b/simple-p2p-with-webrtc/README.md
@@ -1,7 +1,10 @@
-# Simple P2P with WebRTC
+# P2P Signaling for WebRTC
+# I MADE A WEBRTC MISTAKE
 
 > [https://youtu.be/jY9k4rfXwEI](https://youtu.be/jY9k4rfXwEI)
 
+> UPDATED with WebRTC: [https://youtu.be/gDnS1tnp1ZQ](https://youtu.be/gDnS1tnp1ZQ)
+
 Install [Node.js](https://nodejs.org/).
 
 Within this folder run the terminal command `npm install` to install the
diff --git a/simple-p2p-with-webrtc/index.js b/simple-p2p-with-webrtc/index.js
@@ -1,43 +1,73 @@
-const signalhub = require('signalhub')
-const hub = signalhub('my-game', [
-  'http://localhost:8080'
-])
-
-const Player = require('./player.js')
-const you = new Player()
-
-const players = {}
-hub.subscribe('update').on('data', function (data) {
-  if (data.color === you.color) return
-  if (!players[data.color]) {
-    players[data.color] = new Player(data)
-  }
-  players[data.color].update(data)
-  //console.log(data)
-})
+navigator.mediaDevices.getUserMedia({ video: true, audio: true }).then(function (stream) {
+
+  const signalhub = require('signalhub')
+  const createSwarm = require('webrtc-swarm')
+  const hub = signalhub('my-game', [
+    'http://localhost:8080'
+  ])
+  const swarm = createSwarm(hub, {
+    stream: stream
+  })
+
+  const Player = require('./player.js')
+  const you = new Player()
+  you.addStream(stream)
+
+  const players = {}
+  swarm.on('connect', function (peer, id) {
+    if (!players[players]) {
+      players[id] = new Player()
+      peer.on('data', function (data) {
+        data = JSON.parse(data.toString())
+        players[id].update(data)
+      })
+      players[id].addStream(peer.stream)
+    }
+  })
 
-setInterval(function () {
-  //hub.broadcast('update', window.location.hash)
-  you.update()
-  hub.broadcast('update', you)
-}, 100)
-
-document.addEventListener('keypress', function (e) {
-  const speed = 16
-  switch (e.key) {
-    case 'a':
-      you.x -= speed
-      break
-    case 'd':
-      you.x += speed
-      break
-    case 'w':
-      you.y -= speed
-      break
-    case 's':
-      you.y += speed
-      break
-  }
-}, false)
+  swarm.on('disconnect', function (peer, id) {
+    if (players[id]) {
+      players[id].element.parentNode.removeChild(players[id].element)
+      delete players[id]
+    }
+  })
 
+  // hub.subscribe('update').on('data', function (data) {
+  //   if (data.color === you.color) return
+  //   if (!players[data.color]) {
+  //     players[data.color] = new Player(data)
+  //   }
+  //   players[data.color].update(data)
+  //   //console.log(data)
+  // })
+
+  setInterval(function () {
+    //hub.broadcast('update', window.location.hash)
+    you.update()
+    //hub.broadcast('update', you)
+    const youString = JSON.stringify(you)
+    swarm.peers.forEach(function (peer) {
+      peer.send(youString)
+    })
+  }, 100)
+
+  document.addEventListener('keypress', function (e) {
+    const speed = 16
+    switch (e.key) {
+      case 'a':
+        you.x -= speed
+        break
+      case 'd':
+        you.x += speed
+        break
+      case 'w':
+        you.y -= speed
+        break
+      case 's':
+        you.y += speed
+        break
+    }
+  }, false)
+
+})
 
diff --git a/simple-p2p-with-webrtc/package.json b/simple-p2p-with-webrtc/package.json
@@ -13,6 +13,7 @@
     "budo": "^11.2.0"
   },
   "dependencies": {
-    "signalhub": "^4.9.0"
+    "signalhub": "^4.9.0",
+    "webrtc-swarm": "^2.9.0"
   }
 }
diff --git a/simple-p2p-with-webrtc/player.js b/simple-p2p-with-webrtc/player.js
@@ -5,10 +5,10 @@ function Player (data) {
   this.color = data.color || randomColor()
   this.x = 0
   this.y = 0
-  this.element = document.createElement('div')
+  this.element = document.createElement('video')
   Object.assign(this.element.style, {
-    width: '16px',
-    height: '16px',
+    width: '64px',
+    height: '64px',
     position: 'absolute',
     top: '0px',
     left: '0px',
@@ -17,6 +17,11 @@ function Player (data) {
   document.body.appendChild(this.element)
 }
 
+Player.prototype.addStream = function (stream) {
+  this.element.srcObject = stream
+  this.element.play()
+}
+
 Player.prototype.update = function (data) {
   data = data || {}
   this.x = data.x || this.x
@@ -28,5 +33,5 @@ Player.prototype.update = function (data) {
 }
 
 function randomColor () {
-  return '#' + ((1 << 24) * Math.random() | 0).toString()
+  return '#' + Math.random().toString(16).substr(-6)
 }

Original file line number	Diff line number	Diff line change
`@@ -13,6 +13,7 @@`
`13`	`13`	`"budo": "^11.2.0"`
`14`	`14`	`},`
`15`	`15`	`"dependencies": {`
`16`		`- "signalhub": "^4.9.0"`
	`16`	`+ "signalhub": "^4.9.0",`
	`17`	`+ "webrtc-swarm": "^2.9.0"`
`17`	`18`	`}`
`18`	`19`	`}`