IVS Server Side Compositing

Let's take a look at server side compositing with Amazon IVS! This feature allows you to "composite" a real-time stage with multiple participants into a single low-latency stream.

For more information, check the docs!

Create a Low-Latency Channel

aws ivs create-channel --name my-first-low-latency-channel

Create channel response:

{
  "channel": {
    "arn": "arn:aws:ivs:us-east-1:999999999999:channel/[redacted]",
    "authorized": false,
    "ingestEndpoint": "f99084460c35.global-contribute.live-video.net",
    "insecureIngest": false,
    "latencyMode": "LOW",
    "name": "my-first-low-latency-channel",
    "playbackUrl": "https://f99084460c35.us-east-1.playback.live-video.net/api/video/v1/us-east-1.999999999999.channel.[redacted].m3u8",
    "recordingConfigurationArn": "",
    "tags": {},
    "type": "STANDARD"
  },
  "streamKey": {
    "arn": "arn:aws:ivs:us-east-1:999999999999:stream-key/[redacted]",
    "channelArn": "arn:aws:ivs:us-east-1:999999999999:channel/[redacted]",
    "tags": {},
    "value": "sk_us-east-[redacted]"
  }
}

Create a Stage:

aws ivs-realtime create-stage --name my-first-stage

Create stage response:

{
  "stage": {
    "arn": "arn:aws:ivs:us-east-1:999999999999:stage/[redacted]",
    "name": "my-first-stage",
    "tags": {}
  }
}

Create a Participant Token

Pass the stage ARN from the stage we just created.

aws ivs-realtime create-participant-token \
  --stage-arn arn:aws:ivs:us-east-1:999999999999:stage/[redacted] \
  --attributes username=todd,isFeatured=false

Participant Token Response:

{
  "participantToken": {
    "attributes": {
      "isFeatured": "false",
      "username": "todd"
    },
    "expirationTime": "2023-12-13T04:53:15+00:00",
    "participantId": "JJj17t0guqdF",
    "token": "eyJhbGc[redacted].[redacted].[redacted]"
  }
}

Publish to Stage

Visit the Amazon IVS Real-Time Streaming Web Sample (HTML and JavaScript). Paste in your participant token and click 'Join Stage'.

Create an Encoder Configuration

aws ivs-realtime create-encoder-configuration \
  --name my-first-encoder-configuration \
  --video "bitrate=2500000,height=720,width=1280,framerate=30"

Encoder config response:

{
  "encoderConfiguration": {
    "arn": "arn:aws:ivs:us-east-1:999999999999:encoder-configuration/[redacted]",
    "name": "my-first-encoder-configuration",
    "tags": {},
    "video": {
      "bitrate": 2500000,
      "framerate": 30,
      "height": 720,
      "width": 1280
    }
  }
}

Create a Composition

Create a composition, using the channel ARN, stage ARN and the encoder configuration ARN.

aws ivs-realtime start-composition \
  --stage-arn "arn:aws:ivs:us-east-1:999999999999:stage/[redacted]" \
  --destinations  '[{"channel": { "channelArn": "arn:aws:ivs:us-east-1:999999999999:channel/[redacted]", "encoderConfigurationArn": "arn:aws:ivs:us-east-1:999999999999:encoder-configuration/[redacted]"}}]'

Composition response:

{
  "composition": {
    "arn": "arn:aws:ivs:us-east-1:999999999999:composition/[redacted]",
    "destinations": [
      {
        "configuration": {
          "channel": {
            "channelArn": "arn:aws:ivs:us-east-1:999999999999:channel/[redacted]",
            "encoderConfigurationArn": "arn:aws:ivs:us-east-1:999999999999:encoder-configuration/[redacted]"
          },
          "name": ""
        },
        "id": "bS6O6ZgqCSdM",
        "state": "STARTING"
      }
    ],
    "layout": {
      "grid": {
        "featuredParticipantAttribute": ""
      }
    },
    "stageArn": "arn:aws:ivs:us-east-1:999999999999:stage/[redacted]",
    "startTime": "2023-12-12T17:09:17+00:00",
    "state": "STARTING",
    "tags": {}
  }
}

Test Playback

Go to debug.ivsdemos.com, paste in your playbackUrl from your low-latency channel, select the 'IVS Player SDK' from the 'gear' icon menu, and click 'Load' to view your composite stream.

Clean up

Stop Composition

Use the composition ARN to stop it.

aws ivs-realtime stop-composition --arn arn:aws:ivs:us-east-1:999999999999:composition/[redacted]

Delete the Stage

You must leave the stage before deleting it!

aws ivs-realtime delete-stage --arn arn:aws:ivs:us-east-1:999999999999:stage/[redacted]

Delete the Encoder Configuration

$ aws ivs-realtime delete-encoder-configuration --arn arn:aws:ivs:us-east-1:999999999999:encoder-configuration/[redacted]

Delete the Channel

$ aws ivs delete-channel --arn arn:aws:ivs:us-east-1:999999999999:channel/[redacted]

Learn More!

Create Your Own Real-Time Streaming App with the Amazon IVS Web Broadcast SDK
Android Real-Time Demo App
iOS Real-Time Demo App
Amazon IVS Product Page
IVS Blog Posts
IVS Rocks
Build a UGC Live Streaming App with Amazon IVS
IVS Real-Time Streaming User Guide
IVS Low-Latency User Guide

recursivecodes/ivs-server-side-compositing.md