---
title: useCtx
summary: 介绍 useCtx hook 用法，用于获取融合播放器上下文实例及参数说明。
---

# useCtx

> useCtx hooks 方法用于获取播放器上下文实例。

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

## 入参 Options

| 参数名 | 类型 | 是否必传 | 含义 |
|-------|-------|-------|-------|
| devId | string | 是 | 设备 ID |
| initTopLeftContent | ComponentConfig[] | 否 | 位于左上角的 Widget 初始值 |
| initTopRightContent | ComponentConfig[] | 否 | 位于右上角的 Widget 初始值 |
| initBottomLeftContent | ComponentConfig[] | 否 | 位于左下角 Widget 初始值 |
| initBottomRightContent | ComponentConfig[] | 否 | 位于右下角 Widget 初始值 |
| initAbsoluteContent | ComponentConfig[] | 否 | 绝对定位的 Widget 初始值 |
| saveToAlbum | 0 或 1 | 否 | 保存文件的时候，保存到 0 系统相册，1 IPC 相册，默认为 1 |


## 返回参数 Ctx
| 参数名 | 类型 | 含义 |
|-------|-------|-------|
| devId | `string` | 设备 ID |
| brandColor | `RetAtom<string>` | 主题色 注：RetAtom 类型的值需要使用 useStore 读取|
| setBrandColor | `(value: string) => void` | 设置 brandColor |
| verticalMic | `RetAtom<string>` | 竖屏状态下，是否展示对讲，默认为 true |
| setVerticalMic | `(value: string) => void`  | 设置 verticalMic |
| saveToAlbum | 0 或者 1  |  |
| screenType | `RetAtom<ScreenType>` | full 横屏，vertical竖屏 |
| setScreenType | `(value: ScreenType) => void` | 设置 screenType |
| recording |  `RetAtom<boolean>` | 是否正在录像中 |
| setRecording |  `(value: boolean) => void` | 设置 recording |
| recordingDisabled |  `RetAtom<boolean>` | 是否禁止录像 |
| setRecordingDisabled |  `RetAtom<boolean>` | 设置 recordingDisabled |
| mute |  `RetAtom<boolean>` | 当前是否为静音状态 |
| setMute |  `(value: boolean) => Promise<boolean>` | 设置 mute，会改变播放器静音状态 |
| intercom |  `RetAtom<boolean>` | 当前是否对讲中 |
| setIntercom |  `(value: boolean) => Promise<boolean>` | 设置 intercom，会改变播放器对讲状态 |
| intercomMode | `RetAtom<IntercomMode>` | 当前为单向对讲还是双向对讲， OneWay 单向对讲、TwoWay 双向对讲|
| intercomSupported |  `RetAtom<boolean>` | 当前摄像头
对讲 |
| resolution |  `RetAtom<string>` | 播放器当前清晰度 |
| setResolution |  `(type: string) => void` | 设置清晰度 |
| resolutionList |  `RetAtom<string[]>` | 当前支持的清晰度列表 |
| setResolutionList |  `(type: string[]) => void` | 设置 resolutionList |
| playState | `RetAtom<PlayState>`  | 播放器状态 0 连接中、1 播放中、2 暂停 |
| IPCPlayerInstance | `IpcContext`  | 播放器上下文，详情：[IPcContext](/cn/miniapp/develop/miniapp/api/media/ipc/createIpcContext) |
| topLeftContent | `RetAtom<ComponentConfig[]>`  | 位于左上角的 Widget |
| topRightContent | `RetAtom<ComponentConfig[]>`  | 位于右上角的 Widget |
| bottomLeftContent | `RetAtom<ComponentConfig[]>`  | 位于左下角的 Widget |
| bottomRightContent | `RetAtom<ComponentConfig[]>`  | 位于右下角的 Widget |
| absoluteContent | `RetAtom<ComponentConfig[]>`  | 绝对定位的 Widget |
| getStreamStatus | `() => PlayerStreamStatus`  | 获取当前拉流状态 |
| addContent | | 添加 Widget，ContentPlaceType："topLeft" 、 "topRight" 、"bottomLeft" 、"bottomRight" 、 "absolute" |
| deleteContent |  `(type: ContentPlaceType, id: string) => void`  | 删除 Widget |
| hasContent | `(type: ContentPlaceType, id: string) => boolean`  | 判断某个 Widget 是否存在 |
| hideContent | `(type: ContentPlaceType, id: string) => void`  | 隐藏 Widget |
| showContent | `(type: ContentPlaceType, id: string) => void`  | 显示 Widget |
| event | `EventInstance`  | [事件系统](/cn/miniapp/solution-ai/ability/camera-solution/ipc/fusion-player/base#事件系统) |

> 返回参数中，类型为 RetAtom 的值都无法直接使用，需要使用 [useStore hooks](/cn/miniapp/solution-ai/ability/camera-solution/ipc/fusion-player/api/02-useStore) 进行读取


## 使用示例
```jsx
import { useCtx, useStore } from '@ray-js/ipc-player-integration';

export function Component() {

  const deviceId = '1234567890xxxxxx';
  const instance = useCtx({
    devId: deviceId
  })
  // 使用 useStore 读取 screenType
  const { screenType } = useStore({ screenType: instance.screenType });

  // 开启静音
  instance.setMute(true)
}
```