Giter Club home page Giter Club logo

aws-samples / amazon-ivs-chime-web-demo Goto Github PK

View Code? Open in Web Editor NEW
34.0 16.0 18.0 1.27 MB

A demo web application intended as an educational tool for demonstrating how to load and play Amazon IVS streams alongside the Amazon Chime SDK.

Home Page: https://ivs.rocks/examples

License: MIT No Attribution

JavaScript 73.38% HTML 1.51% CSS 25.11%
react reactjs react-router javascript aws amazon-ivs aws-lambda api-gateway amazon-chime amazon-chime-sdk

amazon-ivs-chime-web-demo's Introduction

⚠️ IMPORTANT ⚠️ This repository is no longer actively maintained and will be archived at the end of 2022

Amazon IVS + Chime demo

A demo web application intended as an educational tool for demonstrating how to load and play Amazon IVS streams alongside the Amazon Chime SDK.

Amazon IVS Chime demo screenshot

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

This is a serverless web application, leveraging Amazon IVS, AWS Lambda, API Gateway and ChimeSDK. The web user interface is a single page application built using responsive web design frameworks and techniques, producing a native app-like experience tailored to the user's device. The demo showcase how customers can use Chime SDK to implement a real-time room with audio and video capabilities where users can watch IVS Stream and chat. Users can enter their name, a room name, and a Playback URL to create a room. Once in the room, they can share room's unique URL, which can be used by others to join said room. Settings modal shows user their Playback URL, they can change their active audio input/output device and video input device. There are controls to manage audio, video, a row of cams, a chat, and an option to leave the room.

Getting Started

IMPORTANT NOTE: Deploying this demo application in your AWS account will create and consume AWS resources, which will cost money.

To get the demo running in your own AWS account, follow these instructions.

  1. If you do not have an AWS account, please see How do I create and activate a new Amazon Web Services account?
  2. Log into the AWS console if you are not already. Note: If you are logged in as an IAM user, ensure your account has permissions to create and manage the necessary resources and components for this application.
  3. Complete the instructions for deploying for demo or learning below.

Deploying for Demo or Learning

If you are interested in running IVS + Chime demo services locally as part of learning, we have detailed instructions on how to get up and going quickly.

Documentation

Known Issues

  • The application was written for demonstration purposes and not for production use.
  • The application was only tested on desktop browsers, and may not work on mobile.
  • The settings window throws an error on the following browers: Firefox, Safari
  • Currently only tested in the us-west-2 (Oregon) region. Additional regions may be supported depending on service availability.

License

This sample code is made available under a modified MIT license. See the LICENSE file.

amazon-ivs-chime-web-demo's People

Contributors

amazon-auto avatar andreido avatar dependabot[bot] avatar mboulin avatar saayaman avatar slee-aws avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

amazon-ivs-chime-web-demo's Issues

Unhandled Rejection (TypeError): amazon_chime_sdk_js__WEBPACK_IMPORTED_MODULE_2__.DefaultDOMWebSocketFactory is not a constructor

How do I fix this error?

Chat.initChatConnection
C:/users/charles/amazon-ivs-chime-web-demo/web-ui/src/components/chat/Chat.jsx:37

34 | async initChatConnection() {
35 | const { Meeting, Attendee } = this.props.joinInfo;
36 | const messagingUrl = ${config.CHAT_WEBSOCKET}?MeetingId=${Meeting.MeetingId}&AttendeeId=${Attendee.AttendeeId}&JoinToken=${Attendee.JoinToken}

37 | const connection = new ReconnectingPromisedWebSocket(
| ^ 38 | messagingUrl,
39 | [],
40 | 'arraybuffer',

Chat.componentDidMount
C:/users/charles/amazon-ivs-chime-web-demo/web-ui/src/components/chat/Chat.jsx:31
28 | }
29 |
30 | componentDidMount() {

31 | this.initChatConnection();
| ^ 32 | }
33 |
34 | async initChatConnection() {
View compiled
▶ 18 stack frames were collapsed.
start
C:/users/charles/amazon-ivs-chime-web-demo/web-ui/src/components/chimeWeb/Meeting.jsx:76
73 | await this.props.chime.reInitializeMeetingSession(this.joinInfo, this.username);
74 | }
75 |
76 | this.setState({ meetingStatus: 'Success' });
| ^ 77 |
78 | this.props.chime.audioVideo.addObserver({
79 | audioVideoDidStop: async (sessionStatus) => {
View compiled

Cannot create stack - Unrecognized resource types: [AWS::IVS::Channel, AWS::IVS::StreamKey]

I'm quite new to AWS, it seems I cannot initialize the stack. It may be an issue with template or something.

sam deploy --template-file packaged.yaml --stack-name stackchat --capabilities CAPABILITY_IAM

Deploying with following 

values
===============================
Stack name                   : stackchat
Region                       : None
Confirm changeset            : False
Deployment s3 bucket         : None
Capabilities                 : ["CAPABILITY_IAM"]
Parameter overrides          : {}
Signing Profiles             : {}
Initiating deployment
=====================                                                                                                                                                                                                                                                                                                                                                                                                                 

Waiting for changeset to be created..

Error: Failed to create changeset for the stack: stackchat, ex: Waiter ChangeSetCreateComplete failed: Waiter encountered a terminal failure state: For expression "Status" we matched expected path: "FAILED" Status: FAILED. Reason: Template format error: Unrecognized resource types: [AWS::IVS::Channel, AWS::IVS::StreamKey]

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.