Solution showcase to demonstrate how Amazon IVS and PubNub Chat work together. Whether you are hosting a sports event, a concert, a product launch, or any other streamed media event, Amazon IVS + PubNub Chat can deliver an interactive and engaging live stream experience for your audience.
- Number of people watching the live event (PubNub Presence)
- Reactions to the live event, e.g. cheering, anger, celebration (PubNub Messaging)
- Polls - Polls can be triggered through an external event, determined at runtime. (PubNub Illuminate)
- Chat - Send and receive messages (PubNub Chat SDK)
- Chat - React to messages (PubNub Chat SDK)
- Chat - Number of people participating (PubNub Presence)
- Chat - Banning or Muting users (PubNub Channel Monitor)
- Translation - PubNub Functions can translate messages as required.
- Live Commentary (PubNub Messaging)
- Adverts, triggered at runtime in response to stream activity (PubNub Illuminate)
- Gamification: user can earn points as they click ads (App Context, PubNub Illuminate)
- User and Channel Management (BizOps Workspace)
- Moderation (PubNub Channel Monitor)
- On-screen guides to show how each feature was implemented
To run this project yourself you will need a PubNub account
-
You’ll first need to sign up for a PubNub account. Once you sign up, you can get your unique PubNub keys from the PubNub Developer Portal.
-
Sign in to your PubNub Dashboard.
-
Click Apps, then Create New App.
-
Give your app a name, and click Create.
-
Click your new app to open its settings, then click its keyset.
-
Make sure your keyset has the following features enabled: Stream Controller, Presence, Persistence, App Context. Be sure to also enable Presence for all channels in the 'Presence Management' settings (under the BizOps Workspace menu).
-
Leave Access Manager disabled for now (this is not needed for testing)
-
Copy the Publish and Subscribe keys and paste them into your app as specified in the next step.
-
Clone the repository
-
You will need to install both the front-end and back-end application to get started
Start your Amazon IVS stream, e.g. https://docs.aws.amazon.com/ivs/latest/LowLatencyUserGuide/getting-started-set-up-streaming.html.
Note: Although the /backend/ folder contains logic for streaming a file to a named stream through ffmpeg, this is designed for internal testing only - you should follow the steps above to set up your own stream.
Rename the .env.example file found under the web directory to .env and populate it with your PubNub keys, Giphy key (optional), and your Amazon IVS stream URL
cd amazon-ivs-pubnub-demo
cd web
yarn install
yarn dev
Navigate to localhost:3000 in your browser
Rename the .env.example file found under the backend directory to .env and populate it with your PubNub keys. Providing the secret key is only required if you enable Access Manager on your keyset. The backend is capable of streaming a video file through Amazon IVS on-demand, which is used in the hosted demo, but you will likely find it easier to follow the Amazon guide at https://docs.aws.amazon.com/ivs/latest/LowLatencyUserGuide/getting-started-set-up-streaming.html
cd amazon-ivs-pubnub-demo
cd backend
npm install
npm run generator
If you would like chat messages to be translated that are typed into the subscriber chat, create a PubNub Function of type 'After Publish or Fire' on channtl 'race.chat.*' and copy in the contents of /functions/translation.js. You will also need to add a key to the Vault, 'AWS_access_key' which has translate:TranslateText permission assigned, see the comments at the top of 'translation.js' for more information.
Please contact devrel@pubnub.com or raise an issue in this repository.