#Lite Player

The Lite Player is built upon Ray's IpcPlayer, combining essential UI components and streaming capabilities to help developers quickly integrate IPC playback features.

#Business Fit

If your business scenario doesn’t require the rich built-in capabilities of the fusion player and you prefer a certain degree of UI and interaction customization—without dealing with low-level streaming logic—it's recommended to integrate the lightweight player by following the steps below.

#Install Dependency

yarn add @ray-js/ray-ipc-player

#Usage Example

Note: Real-time playback is currently not supported in IDE preview. Please test on a physical device.

import IpcPlayer from '@ray-js/ray-ipc-player';

function Page() {

  const deviceId = '1234567890xxxxxx';
  // Device online status
  const onlineStatus = true; 
  // Get player instance, you can call player methods via this context
  const onCtx = (ctx) => {
    console.log(ctx, 'ctx');
  };
  // Monitor player stream status
  const onChangeStreamStatus = (status) => {
     console.log(status, 'status');
  };

  return (
    // playerContainer is the player wrapper, defining the size of the player
    <View className={Styles.playerContainer}>
      <IpcPlayer
          objectFit='contain'
          onCtx={onCtx}
          devId={deviceId}
          onlineStatus={onlineStatus}
          onChangeStreamStatus={onChangeStreamStatus}
        />
     </View>    
  )
}

*Player Container Style

.playerContainer {
  width: 100%;
  height: 300px;
}

#Parameter Description

For more generic attributes, see IpcPlayer

Key Stream Status Codes

#Component Implementation

Tip: You can also manually control the playback process using the basic IpcPlayer component along with createIpcPlayerContext.

#IpcPlayer

import { IpcPlayer } from '@ray-js/ray';

The core component used to render the video screen. For detailed usage, please refer to the official documentation: IpcPlayer

#IpcContext

import { createIpcPlayerContext } from '@ray-js/api';

Used to create a player instance and establish device binding relationships. For more details, please refer to: createIpcPlayerContext

Serves as the context object for managing the player lifecycle and control commands. For more information, please refer to: IpcContext