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

# Streamplace BYOC Integration

> Integrate Streamplace's decentralised video layer into your AT Protocol or Web3 application. Canonical setup, SDK, BYOC compute path.

export const CenteredContainer = ({children, maxWidth = "800px", padding = "0", preset = "default", width = "", minWidth = "", marginRight = "", marginBottom = "", textAlign = "", style = {}, className = "", ...rest}) => {
  const presets = {
    default: {},
    fitContent: {
      width: "fit-content",
      minWidth: "fit-content"
    },
    readable70: {
      width: "70%",
      minWidth: "fit-content"
    },
    readable80: {
      width: "80%",
      minWidth: "fit-content"
    },
    readable90: {
      width: "90%"
    },
    wide900: {
      maxWidth: "900px"
    }
  };
  const presetStyle = presets[preset] || presets.default;
  return <div className={className} style={{
    maxWidth: presetStyle.maxWidth || maxWidth,
    margin: "0 auto",
    padding: padding,
    ...presetStyle.width ? {
      width: presetStyle.width
    } : {},
    ...presetStyle.minWidth ? {
      minWidth: presetStyle.minWidth
    } : {},
    ...width ? {
      width
    } : {},
    ...minWidth ? {
      minWidth
    } : {},
    ...marginRight ? {
      marginRight
    } : {},
    ...marginBottom ? {
      marginBottom
    } : {},
    ...textAlign ? {
      textAlign
    } : {},
    ...style
  }} {...rest}>
      {children}
    </div>;
};

export const CustomDivider = ({color = "var(--lp-color-border-default)", middleText = "", spacing = "default", style = {}, className = "", ...rest}) => {
  const spacingPresets = {
    default: {
      margin: "24px 0"
    },
    overlap: {
      margin: "-1rem 0 -1rem 0"
    },
    tight: {
      margin: "0 0 -1rem 0"
    },
    section: {
      margin: "0 0 -2rem 0"
    },
    sectionOverlap: {
      margin: "-1rem 0 -2rem 0"
    },
    deepOverlap: {
      margin: "-1rem 0 -1.5rem 0"
    }
  };
  const spacingStyle = spacingPresets[spacing] || spacingPresets.default;
  return <div role="separator" aria-orientation="horizontal" className={className} style={{
    display: "flex",
    alignItems: "center",
    ...spacingStyle,
    fontSize: style?.fontSize || "16px",
    height: "fit-content",
    ...style
  }} {...rest}>
      <span style={{
    marginRight: "var(--lp-spacing-px-8)",
    opacity: 0.2
  }}>
        <Icon icon="/snippets/assets/logos/Livepeer-Logo-Symbol-Theme.svg" />
      </span>
      <div style={{
    flex: 1,
    height: "1px",
    background: "var(--lp-color-border-default)",
    opacity: 0.4
  }}></div>
      {middleText && <>
          <Icon icon="circle" size={2} />
          <span style={{
    margin: "0 8px",
    fontWeight: "bold",
    color: color,
    opacity: 0.7
  }}>
            {middleText}
          </span>
          <Icon icon="circle" size={2} />
        </>}
      <div style={{
    flex: 1,
    height: "1px",
    background: "var(--lp-color-border-default)",
    opacity: 0.4
  }}></div>
      <span style={{
    marginLeft: "var(--lp-spacing-px-8)",
    opacity: 0.2
  }}>
        <span style={{
    display: "inline-block",
    transform: "scaleX(-1)"
  }}>
          <Icon icon="/snippets/assets/logos/Livepeer-Logo-Symbol-Theme.svg" />
        </span>
      </span>
    </div>;
};

export const LinkArrow = ({href, label, description, newline = true, borderColor, className = '', style = {}, ...rest}) => {
  const linkArrowStyle = {
    display: 'inline-flex',
    alignItems: 'center',
    justifyContent: 'center',
    gap: "var(--lp-spacing-1)",
    width: 'fit-content',
    ...borderColor && ({
      borderColor
    })
  };
  return <span className={className} style={style} {...rest}>
      {newline && <br />}
      <span style={linkArrowStyle}>
        <a href={href} target="_blank" rel="noopener noreferrer">
          {label}
        </a>
        <Icon icon="arrow-up-right" size={14} color="var(--lp-color-accent)" />
      </span>
      {description && description}
      {description && <div style={{
    height: "var(--lp-spacing-3)"
  }} />}
    </span>;
};

<CenteredContainer preset="readable90">
  <Tip>Streamplace is a Livepeer-native video layer for AT Protocol and decentralised social apps. Canonical setup lives in the Solutions tab; this page routes developers there with context.</Tip>
</CenteredContainer>

***

Streamplace is a Livepeer Special Purpose Entity (SPE) building open-source decentralised video infrastructure for social networks, livestreaming platforms, and Web3-native apps. It routes video ingest and processing through Livepeer's network, signs every segment with C2PA and Ethereum provenance, and ships an SDK that drops into AT Protocol applications.

This page exists to route you to the canonical Streamplace documentation. The setup, node install, SDK reference, and integration guides are maintained by the Streamplace team in the <LinkArrow href="/v2/solutions/streamplace/overview" label="Solutions tab" newline={false} />.

