There might be some situations that you wish you could operate your browser screen with your mobile device(s) or vice versa. Let's say you want to extend your desktop to a browser screen for instance dropping an article for later reading without having to browse to an article on your mobile screen. Or would you like as a game developer use the browser screen as an extended display for a mobile game, to display statistics or items or things like that?
Well this and more can be done using QR codes
, but first we must connect our device with the browser in use. You could do this in several ways. You could make the user to punch in a random code from browser screen to mobile device or vice versa, but the user don't want to do that, right? You could use NFC tags
, but then you'd be stuck with static codes and physical NFC
stickers attached on your computer. That is no good.
In this article, we use QR codes
to connect mobile device with web service on browser. The QR codes
are cool. They can contain a few hundred alphanumeric characters within one tag depending on the size and complexity of the tag. Usually they are used statically in posters or ads. The QR codes
contain mostly a link to a website related with the subject at hand. BTW you can create your custom QR-codes here https://www.the-qrcode-generator.com
We pass a dynamic QR code
from web page optically to our application within our device. The QR code
that we use, contains PHP
session ID of the web service. The session ID is created when the web service is fired the first time and it will remain the same until the end of the client web session, unless the client empties his or her cache. You could use some other identifier like IP address
, but session ID is better identifier because it is inevitable unique and anonymous for the user.
Now, when the user loads our web page, session ID is generated. Then we connect the web page with our WebSocket
handle real time, bi-directional communications between clients and servers. WebSocket
usage is not within the limits of this article, but there are a lot of open source solutions available such as Socket.IO
Next, the user fires up mobile application and points her or his device to browser screen. The application reads the QR code
from the browser screen. In our application, we use the Unity library called ZXing.Net
to read the code. Then application connects to WebSocket
using the acquired QR code
and voilà, you now shoud have a WebSocket
connection from your device to your browser screen!
events in our upcoming fighting game. Events such as changing the fight arena background screen, to start background music in browser, to display score and fighter energy bar, to make screen flicker when people are being punched and some other crazy shit like this ;)