#useCtx
useCtx hooks 方法用于获取播放器上下文实例。
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 |
| 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 | 事件系统 |
返回参数中,类型为 RetAtom 的值都无法直接使用,需要使用 useStore hooks 进行读取
#使用示例
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)
}