Skip to content
This repository has been archived by the owner. It is now read-only.
Permalink
Browse files
Explore WebRTC via Canvas exchange
  • Loading branch information
Ryuno-Ki committed Apr 15, 2020
1 parent 6dcd2a7 commit bb16ebc5da31d6c48c0b48b69d4486631b2d77e9
Showing 6 changed files with 188 additions and 5 deletions.
@@ -1,3 +1,4 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
@@ -25,12 +26,14 @@
height: 572px;
}
</style>
<base href="/gamedevjs-2020/"></base>
</head>
<body>
<div id="messages"></div>
<div id="game">
<canvas id="content" width="706" height="572">
</canvas>
</div>
<script src="./dist/simple-peer/simplepeer.min.js"></script>
<script src="./dist/game.js"></script>
</body>
</html>
@@ -9,6 +9,7 @@ const {

const loadAssets = require('./assets')
const persistChanges = require('./persistance')
const invitePeers = require('./rtc')
const renderGround = require('./scenes/game.scene')
const renderBall = require('./sprites/ball')
const renderBasket = require('./sprites/basket')
@@ -20,6 +21,9 @@ const { moveBall, moveOpponent, movePlayer } = require('./update')

window.onload = async () => {
'use strict'
const messages = document.getElementById('messages')
invitePeers(messages)

const { canvas, context } = init()

maybeRescale(canvas, context)

Some generated files are not rendered by default. Learn more.

@@ -7,7 +7,6 @@
"build": "rollup -c",
"deploy": "npm run gh-pages",
"gh-pages": "gh-pages -d dist",
"postbuild": "npm run gh-pages",
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
@@ -22,7 +21,9 @@
},
"homepage": "https://github.com/Ryuno-Ki/gamedevjs-2020#readme",
"dependencies": {
"kontra": "6.9.1"
"kontra": "6.9.1",
"simple-peer": "9.6.2",
"webrtc-adapter": "7.5.1"
},
"devDependencies": {
"@rollup/plugin-commonjs": "11.1.0",
@@ -26,6 +26,8 @@ const htmlOptions = {
const copyOptions = {
flatten: false,
targets: [{
src: 'node_modules/simple-peer/simplepeer.min.js', dest: 'dist/',
}, {
src: 'assets/**/*.png', dest: 'dist/assets/'
}]
}
81 rtc.js
@@ -0,0 +1,81 @@
function invitePeer (parent) {
const peer = new SimplePeer({
initiator: location.hash === '#1',
trickle: false
})

peer.on('error', (error) => console.error('error', error))

peer.on('signal', async (data) => {
const picture = await signalToPicture(data)
const canvas = appendPicture(parent, picture)
canvasToSignal(canvas)
console.log(JSON.stringify(data))
})

peer.on('connect', () => {
console.log('CONNECT')
peer.send('Whatever ' + Math.random())
})

peer.on('data', (data) => console.log('data ' + data))
}

function appendPicture (parent, picture) {
const canvas = document.createElement('canvas')
const context = canvas.getContext('2d')
const p = document.createElement('p')
const text = document.createTextNode('Please send your friend this picture to join')
console.log(picture)
canvas.width = picture.width
canvas.height = picture.height
context.drawImage(picture, 0, 0)

p.appendChild(text)
parent.appendChild(p)
parent.appendChild(canvas)
return canvas
}

async function signalToPicture (signal) {
const gapValue = 0
const base64Signal = btoa(signal)
const decSignal = base64Signal.split('').map(charToDec)

// XXX: This is a waste of RAM!
// But I couldn't come up with a more clever algorithm for now
let preparedArray = []
for (let i = 0; i < decSignal.length; i += 3) {
preparedArray = preparedArray
.concat(decSignal.slice(i, i+3))
.concat([ gapValue ])
}

// Fill up with gapValues until it can be divided by 64
const power = Math.ceil(Math.log(preparedArray.length) / Math.log(64))
preparedArray = preparedArray
.concat(new Array(Math.pow(64, power) - preparedArray.length).fill(gapValue))

const clamped = new Uint8ClampedArray(preparedArray)
const imageData = new ImageData(clamped, clamped.length / 4 / 16)
console.log(clamped, imageData)
return createImageBitmap(imageData, { colorSpaceConversion: 'none' })
}

function canvasToSignal (canvas) {
const width = 32
const height = 16
const context = canvas.getContext('2d')
const imageData = context.getImageData(0, 0, width, height)
console.table(imageData.data)
}

function decToChar (dec) {
return String.fromCharCode(dec)
}

function charToDec (char) {
return char.charCodeAt(0)
}

module.exports = invitePeer

0 comments on commit bb16ebc

Please sign in to comment.