VercelLogotypeVercelLogotype
LoginSign Up

Amazon IVS Broadcast Web Demo

A tool to stream to Amazon IVS channels from web browsers – no download required.

DeployView Demo
A screenshot of the AWS IVS Broadcast demo application

Amazon IVS Broadcast Web Demo

A demo web application intended as an educational tool to demonstrate how you can build a browser-based streaming tool with the Amazon IVS Web Broadcast SDK.

Demo: Visit https://stream.ivs.rocks/ and add your channel's ingest endpoint and stream key on the settings screen.

[Image blocked: A web browser showing the demo application with a woman speaking into a camera.]

This project is intended for education purposes only and not for production usage.

Prerequisites

  • NodeJS
  • Yarn package manager
  • Your IVS Channel details. A guide is available here: Getting started with Amazon IVS.

Running the demo

Follow these instructions to run the demo:

  1. Run: yarn install
  2. Run: yarn run dev

Customizing the demo

To customize this demo, fork it and modify the source code to suit your needs.

Change color theme

To modify the colors used in the application UI, modify the colors defined in tailwind.config.js.

Change layouts

To modify the available layouts or add your own, modify the contents of BroadcastLayoutTemplates.js. Math expressions within strings are supported and include the following variables:

CANVAS_WIDTH // the width of the canvas
CANVAS_HEIGHT // the height of the canvas
LAYER_WIDTH // the width of the current layer
LAYER_HEIGHT // the height of the current layer

Known issues and limitations

  • The application is meant for demonstration purposes and not for production use.
  • This application is only tested and supported on the latest Desktop versions of Chrome and Firefox. Other browsers and devices, including mobile browsers and smartphones, may work with this tool, but are not officially supported at this time.

About Amazon IVS

Amazon Interactive Video Service (Amazon IVS) is a managed live streaming and stream chat solution that is quick and easy to set up, and ideal for creating interactive video experiences. Learn more.

  • Amazon IVS docs
  • User Guide
  • API Reference
  • Setting Up for Streaming with Amazon Interactive Video Service
  • Learn more about Amazon IVS on IVS.rocks
  • View more demos like this

Security

See CONTRIBUTING for more information.

License

This library is licensed under the MIT-0 License.

GitHub Repoaws-samples/amazon-ivs-broadcast-web-demo
LicenseView License
Use Cases
Starter
Stack
Next.js
CSS

Related Templates

Next.js Boilerplate

Get started with Next.js and React in seconds.
Next.js Boilerplate thumbnail

Get Started

  • Templates
  • Supported frameworks
  • Marketplace
  • Domains

Build

  • Next.js on Vercel
  • Turborepo
  • v0

Scale

  • Content delivery network
  • Fluid compute
  • CI/CD
  • Observability
  • AI GatewayNew
  • Vercel AgentNew

Secure

  • Platform security
  • Web Application Firewall
  • Bot management
  • BotID
  • SandboxNew

Resources

  • Pricing
  • Customers
  • Enterprise
  • Articles
  • Startups
  • Solution partners

Learn

  • Docs
  • Blog
  • Changelog
  • Knowledge Base
  • Academy
  • Community

Frameworks

  • Next.js
  • Nuxt
  • Svelte
  • Nitro
  • Turbo

SDKs

  • AI SDK
  • Workflow SDKNew
  • Flags SDK
  • Chat SDK
  • Streamdown AINew

Use Cases

  • Composable commerce
  • Multi-tenant platforms
  • Web apps
  • Marketing sites
  • Platform engineers
  • Design engineers

Company

  • About
  • Careers
  • Help
  • Press
  • Legal
  • Privacy Policy

Community

  • Open source program
  • Events
  • Shipped on Vercel
  • GitHub
  • LinkedIn
  • X
  • YouTube

Loading status…

Select a display theme:
    • AI Cloud
      • AI Gateway

        One endpoint, all your models

      • Sandbox

        Isolated, safe code execution

      • Vercel Agent

        An agent that knows your stack

      • AI SDK

        The AI Toolkit for TypeScript

      • v0

        Build applications with AI

    • Core Platform
      • CI/CD

        Helping teams ship 6× faster

      • Content Delivery

        Fast, scalable, and reliable

      • Fluid Compute

        Servers, in serverless form

      • Workflow

        Long-running workflows at scale

      • Observability

        Trace every step

    • Security
      • Bot Management

        Scalable bot protection

      • BotID

        Invisible CAPTCHA

      • Platform Security

        DDoS Protection, Firewall

      • Web Application Firewall

        Granular, custom protection

    • Company
      • Customers

        Trusted by the best teams

      • Blog

        The latest posts and changes

      • Changelog

        See what shipped

      • Press

        Read the latest news

      • Events

        Join us at an event

    • Learn
      • Docs

        Vercel documentation

      • Academy

        Linear courses to level up

      • Knowledge Base

        Find help quickly

      • Community

        Join the conversation

    • Open Source
      • Next.js

        The native Next.js platform

      • Nuxt

        The progressive web framework

      • Svelte

        The web’s efficient UI framework

      • Turborepo

        Speed with Enterprise scale

    • Use Cases
      • AI Apps

        Deploy at the speed of AI

      • Composable Commerce

        Power storefronts that convert

      • Marketing Sites

        Launch campaigns fast

      • Multi-tenant Platforms

        Scale apps with one codebase

      • Web Apps

        Ship features, not infrastructure

    • Tools
      • Marketplace

        Extend and automate workflows

      • Templates

        Jumpstart app development

      • Partner Finder

        Get help from solution partners

    • Users
      • Platform Engineers

        Automate away repetition

      • Design Engineers

        Deploy for every idea

  • Enterprise
  • Pricing
Log InContact
Sign Up
Sign Up
DeployView Demo
AI Gateway

One endpoint, all your models

Sandbox

Isolated, safe code execution

Vercel Agent

An agent that knows your stack

AI SDK

The AI Toolkit for TypeScript

v0

Build applications with AI

CI/CD

Helping teams ship 6× faster

Content Delivery

Fast, scalable, and reliable

Fluid Compute

Servers, in serverless form

Workflow

Long-running workflows at scale

Observability

Trace every step

Bot Management

Scalable bot protection

BotID

Invisible CAPTCHA

Platform Security

DDoS Protection, Firewall

Web Application Firewall

Granular, custom protection

Customers

Trusted by the best teams

Blog

The latest posts and changes

Changelog

See what shipped

Press

Read the latest news

Events

Join us at an event

Docs

Vercel documentation

Academy

Linear courses to level up

Knowledge Base

Find help quickly

Community

Join the conversation

Next.js

The native Next.js platform

Nuxt

The progressive web framework

Svelte

The web’s efficient UI framework

Turborepo

Speed with Enterprise scale

AI Apps

Deploy at the speed of AI

Composable Commerce

Power storefronts that convert

Marketing Sites

Launch campaigns fast

Multi-tenant Platforms

Scale apps with one codebase

Web Apps

Ship features, not infrastructure

Marketplace

Extend and automate workflows

Templates

Jumpstart app development

Partner Finder

Get help from solution partners

Platform Engineers

Automate away repetition

Design Engineers

Deploy for every idea