Live View provides real-time remote access to Android devices, allowing you to directly control and interact with cloud-based Android devices through your browser.

Get Started

1

Get an API Key

  1. Go to Gbox AI
  2. Copy your API Key
  3. Paste your Gbox API Key into your env file
.env
GBOX_API_KEY=gbox-******
2

Install Gbox SDK and dependencies

Install gbox-sdk and other required dependencies by running the following command in your terminal.

npm install gbox-sdk dotenv typescript tsx @types/node open
3

Create a Live View box

Create a Live View box by creating the following code file.

import GboxSDK, { AndroidBoxOperator } from "gbox-sdk";
import * as dotenv from "dotenv";
import open from "open";

dotenv.config();

const gboxSDK = new GboxSDK({
  apiKey: process.env["GBOX_API_KEY"], // This is the default and can be omitted
});

let currentBox: AndroidBoxOperator | null = null;

async function gracefulShutdown() {
  if (currentBox) {
    console.log("Shutting down program, deleting Android box...");
    try {
      await currentBox.terminate();
      console.log("Box successfully terminated");
    } catch (error) {
      console.log(`Error terminating box: ${error}`);
    }
  }
  process.exit(0);
}

// Listen for SIGINT signal (Ctrl+C)
process.on("SIGINT", gracefulShutdown);
process.on("SIGTERM", gracefulShutdown);

async function main() {
  try {
    console.log("\nAndroid Box Manager Started\n");

    console.log("Creating Android box...");
    const box = await gboxSDK.create({ type: "android" });
    currentBox = box;

    console.log("Android box created successfully!");
    console.log(`Box ID: ${box.data.id}`);

    console.log("Getting live view...");
    const liveView = await box.liveView();

    console.log("Live view is ready!");
    console.log(`View URL: ${liveView.url}`);

    console.log("Opening browser...");
    console.log(
      `You can try operate the android box in the browser, and then press Ctrl+C to stop and terminate box\n`
    );
    await open(liveView.url, {
      wait: true,
    });

    // Keep the program running, waiting for SIGINT signal
    await new Promise(() => {});
  } catch (error) {
    console.log(`An error occurred: ${error}`);
    if (currentBox) {
      await gracefulShutdown();
    }
    process.exit(1);
  }
}

main();
4

Run the box

Run the Live View box by running the following command in your terminal.

npx tsx index.ts

Embed Live View in your website

You can embed Live View in your website by using the following code.

<iframe src="{YourLiveViewLink}" width="100%" height="100%" />