Use Beam inside websites, browser games, apps, and custom media tools.

Browser Game or Canvas Stream

<script src="/sdk/beam-stream.js"></script>
<canvas id="game"></canvas>
<script>
const canvas = document.querySelector("#game");
const media = canvas.captureStream(60);

const stream = await BeamStream.createStream({
  apiBase: "/api",
  token: dashboardToken,
  title: "Public game stream",
  visibility: "public",
  streamProfile: "gaming",
  sources: [{ type: "game", label: "Game canvas" }]
});

await fetch(`/api/v1/sessions/${stream.id}/accept`, {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ join_token: stream.join_token })
});

BeamStream.publish({
  apiBase: "/api",
  joinToken: stream.join_token,
  sourceId: stream.sources[0].id,
  stream: media
});
</script>

Publish to HLS/LL-HLS Media Edge

Use this path when a game, app, or browser source needs public-scale playback, a slow-network fallback, or a Discord/watch-party friendly stream.

const media = canvas.captureStream(60);

const edgePublisher = await BeamStream.publishToMediaEdge({
  apiBase: "/api",
  streamId: stream.id,
  joinToken: stream.join_token,
  stream: media,
  maxBitrate: 6500000,
  minBitrate: 700000,
  maxFramerate: 60,
  simulcast: true
});

const mediaInfo = await BeamStream.getStreamMedia({
  apiBase: "/api",
  streamId: stream.id
});

console.log(mediaInfo.whep_url, mediaInfo.hls_url);

edgePublisher.stop();

Screen, Window, or Tab Capture

const stream = await BeamStream.createStream({
  apiBase: "/api",
  token: dashboardToken,
  title: "Operator desktop",
  visibility: "private",
  streamProfile: "crisp",
  sources: [{ type: "screen", label: "Primary display" }]
});

await BeamStream.publishDisplay({
  apiBase: "/api",
  joinToken: stream.join_token,
  sourceId: stream.sources[0].id,
  audio: true
});

Windows Companion Source

For PC-owned sources, use the Windows companion instead of asking the browser what to share. The companion currently publishes the primary display as a native H.264/WebRTC source; exact game/window capture and external devices are native capture modules still being added.

1. Create a stream in the Beam dashboard.
2. Copy the stream join token.
3. Open ScreenShare / Beam Companion on Windows.
4. Streams -> Publish this PC -> paste join token -> Publish this PC.

Camera Source

const camera = await navigator.mediaDevices.getUserMedia({
  video: true,
  audio: true
});

BeamStream.publish({
  apiBase: "/api",
  joinToken,
  sourceId: "camera-angle-1",
  stream: camera
});

Viewer Page

<script src="/sdk/beam-stream.js"></script>
<div id="viewer"></div>
<script>
BeamStream.view({
  apiBase: "/api",
  joinToken,
  target: "#viewer",
  onStream(mediaStream, sourceId) {
    console.log("Beam source live", sourceId, mediaStream);
  }
});
</script>