Video and audio by Stream

Stream's Video and Audio adds calls to a chat app: a user starts a video or audio call from a channel, and its members can join it. Chat and calls use separate SDKs, stream-chat-react and @stream-io/video-react-sdk, each with its own client, and the same Stream app.

The chat with video guide builds a messenger with ringing calls, step by step. It's part of the Video and Audio documentation, which covers its own concepts (authentication, devices, permissions), its components, cookbook examples and tutorials.

Using the guide with v15

The guide's chat code was written for an earlier stream-chat-react. With v15, change these parts:

• The channel a component sits in. Where the guide reads it with useChannelStateContext(), call useChannel() inside Channel. It returns the channel.
• The open channel. Where the guide reads channel from useChatContext(), use useWorkspaceNavigation(): isChannelActive(cid) says whether a channel is open, and openChannels lists the open ones. It answers only with a layout such as ChatView; Navigation explains it.
• The chat styles. Import stream-chat-react/dist/css/index.css instead of the guide's dist/scss/v2/index.scss, in a cascade layer as the guide does. CSS layers explains how.
• The chat client. The guide imports useCreateChatClient from its own ./hooks. stream-chat-react exports one: useCreateChatClient({ apiKey, tokenOrProvider, userData }), as in the Quick start.

The video parts of the guide don't change.

Best Practices

• Use the same API key for chat and video, and sign both user tokens with the same secret. One Stream app serves both.
• Create both clients for the same user, and disconnect both when the user signs out.
• Tie each call to its channel, for example by storing the channel's cid in the call's custom data, as the guide does, so the UI can show the call in the right channel.
• Plan camera and microphone permissions, and what users see when they're denied, before building the call UI.
• Test calls together with chat notifications and unread counts, since both change while a call rings.