On this page
Lite Player ComponentLayoutRotation AngleFusion Player ComponentLayoutobjectFit SolutionEncapsulation SolutionRotation Angle

Stream Layout

In the IPC player, you can control the video layout using the objectFit property. It supports two modes: fillCrop (stretch to fill) and contain (fit to screen).

You can also set the rotateZ property to rotate the video. Supported angles are 0, 90, 180, and 270 degrees.

Below are common layout examples for different player components.

Lite Player Component

💡 Note: Upgrade @ray-js/ray-ipc-player to the latest version.

Layout

  • Aspect Ratio: Most videos are 16:9. Other ratios can be adjusted as needed.
  • Portrait Mode: Use fillCrop to fill the screen.
  • Landscape Mode: Use contain to preserve the aspect ratio.
  • Display Effect: Videos are shown in 16:9. On devices with wider aspect ratios, black bars may appear on the sides.

💡 Tip: Hide the title bar in full-screen mode.

const [screenType, setScreenType] = useState('portrait');
<TopBar title="title" style={{display: screenType === 'portrait' ? 'block' : 'none'}} />

** Example Code**

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

const deviceId = '1234567890xxxxxx';

// Define screen state. You can listen to window size changes via the onResize event to dynamically update the screen state.
const [screenType, setScreenType] = useState('portrait');

const onCtx = (ctx) => {
    console.log(ctx, 'ctx');
};

<view style={{ height: screenType === 'portrait' ? `300px` : '100vh', overflow: 'hidden' }}>
   <IpcPlayer
      objectFit={screenType === 'portrait' ? 'fillCrop' : 'contain'}
      onCtx={onCtx}
      devId={deviceId}
      onChangeStreamStatus={onChangeStreamStatus}
    />
</view>

Rotation Angle

Based on the layout settings, you can add a rotation angle according to your business scenario.

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

    <IpcPlayer
      objectFit={'contain'}
      onCtx={onCtx}
      devId={deviceId}
      onChangeStreamStatus={onChangeStreamStatus}
      rotateZ={90}
    />

Fusion Player Component

💡 Note Make sure the Fusion Player component @ray-js/ipc-player-integration is updated to the latest version.

Layout

The Fusion Player is a secondary encapsulation based on the Lite Player. The implementation of the layout is consistent with the Lite Player component, mainly embedding some basic functions. Most videos have an aspect ratio of 16:9. It is recommended to use the fillCrop layout mode in portrait mode and the contain layout mode in landscape mode.

The display effect: displayed in the original 16:9 ratio. If the phone's aspect ratio is greater than 16:9, most screens will have black bars on the left and right sides.

objectFit Solution

import { IPCPlayerIntegration, useCtx } from '@ray-js/ipc-player-integration';
import { useState } from 'react';

const deviceId = '1234567890xxxxxx';

// Define screen state. You can listen to window size changes via the onResize event to dynamically update the screen state.
const [screenType, setScreenType] = useState('portrait');

const instance = useCtx({
    devId: deviceId,
});

<view style={{ height: screenType === 'portrait' ? `300px` : '100vh', overflow: 'hidden' }}>
   <IPCPlayerIntegration
      instance={instance}
      objectFit={screenType === 'portrait' ? 'fillCrop' : 'contain'}
      devId={deviceId}
    />
</view>

Encapsulation Solution

  • playerFit parameter is used to define the layout mode in portrait orientation. The default display scale is 1, with a default value of contain. Optional values are contain ｜ cover.
  • landscapeMode parameter is used to define the layout mode in landscape orientation. The default display scale is 1, with a default value of standard. Optional values are standard ｜ fill.

💡 Note This mode customizes the layout based on portrait and landscape orientations. Do not set objectFit simultaneously to avoid conflicts.

import { IPCPlayerIntegration, useCtx } from '@ray-js/ipc-player-integration';
import { useState } from 'react';

const deviceId = '1234567890xxxxxx';

// Define screen state. You can listen to window size changes via the onResize event to dynamically update the screen state.
const [screenType, setScreenType] = useState('portrait');

const instance = useCtx({
    devId: deviceId,
});

<view style={{ height: screenType === 'portrait' ? `300px` : '100vh', overflow: 'hidden' }}>
   <IPCPlayerIntegration
      instance={instance}
      devId={deviceId}
      playerFit='contain'
      landscapeMode='standard'
    />
</view>

Rotation Angle

Rotation is uniformly handled using the extend parameter to pass through properties supported by the Lite Player.

import { IPCPlayerIntegration, useCtx } from '@ray-js/ipc-player-integration';
import { useState } from 'react';

const deviceId = '1234567890xxxxxx';

// Define screen state. You can listen to window size changes via the onResize event to dynamically update the screen state.
const [screenType, setScreenType] = useState('portrait');

const instance = useCtx({
    devId: deviceId,
});

<view style={{ height: screenType === 'portrait' ? `300px` : '100vh', overflow: 'hidden' }}>
   <IPCPlayerIntegration
      instance={instance}
      devId={deviceId}
      playerFit='contain'
      landscapeMode='standard'
      extend={{rotateZ: 90}}
    />
</view>