Networked QRCode Pairing

It all started by this tweet

IDEA: to pair 2 phones with webrtc, we could display a qrcode on one phone 
and scan it with the other. Thus the two phones will know each other and 
establish the connection 😎

I wanted to pair 2 phones together and have them play a game together. It would be nice if say 2 persons in the same room could play a game.

So i did this proof of concept.

Here is the repository networked-qrcode-pairing repository on github

Here is a running example on glitch

Principles

It is all done within the browser. So we leverage the url. The principles are simple:

• If the url of the page contains ?roomName=fooBar, then it will join the room fooBar.
• if the url doesn't contain any roomName parameters, we assume it is the first player to join and we create a new room with a random roomName. Other players will have to scan his qrCode to join his room.

Implementation Details

The implementation is quite straight forward. It is just an assembly of the proper piece of software.

• aframe for the 3d
• networked-aframe for the multi user part
• jquery.qrcode for generate the qrCode. (an old project of mine from 7years ago.. gasp 😱)

networked-aframe is doing most of the work. It is a very nice project done by the excelent @HaydenLee37.

It is the Getting Started example from networked-aframe. Then i just added qrcode generated from jquery.qrcode. Then i deployed it on glitch.

It went rather smoothly.

How to use the demo

First you install all dependancies

npm install

Then you run the local server

npm start

Deploy on glitch

Issue with AR

For this sharing mechanism to work, we need a qrcode reader able to launch the proper browser for our URL. Usually it launch the default browser: chrome on android, safari on ios. But here we would need to launch WebARonARCore/WebARonARKit.

Maybe it would be fixed with a url scheme.