# Video and audio by Stream

> **Info:** This is release candidate documentation for **Stream Chat React SDK v15**. For the latest stable version, see the [latest version (v14)](https://getstream.io/chat/docs/sdk/react/).

Stream's [Video and Audio](https://getstream.io/video/) 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](https://getstream.io/video/docs/react/advanced/chat-with-video/) builds a messenger with ringing calls, step by step. It's part of the [Video and Audio documentation](https://getstream.io/video/docs/react/), which covers its own concepts (authentication, devices, permissions), its components, cookbook examples and tutorials.

![Stream Video & Audio Experience](https://getstream.io/docs-assets/images/4a42f27b1825.jpg)

## 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](https://getstream.io/chat/docs/sdk/react/v15/ui/layout/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](https://getstream.io/chat/docs/sdk/react/v15/ui/customizing/theming/#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](https://getstream.io/chat/docs/sdk/react/v15/getting-started/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.

---

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react/v15/features/integrations/video-and-audio-by-stream/](https://getstream.io/chat/docs/sdk/react/v15/features/integrations/video-and-audio-by-stream/).