---
title: useCtx
summary: Introduces the `useCtx` hook, which is used to obtain the Fusion Player context instance and its parameters.
---

# useCtx

> The `useCtx` hook is used to obtain the player context instance.

```javascript
function useCtx(options: Options): Ctx
```

## Input: `Options`

| Parameter | Type | Required | Description |
|-------|-------|-------|-------|
| devId | string | Yes | Device ID |
| initTopLeftContent | ComponentConfig[] | No  | Initial widgets in the top-left corner |
| initTopRightContent | ComponentConfig[] | No  | Initial widgets in the top-right corner |
| initBottomLeftContent | ComponentConfig[] | No  | Initial widgets in the bottom-left corner |
| initBottomRightContent | ComponentConfig[] | No  | Initial widgets in the bottom-right corner |
| initAbsoluteContent | ComponentConfig[] | No  | Initial absolutely positioned widgets |
| saveToAlbum | 0 or 1 | No  | When saving a file, save to `0` system album or `1` IPC album. Default is `1` |


## Return: `Ctx`
| Parameter | Type | Description |
|-------|-------|-------|
| devId | `string` | Device ID |
| brandColor | `RetAtom<string>` | Theme color. Note: values of type `RetAtom` must be read with `useStore` |
| setBrandColor | `(value: string) => void` | Sets `brandColor` |
| verticalMic | `RetAtom<string>` | Whether intercom is shown in vertical mode. Default is `true` |
| setVerticalMic | `(value: string) => void`  | Sets `verticalMic` |
| saveToAlbum | 0 or 1  |  |
| screenType | `RetAtom<ScreenType>` | `full` for landscape, `vertical` for portrait |
| setScreenType | `(value: ScreenType) => void` | Sets `screenType` |
| recording |  `RetAtom<boolean>` | Whether recording is in progress |
| setRecording |  `(value: boolean) => void` | Sets `recording` |
| recordingDisabled |  `RetAtom<boolean>` | Whether recording is disabled |
| setRecordingDisabled |  `RetAtom<boolean>` | Sets `recordingDisabled` |
| mute |  `RetAtom<boolean>` | Whether the player is currently muted |
| setMute |  `(value: boolean) => Promise<boolean>` | Sets `mute` and changes the player's mute state |
| intercom |  `RetAtom<boolean>` | Whether intercom is currently active |
| setIntercom |  `(value: boolean) => Promise<boolean>` | Sets `intercom` and changes the player's intercom state |
| intercomMode | `RetAtom<IntercomMode>` | Whether the current mode is one-way or two-way intercom. `OneWay` means one-way intercom, `TwoWay` means two-way intercom |
| intercomSupported |  `RetAtom<boolean>` | Whether the current camera supports intercom |
| resolution |  `RetAtom<string>` | Current player resolution |
| setResolution |  `(type: string) => void` | Sets the resolution |
| resolutionList |  `RetAtom<string[]>` | List of currently supported resolutions |
| setResolutionList |  `(type: string[]) => void` | Sets `resolutionList` |
| playState | `RetAtom<PlayState>`  | Player status: `0` connecting, `1` playing, `2` paused |
| IPCPlayerInstance | `IpcContext`  | Player context. See [IpcContext](/en/miniapp/develop/miniapp/api/media/ipc/createIpcContext) |
| topLeftContent | `RetAtom<ComponentConfig[]>`  | Widgets in the top-left corner |
| topRightContent | `RetAtom<ComponentConfig[]>`  | Widgets in the top-right corner |
| bottomLeftContent | `RetAtom<ComponentConfig[]>`  | Widgets in the bottom-left corner |
| bottomRightContent | `RetAtom<ComponentConfig[]>`  | Widgets in the bottom-right corner |
| absoluteContent | `RetAtom<ComponentConfig[]>`  | Absolutely positioned widgets |
| getStreamStatus | `() => PlayerStreamStatus`  | Gets the current stream status |
| addContent | | Adds a widget. `ContentPlaceType`: `"topLeft"`, `"topRight"`, `"bottomLeft"`, `"bottomRight"`, `"absolute"` |
| deleteContent |  `(type: ContentPlaceType, id: string) => void`  | Deletes a widget |
| hasContent | `(type: ContentPlaceType, id: string) => boolean`  | Checks whether a widget exists |
| hideContent | `(type: ContentPlaceType, id: string) => void`  | Hides a widget |
| showContent | `(type: ContentPlaceType, id: string) => void`  | Shows a widget |
| event | `EventInstance`  | [Event system](/en/miniapp/solution-ai/ability/camera-solution/ipc/fusion-player/base#event-system) |

> In the return values, items of type `RetAtom` cannot be used directly. You must read them with [useStore](/en/miniapp/solution-ai/ability/camera-solution/ipc/fusion-player/api/02-useStore).


## Usage Example
```jsx
import { useCtx, useStore } from '@ray-js/ipc-player-integration';

export function Component() {

  const deviceId = '1234567890xxxxxx';
  const instance = useCtx({
    devId: deviceId
  })
  // Read screenType with useStore
  const { screenType } = useStore({ screenType: instance.screenType });

  // Enable mute
  instance.setMute(true)
}
```