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-native (or stream-chat-expo) and @stream-io/video-react-native-sdk, each with its own client, and the same Stream app.

The chat with video guide adds chat to a calling app, and calls to a chat app with ringing, step by step. It's part of the Video and Audio documentation for React Native, which covers its own concepts (authentication, permissions, push notifications for incoming calls), its components, cookbook examples and tutorials.

Using the guide with v10

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

• The composer. Where the guide renders MessageInput, render MessageComposer.
• The chat client. useCreateChatClient takes the token as tokenOrProvider, not tokenProvider: useCreateChatClient({ apiKey, tokenOrProvider, userData }), as in the Quick start.
• The attachment picker inset. Where the guide calls setTopInset(headerHeight) from useAttachmentPickerContext(), pass the header height to Channel as topInset instead. Keyboard and insets explains the insets.
• The unread count on the chat button. The guide's useUnreadCount hook reads client.activeChannels, which stream-chat v10 doesn't have, and counts on its own from events. Get the channel with client.channel("messaging", callId), and read the current user's unread_messages from the read field of channel.state with useStateStore, as the unread badge in Reading state in components does. The client keeps that count up to date while the channel is watched, so keep the guide's effect that watches the channel, and drop the event listeners.

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 app 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 push notifications and unread counts, since both change while a call rings.