Explore WebRTC via Canvas exchange

Ryuno-Ki · Apr 15, 2020 · bb16ebc5da31d6c48c0b48b69d4486631b2d77e9 · bb16ebc
1 parent 6dcd2a7
commit bb16ebc5da31d6c48c0b48b69d4486631b2d77e9
Showing 6 changed files with 188 additions and 5 deletions.
diff --git a/index.html b/index.html
@@ -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>
diff --git a/index.js b/index.js
@@ -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)

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -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",

diff --git a/rollup.config.js b/rollup.config.js
@@ -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/'
   }]
 }

diff --git a/rtc.js b/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