# @hyperbeam/web

<img  height="100px" src="https://hyperbeam.com/images/hyperbeam_logo.svg" />

The JavaScript browser-side library for the Hyperbeam virtual browser API.

Read the full documentation <a href="https://docs.hyperbeam.com/client-sdk/javascript" target="_blank">here</a>.

## Installation

**Using npm:**

```bash
$ npm install @hyperbeam/web --save
```

**Using unpkg:**

```html
<script type="module">
  import Hyperbeam from "https://unpkg.com/@hyperbeam/web@latest/dist/index.js"
  // ...
</script>
```

## Features

- Connect to a multiplayer browser
- Control the virtual browser navigation programmatically
- Query the virtual browser state and listen to events
- Manage user control permissions
- Resize the browser
- Set local multiplayer browser volume

## Docs & Community

- [Website](https://hyperbeam.com?ch=npm)
- [Documentation](https://docs.hyperbeam.com/client-sdk/javascript)
- [Discord community](https://discord.gg/D78RsGfQjq) for support and discussion

## Examples

- [⚡ Loading a virtual browser](https://docs.hyperbeam.com/client-sdk/javascript/examples#loading-a-virtual-browser)
- [💣 Destroying the embed](https://docs.hyperbeam.com/client-sdk/javascript/examples#destroying-the-embed)
- [🔉 Setting video volume](https://docs.hyperbeam.com/client-sdk/javascript/examples#setting-video-volume)
- [🆔 Getting user ID](https://docs.hyperbeam.com/client-sdk/javascript/examples#getting-user-id)
- [⏸️ Pausing video stream](https://docs.hyperbeam.com/client-sdk/javascript/examples#pausing-video-stream)
- [👑 Setting admin token](https://docs.hyperbeam.com/client-sdk/javascript/examples#setting-admin-token)
- [🔐 Setting permissions](https://docs.hyperbeam.com/client-sdk/javascript/examples#setting-permissions)
- [🔄 Manual reconnection](https://docs.hyperbeam.com/client-sdk/javascript/examples#manual-reconnection)
- [📐 Resizing the browser](https://docs.hyperbeam.com/client-sdk/javascript/examples#resizing-the-browser)
- [📡 Send events programmatically](https://docs.hyperbeam.com/client-sdk/javascript/examples#send-events-programmatically)
- [⌨️ Tighter control over keyboard events](https://docs.hyperbeam.com/client-sdk/javascript/examples#tighter-control-over-keyboard-events)
- [🎛️ Control tabs programmatically](https://docs.hyperbeam.com/client-sdk/javascript/examples#control-tabs-programmatically)
- [👂 Listen to tab events](https://docs.hyperbeam.com/client-sdk/javascript/examples#listen-to-tab-events)

## Quick Start

You can save this code snippet as `example.html` and run it in your browser. Make sure you set the `embedURL` variable to the response data from the [REST API](https://docs.hyperbeam.com/rest-api).

```html
<div style="font-family: Arial">
  <button id="reload">Reload</button>
  <button id="back">Go Back</button>
  <button id="forward">Go Forward</button>
  <button id="youtube">Open Youtube.com</button>
  Volume: <input type="range" min="0" max="100" value="100" id="range">
  <p>User ID: <span id="userId"></span></p>
  <p>Current website: <span id="currentSite"></p>
</div>
<div id="container" style="height:720px;width:1280px"></div>

<script type="module">
  import Hyperbeam from "https://unpkg.com/@hyperbeam/web@latest/dist/index.js"

  // TODO: Set the embedURL variable
  const embedURL = "<your-embed-url>"

  const hb = await Hyperbeam(container, embedURL)
  userId.innerText = hb.userId
  reload.addEventListener("click", () => {
    hb.tabs.reload()
  })
  back.addEventListener("click", () => {
    hb.tabs.goBack()
  })
  forward.addEventListener("click", () => {
    hb.tabs.goForward()
  })
  youtube.addEventListener("click", () => {
    hb.tabs.update({ url: "https://youtube.com" })
  })
  range.addEventListener("change", (e) => {
    hb.volume = e.target.value / 100
  })
  hb.tabs.onUpdated.addListener((tabId, changeInfo) => {
    if (changeInfo.title) {
      currentSite.innerText = changeInfo.title
    }
  })
</script>
```