Getting started with AirConsol...
Quick Start

8min
General idea
Create a new directory with two files screen.html and controller.html.
﻿
2. Include the AirConsole JS API and use it to communicate between devices.
﻿
3. Host your files (local/remote) and call: airconsole.com/#http://YOUR_GAME_URL/
﻿
Step by step guide
Create files:
Create a new directory for your game (E.g. game) and create two files in it:
/game
﻿screen.html﻿
﻿controller.html﻿
The screen.html is for the gameconsole's screen.
The controller.html are for the gameconsole's controllers (gamepads).
﻿
Make sure both files can be accessed by: http://your-local-webserver/screen.html (or /controller.html)
If you don't want to create your own screen.html and controller.html right now and just play around, you can use our pong example (pong.zip) from the Classic Pong walkthrough.
Include AirConsole Javascript API file:
Include the AirConsole Javascript API in both files /screen.html and /controller.html﻿
HTML
<script type="text/javascript" src="https://www.airconsole.com/api/airconsole-1.9.0.js"></script>
<script type="text/javascript" src="https://www.airconsole.com/api/airconsole-1.9.0.js"></script>
﻿
Send a message:
Here is a simple example where the controller sends "How are you?" to the screen and the screen replies with "Full of pixels!"
﻿/controller.html﻿
JS
 <button id="btn-msg">Send Message</button>

 <script type="text/javascript">
    var airconsole = new AirConsole();

    // When we press our button, we send a message to the screen
    document.getElementById('btn-msg').addEventListener("click", function() {
      airconsole.message(AirConsole.SCREEN, "How are you?");
    });

    // Listen for messages
    airconsole.onMessage = function(from, data) {

      // Show message on device screen
      var info = document.createElement('DIV');
      info.innerHTML = data;
      document.body.appendChild(info);
    };
</script>   
 <button id="btn-msg">Send Message</button>

 <script type="text/javascript">
    var airconsole = new AirConsole();

    // When we press our button, we send a message to the screen
    document.getElementById('btn-msg').addEventListener("click", function() {
      airconsole.message(AirConsole.SCREEN, "How are you?");
    });

    // Listen for messages
    airconsole.onMessage = function(from, data) {

      // Show message on device screen
      var info = document.createElement('DIV');
      info.innerHTML = data;
      document.body.appendChild(info);
    };
</script>   
﻿
﻿/screen.html﻿
JS
<script type="text/javascript">
    var airconsole = new AirConsole();

    // Listen for messages from other devices
    airconsole.onMessage = function(from, data) {

      // We receive a message -> Send message back to the device
      airconsole.message(from, "Full of pixels!");

      // Show message on device screen
      var info = document.createElement('DIV');
      info.innerHTML = data;
      document.body.appendChild(info);
    };
</script>
<script type="text/javascript">
    var airconsole = new AirConsole();

    // Listen for messages from other devices
    airconsole.onMessage = function(from, data) {

      // We receive a message -> Send message back to the device
      airconsole.message(from, "Full of pixels!");

      // Show message on device screen
      var info = document.createElement('DIV');
      info.innerHTML = data;
      document.body.appendChild(info);
    };
</script>
﻿
Test your game:
You need to start a local webserver in your /game folder to serve the screen.html and controller.html﻿
In this example we will host the two files on:
http://192.168.0.1:8080/screen.html
http://192.168.0.1:8080/controller.html
To run the game, go with the browser that should act as the screen to:
﻿http://www.airconsole.com/#http://192.168.0.1:8080/﻿
NOTE: there is NO screen.html at the end!
Game controllers (your smartphone) can join as usual over www.airconsole.com.
Enter the code you see on the screen. The devices should now exchange the messages.
Simulator:
If you append /simulator in the URL, then you will get a split view of the screen and two controllers:
﻿http://www.airconsole.com/simulator/#http://192.168.0.1:8080/﻿
This makes testing and developing a lot easier
 If you run into issue with HTTPS (mixed content issues), refer to the tunneling guide.
Device Ids - Important warning:
Make sure you do not assume that the controllers have device_ids 1, 2, 3 ... We strongly recommend you read the device ids and states guide!
Next steps:
Checkout the guide about our pong example or the API to learn more about how to build games for AirConsole.
Updated 27 Sep 2024
Did this page help you?
Introduction
API Methods Overwiew