Mobile device talks with browser

Wednesday 19.11.2014
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, WebSockets and Javascript, 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

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 service. WebSockets 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 and PHP based Ratchet.

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!

What happens next is completely up to you as a application / game developer. We use this technique to trigger Javascript 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 ;)
Author: Ville Lähde