> ## Documentation Index
> Fetch the complete documentation index at: https://docs.gbox.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Live View

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

<Steps>
  <Step title="Get an API Key">
    1. Go to [GBOX AI](http://gbox.ai)
    2. Copy your API Key
    3. Paste your GBOX API Key into your `env` file

    ```bash .env theme={null}
    GBOX_API_KEY=gbox-******
    ```
  </Step>

  <Step title="Install GBOX SDK and dependencies">
    Install gbox-sdk and other required dependencies by running the following command in your terminal.

    <CodeGroup>
      ```bash Typescript icon="https://cdn.worldvectorlogo.com/logos/typescript.svg" theme={null}
      npm install gbox-sdk dotenv typescript tsx @types/node open
      ```

      ```bash Python icon="https://cdn.worldvectorlogo.com/logos/python-5.svg" theme={null}
      # Set up a virtual environment
      python3 -m venv venv
      source venv/bin/activate

      pip install gbox-sdk python-dotenv
      ```
    </CodeGroup>
  </Step>

  <Step title="Create a Live View box">
    Create a Live View box by creating the following code file.

    <CodeGroup>
      ```typescript Typescript icon="https://cdn.worldvectorlogo.com/logos/typescript.svg" highlight={42} theme={null}
      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();
      ```

      ```python Python icon="https://cdn.worldvectorlogo.com/logos/python-5.svg" highlight={44} theme={null}
      import os
      import signal
      import sys
      import webbrowser
      from dotenv import load_dotenv
      from gbox_sdk import GboxSDK

      # Load environment variables from .env file
      load_dotenv()

      current_box = None

      def graceful_shutdown(signum, frame):
          global current_box
          if current_box:
              print("Shutting down program, deleting Android box...")
              try:
                  current_box.terminate()
                  print("Box successfully terminated")
              except Exception as error:
                  print(f"Error terminating box: {error}")
          sys.exit(0)

      # Listen for SIGINT signal (Ctrl+C)
      signal.signal(signal.SIGINT, graceful_shutdown)
      signal.signal(signal.SIGTERM, graceful_shutdown)

      def main():
          global current_box
          try:
              print("\nAndroid Box Manager Started\n")

              api_key = os.getenv("GBOX_API_KEY")
              gbox = GboxSDK(api_key=api_key)

              print("Creating Android box...")
              box = gbox.create(type="android")
              current_box = box

              print("Android box created successfully!")
              print(f"Box ID: {box.data.id}")

              print("Getting live view...")
              live_view = box.live_view()

              print("Live view is ready!")
              print(f"View URL: {live_view.url}")

              print("Opening browser...")
              print(
                  "You can try operate the android box in the browser, and then press Ctrl+C to stop and terminate box\n"
              )
              webbrowser.open(live_view.url)

              # Keep the program running, waiting for SIGINT signal
              while True:
                  pass

          except Exception as error:
              print(f"An error occurred: {error}")
              if current_box:
                  graceful_shutdown(None, None)
              sys.exit(1)

      if __name__ == "__main__":
          main()
      ```
    </CodeGroup>
  </Step>

  <Step title="Run the box">
    Run the Live View box by running the following command in your terminal.

    <CodeGroup>
      ```bash Typescript icon="https://cdn.worldvectorlogo.com/logos/typescript.svg" theme={null}
      npx tsx index.ts
      ```

      ```bash Python icon="https://cdn.worldvectorlogo.com/logos/python-5.svg" theme={null}
      python main.py
      ```
    </CodeGroup>
  </Step>
</Steps>

## Embed Live View in your website

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

```html theme={null}
<iframe src="{YourLiveViewLink}" width="100%" height="100%" />
```