Create a stream as the host, open the viewer link, and chat with your audience next to the video. Viewers can report messages and users to the host. Built with Next.js and the PubNub Chat SDK.
This demo pairs a video stream with a real-time chat. The video comes from Livepeer, the video provider the demo integrates with. Everything around the video, the chat, the user profiles, and the reports, runs on PubNub. The web app is built with Next.js and the PubNub Chat SDK.
The page you start on is the host view. When you create a livestream, the app gets a playback ID from Livepeer and uses it as the ID of a public chat channel. Viewers who open the viewer link sign in with a username, which is saved as their App Context profile, and join the same channel. Mute, ban, and message deletion need your secret key, so the app sends them to a separate server; the README includes sample code for it. The source code is open on GitHub.
Click "Create a livestream" to open the host view. The stream's playback ID becomes a public chat channel, created with the Chat SDK the first time anyone joins.
Open the viewer link in a new tab and sign in with a username. Your name is saved in your App Context user profile, so other people see it next to your messages.
Send a message from either window. It appears in every open chat for that stream right away, with the sender's name.
When you join, the chat loads the latest messages from Message Persistence. Scroll to the top to load older ones.
As a viewer, open the menu on a message and report the message or its author. The host sees a flag count on the message and a list of flagged messages and users in the moderation panel.
Clone the app, add your PubNub and Livepeer keys, and run it locally.
GitHub
The complete source. Enable Presence, Message Persistence, and App Context on your keyset, rename .env.example to .env and add your PubNub keys and Livepeer API key, then run npm install and npm run dev.
git clone https://github.com/PubNubDevelopers/Live-Events-Demo.gitBuilding a live event app such as a sports match, a concert, or streamed media event? Easily add real-time features like chat, polls, reactions, data sync, and gamification with PubNub
Draw with your friends! Powered by PubNub, our real-time collaboration demo demonstrates a simple drawing application that allows for multiple users to draw at the same time on a canvas.
Streaming data is a continuous flow of information from various sources in real time. PubNub’s live streaming APIs enable you to generate, process, and deliver streaming data to any number of subscribers.
Bring chat, live updates, and real-time interactions into your application without building the infrastructure from scratch.
