@hyperbeam/web

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

Read the full documentation here.

Installation

Using npm:

$ npm install @hyperbeam/web --save

Using unpkg:

<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
• Documentation
• Discord community for support and discussion

Examples

• ⚡ Loading a virtual browser
• 💣 Destroying the embed
• 🔉 Setting video volume
• 🆔 Getting user ID
• ⏸️ Pausing video stream
• 👑 Setting admin token
• 🔐 Setting permissions
• 🔄 Manual reconnection
• 📐 Resizing the browser
• 📡 Send events programmatically
• ⌨️ Tighter control over keyboard events
• 🎛️ Control tabs programmatically
• 👂 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.

<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>