[English](./README.md) | 简体中文

# ray-ipc-player

针对 ipc-player 基础能力进行封装，包含 loading、设备异常、离线等提示

### 属性

```ts
export type IProps = {
  /**
   * @description.en devId
   * @description.zh 设备id
   * @default ""
   */
  devId: string;
  /**
   * @description.en onlineStatus
   * @description.zh 设备是否在线
   * @default true
   */
  onlineStatus: boolean;
  /**
   * @description.en privateState
   * @description.zh 隐私模式
   * @default false
   */
  privateState?: boolean;
  /**
   * @description.en defaultMute
   * @description.zh 默认静音
   * @default true
   */
  defaultMute?: boolean;
  /**
   * @description.en clarity
   * @description.zh 清晰度 normal：标清，hd：高清
   * @default "normal"
   */
  clarity?: 'normal' | 'hd';
  /**
   * @description.en updateLayout
   * @description.zh 外层父节点样式变化，播放器监听不到，需要主动触发播放器视图更新，每次需要设置不同的字符串值
   * @default ""
   */
  updateLayout?: any;
  /**
   * @description.en onChangeStreamStatus
   * @description.zh 通知视频流状态发生变化
   * @default (data) => void
   */
  onChangeStreamStatus?: (data) => void;
  /**
   * @description.en onCtx
   * @description.zh 获取ipcPlayer实例ctx以及重试方法retry
   * @default (playerRef) => void
   */
  onCtx?: (playerRef) => void;
  /**
   * @description.en onInitPreview
   * @description.zh 初始化预览成功通知
   * @default (devId) => void
   */
  onInitPreview?: (data) => void;
  /**
   * @description.en onPlayerTap
   * @description.zh 播放器区域点击事件
   * @default (devId) => void
   */
  onPlayerTap?: (data) => void;
  /**
   * @description.en scalable
   * @description.zh 是否可缩放
   * @default true
   */
  scalable?: boolean;
  /**
   * @description.en scaleMultiple
   * @description.zh 缩放比例
   * @default 0
   */
  scaleMultiple?: number;
  /**
   * @description.en rotateZ
   * @description.zh 摄像头旋转角度
   * @default 0
   */
  rotateZ?: number;
  /**
   * @description.en ptzControllable
   * @description.zh 是否开启视频区云平台控制
   * @default true
   */
  ptzControllable?: boolean;
  /**
   * @description.en playerStyle
   * @description.zh 播放器样式
   * @default {}
   */
  playerStyle?: {
    bgColor?: string; // 背景底色
    borderRadius?: number | string; // 边框圆角
    borderStyle?: 'solid' | 'dashed'; // 边框样式
    borderColor?: string; // 边框颜色
    borderWidth?: string | number; // 边框宽度
  };
  /**
   * @description.en loadText
   * @description.zh 加载过程中的文案，可结合onChangeStreamStatus事件做文案配置
   * @default "正在获取视频流..."
   */
  loadText?: string;
  /**
   * @description.en objectFit：contain|fillCrop
   * @description.zh 填充模式设置：contain: 图像长边填满屏幕，短边区域会被填充⿊⾊, fillCrop: 图像铺满屏幕
   * @default "contain"
   */
   objectFit?: string;
  /**
   * @description.en extend
   * @description.zh 扩展属性
   * @default {}
   */
  extend?: Record<string, any>;
};
```

#### onChangeStreamStatus 说明

主要暴露出拉流过程中的一些状态事件：

- -1000: 未知异常

- 1001: connect 连接成功

- -1001: connect 连接失败

- 1002: preview 成功

- -1002: preview 失败

- -1010: 网络状态不可用

- -1012: 设备被移除

- 1009: disconnect 成功

- -1009: disconnect 失败

### 用法

```tsx
import React, { useState, useCallback } from 'react';
import Player from '@ray-js/ray-ipc-player';
import { Button, View } from '@ray-js/components';

const PlayerDemo = () => {
  const [updateLayout, setUpdateLayout] = useState('');
  const [state, setState] = useState({}); // player实例
  const [playerWidth, setPlayerWidth] = useState('200px'); // player宽度
  /** onCtx用法
   *  playerCtx.ctx: 拿到的是通过createIpcPlayerContext创建的ipc-player实例，包含预览、清晰度、静音、录像、截图等方法
   *  playerCtx.retry: 暴露出的重试方法
   */
  const onCtx = playerCtx => {
    setState(playerCtx);
  };

  // 切换清晰度
  const handleClarity = useCallback(() => {
    if (previewStatus) {
      state.ctx.setClarity({
        clarity: 'hd',
        success: res => {
          console.log('切换清晰度成功：', res);
        },
        fail: e => {
          console.log('切换清晰度失败：', e);
        },
      });
    }
  }, [previewStatus]);

  const handleChangeWidth = () => {
    setPlayerWidth(playerWidth);
    // 更新外层父节点宽度样式时，同步通知更新播放器视图
    setUpdateLayout(Math.random().toString());
  };

  return (
    <View style={{ width: playerWidth }}>
      <Player
        devId={devId}
        onlineStatus={true}
        onCtx={onCtx}
        updateLayout={updateLayout}
        extend={{
          soundMode: 'speaker',
          orientation: 'vertical',
        }}
      />
      <Button onClick={() => handleClarity}>切换清晰度</Button>
      <Button onClick={() => handleChangeWidth}>更新宽度</Button>
    </View>
  );
};

export default PlayerDemo;
```