<CustomDivider />

## Integration Scenarios

Streamplace solves three integration scenarios that the lower-level Livepeer primitives leave open.

| Scenario                                         | What Streamplace adds                                         |
| ------------------------------------------------ | ------------------------------------------------------------- |
| Bluesky or AT Protocol app needing live video    | A node + SDK that emits AT Protocol-compatible video metadata |
| Decentralised social platform needing provenance | C2PA signing and Ethereum attestation on every video segment  |
| Web3 app needing censorship-resistant streaming  | Self-hostable node with Livepeer Network transcoding          |

The integration path is a Streamplace node plus the SDK package documented by the Streamplace team. The node handles ingest, segmentation, provenance signing, and transcoding dispatch to Livepeer; the SDK gives your app a typed client and a React player component.

<CustomDivider />

## Streamplace and Livepeer

Streamplace runs production BYOC workloads on the Livepeer Network. The relationship is:

| Layer       | Component                                              |
| ----------- | ------------------------------------------------------ |
| Application | Your AT Protocol or Web3 app                           |
| Video API   | Streamplace SDK, `StreamplacePlayer` React component   |
| Node        | Streamplace node binary (ingest, provenance, dispatch) |
| Network     | Livepeer Gateway and Orchestrator pool                 |
| Compute     | BYOC containers running on Livepeer Orchestrators      |

The Streamplace node is the boundary between your application and the Livepeer Network. Most developers integrate at the SDK layer and let the node handle the network plumbing. Operators self-host the node for full control; managed deployments use the Streamplace-operated node infrastructure.

For context on BYOC as the underlying compute mechanism, see [BYOC Overview](/v2/developers/build/compute/byoc/overview). For the AI Jobs API path without the AT Protocol layer, see [AI Jobs Direct Quickstart](/v2/developers/build/ai-and-agents/ai-jobs-direct-quickstart).

<CustomDivider />

## Canonical Setup Path

The canonical setup, including node install, SDK quickstart, metadata schema, and integration examples, lives in the Solutions tab.

<CardGroup cols={1}>
  <Card title="Streamplace Overview" icon="rocket" href="/v2/solutions/streamplace/overview">
    Start here: node install, SDK quickstart, provenance configuration, player integration. Maintained by the Streamplace team.
  </Card>
</CardGroup>

The Solutions overview covers the four steps that get a working integration:

1. Install the Streamplace node binary
2. Configure metadata, rights, and distribution policy
3. Start a livestream via the CLI or SDK
4. Embed the `StreamplacePlayer` component with provenance display

Time to first stream is under fifteen minutes following the canonical guide.

<CustomDivider />

## External Resources

| Resource                  | Link                                                                             |
| ------------------------- | -------------------------------------------------------------------------------- |
| Streamplace homepage      | [stream.place](https://stream.place)                                             |
| Streamplace documentation | [docs.stream.place](https://docs.stream.place)                                   |
| Streamplace repository    | [git.stream.place](https://git.stream.place)                                     |
| Streamplace GitHub mirror | [github.com/streamplace/streamplace](https://github.com/streamplace/streamplace) |
| Streamplace Discord       | Available via the Solutions overview                                             |

For deep technical questions about Streamplace internals, the architecture and provenance documentation at `docs.stream.place` is the authoritative source. The Streamplace team maintains it directly.

<CustomDivider />

Your Streamplace BYOC container is running on the network. The same container pattern works for any Python model; swap the inference logic inside `process_frame()` and redeploy.

## AI agent prompt

```text theme={"theme":{"light":"github-light","dark":"dark-plus"}}
Build the "Streamplace BYOC Integration" tutorial by following the current Streamplace documentation as the source of truth. Verify the install path from https://stream.place/docs and the active repository metadata from https://github.com/streamplace/streamplace before choosing package names. Create a minimal TypeScript app that connects to a Streamplace node, starts or references a livestream, embeds the Streamplace player component documented upstream, and records the Livepeer/BYOC relationship in comments. Use placeholders for STREAMPLACE_NODE_URL=<node URL>, STREAMPLACE_AUTH_TOKEN=<token if required>, and LIVEPEER_GATEWAY_URL=<gateway URL if required>. Do not assume @streamplace/sdk is published to npm unless the package check succeeds; if it is unavailable, install exactly as the Streamplace docs prescribe.
```

<CustomDivider />

## Next Steps

<CardGroup cols={2}>
  <Card title="Streamplace Overview" icon="play" href="/v2/solutions/streamplace/overview">
    Canonical Streamplace documentation: install, SDK, integration patterns.
  </Card>

  <Card title="BYOC Overview" icon="cube" href="/v2/developers/build/compute/byoc/overview">
    The general BYOC mechanism Streamplace builds on.
  </Card>

  <Card title="Low-Latency Streaming" icon="bolt" href="/v2/developers/build/tutorials/low-latency-live-streaming-app">
    Generic WHIP/WHEP path without the AT Protocol layer.
  </Card>

  <Card title="VOD Upload and Playback" icon="upload" href="/v2/developers/build/tutorials/vod-upload-and-playback">
    Persistent video assets through the Livepeer Asset API.
  </Card>
</CardGroup>