Skip to content

Commit 57c0b1a

Browse files
shamashama
committed
Whoops!
1 parent 6db8124 commit 57c0b1a

4 files changed

Lines changed: 85 additions & 46 deletions

File tree

‎simple-p2p-with-webrtc/README.md‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
1-
# Simple P2P with WebRTC
1+
# P2P Signaling for WebRTC
2+
# I MADE A WEBRTC MISTAKE
23

34
> [https://youtu.be/jY9k4rfXwEI](https://youtu.be/jY9k4rfXwEI)
45
6+
> UPDATED with WebRTC: [https://youtu.be/gDnS1tnp1ZQ](https://youtu.be/gDnS1tnp1ZQ)
7+
58
Install [Node.js](https://nodejs.org/).
69

710
Within this folder run the terminal command `npm install` to install the

‎simple-p2p-with-webrtc/index.js‎

Lines changed: 70 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,73 @@
1-
const signalhub = require('signalhub')
2-
const hub = signalhub('my-game', [
3-
'http://localhost:8080'
4-
])
5-
6-
const Player = require('./player.js')
7-
const you = new Player()
8-
9-
const players = {}
10-
hub.subscribe('update').on('data', function (data) {
11-
if (data.color === you.color) return
12-
if (!players[data.color]) {
13-
players[data.color] = new Player(data)
14-
}
15-
players[data.color].update(data)
16-
//console.log(data)
17-
})
1+
navigator.mediaDevices.getUserMedia({ video: true, audio: true }).then(function (stream) {
2+
3+
const signalhub = require('signalhub')
4+
const createSwarm = require('webrtc-swarm')
5+
const hub = signalhub('my-game', [
6+
'http://localhost:8080'
7+
])
8+
const swarm = createSwarm(hub, {
9+
stream: stream
10+
})
11+
12+
const Player = require('./player.js')
13+
const you = new Player()
14+
you.addStream(stream)
15+
16+
const players = {}
17+
swarm.on('connect', function (peer, id) {
18+
if (!players[players]) {
19+
players[id] = new Player()
20+
peer.on('data', function (data) {
21+
data = JSON.parse(data.toString())
22+
players[id].update(data)
23+
})
24+
players[id].addStream(peer.stream)
25+
}
26+
})
1827

19-
setInterval(function () {
20-
//hub.broadcast('update', window.location.hash)
21-
you.update()
22-
hub.broadcast('update', you)
23-
}, 100)
24-
25-
document.addEventListener('keypress', function (e) {
26-
const speed = 16
27-
switch (e.key) {
28-
case 'a':
29-
you.x -= speed
30-
break
31-
case 'd':
32-
you.x += speed
33-
break
34-
case 'w':
35-
you.y -= speed
36-
break
37-
case 's':
38-
you.y += speed
39-
break
40-
}
41-
}, false)
28+
swarm.on('disconnect', function (peer, id) {
29+
if (players[id]) {
30+
players[id].element.parentNode.removeChild(players[id].element)
31+
delete players[id]
32+
}
33+
})
4234

35+
// hub.subscribe('update').on('data', function (data) {
36+
// if (data.color === you.color) return
37+
// if (!players[data.color]) {
38+
// players[data.color] = new Player(data)
39+
// }
40+
// players[data.color].update(data)
41+
// //console.log(data)
42+
// })
43+
44+
setInterval(function () {
45+
//hub.broadcast('update', window.location.hash)
46+
you.update()
47+
//hub.broadcast('update', you)
48+
const youString = JSON.stringify(you)
49+
swarm.peers.forEach(function (peer) {
50+
peer.send(youString)
51+
})
52+
}, 100)
53+
54+
document.addEventListener('keypress', function (e) {
55+
const speed = 16
56+
switch (e.key) {
57+
case 'a':
58+
you.x -= speed
59+
break
60+
case 'd':
61+
you.x += speed
62+
break
63+
case 'w':
64+
you.y -= speed
65+
break
66+
case 's':
67+
you.y += speed
68+
break
69+
}
70+
}, false)
71+
72+
})
4373

‎simple-p2p-with-webrtc/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
"budo": "^11.2.0"
1414
},
1515
"dependencies": {
16-
"signalhub": "^4.9.0"
16+
"signalhub": "^4.9.0",
17+
"webrtc-swarm": "^2.9.0"
1718
}
1819
}

‎simple-p2p-with-webrtc/player.js‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,10 @@ function Player (data) {
55
this.color = data.color || randomColor()
66
this.x = 0
77
this.y = 0
8-
this.element = document.createElement('div')
8+
this.element = document.createElement('video')
99
Object.assign(this.element.style, {
10-
width: '16px',
11-
height: '16px',
10+
width: '64px',
11+
height: '64px',
1212
position: 'absolute',
1313
top: '0px',
1414
left: '0px',
@@ -17,6 +17,11 @@ function Player (data) {
1717
document.body.appendChild(this.element)
1818
}
1919

20+
Player.prototype.addStream = function (stream) {
21+
this.element.srcObject = stream
22+
this.element.play()
23+
}
24+
2025
Player.prototype.update = function (data) {
2126
data = data || {}
2227
this.x = data.x || this.x
@@ -28,5 +33,5 @@ Player.prototype.update = function (data) {
2833
}
2934

3035
function randomColor () {
31-
return '#' + ((1 << 24) * Math.random() | 0).toString()
36+
return '#' + Math.random().toString(16).substr(-6)
3237
}

0 commit comments

Comments
 (0)