English | 简体中文

ray-ipc-player

Encapsulates basic ipc-player capabilities, including loading, device exception, and offline prompts

property

export type IProps = {
  /**
   * @description.en devId
   * @default ""
   */
  devId: string;
  /**
   * @description.en Whether the device is online
   * @default true
   */
  onlineStatus: boolean;
  /**
   * @description.en Privacy mode
   * @default false
   */
  privateState?: boolean;
  /**
   * @description.en defaultMute
   * @default true
   */
  defaultMute?: boolean;
  /**
   * @description.en clarity
   * @default "normal"
   */
  clarity?: 'normal' | 'hd';
  /**
   * @description.en Notifying the view of updates, each time you need to set a different value
   * @default ""
   */
  updateLayout?: any;
  /**
   * @description.en Notifies the video stream that the state has changed
   * @default (data) => void
   */
  onChangeStreamStatus?: (data) => void;
  /**
   * @description.en Obtain ipcPlayer instance ctx and retry method Retry
   * @default (playerRef) => void
   */
  onCtx?: (playerRef) => void;
  /**
   * @description.en The initialization preview is successful
   * @default (devId) => void
   */
  onInitPreview?: (data) => void;
  /**
   * @description.en Click events in the player area
   * @default (devId) => void
   */
  onPlayerTap?: (data) => void;
  /**
   * @description.en Scalable or not
   * @default true
   */
  scalable?: boolean;
  /**
   * @description.en Scale of scale
   * @default 0
   */
  scaleMultiple?: number;
  /**
   * @description.en Camera rotation Angle
   * @default 0
   */
  rotateZ?: number;
  /**
   * @description.en Whether to enable the video area cradle head control
   * @default true
   */
  ptzControllable?: boolean;
  /**
   * @description.en playerStyle
   * @default {}
   */
  playerStyle?: {
    bgColor?: string;
    borderRadius?: number | string;
    borderStyle?: 'solid' | 'dashed';
    borderColor?: string;
    borderWidth?: string | number;
  };
  /**
   * @description.en Loading copy
   * @default "Getting a video stream..."
   */
  loadText?: string;
  /**
   * @description.en objectFit：contain|fillCrop
   * @description.zh contain: The long side of the image will fill the screen, the short side area will be filled with black, fillCrop: The image will fill the screen
   * @default "contain"
   */
   objectFit?: string;
  /**
   * @description.en Extended Attributes
   * @default {}
   */
  extend?: Record<string, any>;
};

onChangeStreamStatus instructions

It mainly exposes some status events during the pull flow: the initialization preview is successful:

• -1000: Unknown anomaly

• 1001: Connection successful

• -1001: Connection failure

• 1002: preview successful

• -1002: preview failure

• -1010: The network status is unavailable

• -1012: The device is removed.

• 1009: disconnect successful

• -1009: disconnect failure

usage

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({});
  const [playerWidth, setPlayerWidth] = useState('200px');
  /** onCtx usage
   *  playerCtx.ctx: The instance of ipc-player,includes preview, definition, mute, video, screenshot and other methods
   *  playerCtx.retry: retry
   */
  const onCtx = playerCtx => {
    setState(playerCtx);
  };

  // Clarity of switching
  const handleClarity = useCallback(() => {
    if (previewStatus) {
      state.ctx.setClarity({
        clarity: 'hd',
        success: res => {
          console.log('Succeeded in switching clarity:', res);
        },
        fail: e => {
          console.log('Failed to switch clarity:', e);
        },
      });
    }
  }, [previewStatus]);

  const handleChangeWidth = () => {
    setPlayerWidth(playerWidth);
    // Update the player view with a synchronous notification when the width style of the outer parent node is updated
    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}>Clarity of switching</Button>
      <Button onClick={() => handleChangeWidth}>Update the width</Button>
    </View>
  );
};

export default PlayerDemo;