LiveView

The LiveView component enables embedding dynamic textures rendered by the engine into the UI.

Note

For more details on live views, refer to our documentations:

• Native
• Unreal
• Unity

Usage

To render a live view in your UI, use the LiveView component as shown below:

import LiveView from '@components/Media/LiveView/LiveView';

const App = () => {
    return (
        <LiveView src={'TextureRenderTarget2D\'/Game/LiveViews/LiveViewRT.LiveViewRT\''} style={{ width: '150px', height: '150px' }} />
    );
};

export default App;

Styling the Component

You can style the LiveView component using either the class or style attribute.

For inline styles, pass an object with the desired properties. For example, you can set the width and height of the image as shown here.

However, for better performance, it is recommended to use the class attribute. To do this, create a CSS file with the desired styles and apply them to the LiveView component:

MyLiveView.module.css:

.my-live-view {
    width: 150px;
    height: 150px;
}

import LiveView from '@components/Media/LiveView/LiveView';
import styles from './MyLiveView.module.css';

const App = () => {
    return (
        <LiveView src={'TextureRenderTarget2D\'/Game/LiveViews/LiveViewRT.LiveViewRT\''} class={styles['my-live-view']} />
    );
};

export default App;

Fill the container

To make the LiveView component fill its container, set the fill property to true. This will apply styles to ensure the image occupies the entire space of its parent element. This prop is useful when you want the image to just adapt to the size of its container.

import LiveView from '@components/Media/LiveView/LiveView';
import MyImage from '../../assets/my-image.png';

const App = () => {
    return (
        <div style={{ width: "10vmax", height: "10vmax" }}>
            <LiveView fill src={'TextureRenderTarget2D\'/Game/LiveViews/LiveViewRT.LiveViewRT\''} />
        </div>
    );
};

export default App;