Camera

Camera player component

Installation

npm install @3deye-toolkit/react-camera

Include CSS styles provided by package:

import '@3deye-toolkit/react-camera/dist/react-camera.css';

Import camera component

import Camera from '@3deye-toolkit/react-camera';

Props

prop	type	description
cameraId*	number	ID of the camera
startTime	Date | null	Time to start playback from. Can be useful for playing events
controls	ReactNode	Custom controls component
onRequestClose	(() => void)	Callback fired when the close button is clicked

Additionally you can pass any props of div element (like id or className).

Instance methods

method	arguments	description
onFullscreenRequest	none	sets camera element to fullscreen

Custom Controls

<Controls /> component is a convenient wrapper which automatically arranges its children. Import it like so:

import { Controls } from '@3deye-toolkit/react-camera';

Use <Controls.Spacer /> to insert spacers between controls within <Controls />

Besides <Controls /> several player control components are available:

import {
    PlayerContext
    BoxSelector
    CloseControl
    FullscreenControl
    ResizeModeControl
    PlayPauseControl
    PlaybackRateControl
    SnapshotControl
    VolumeControl
} from '@3deye-toolkit/react-camera';

You can make your own fully custom controls, but if you decided to utilize provided <Controls /> wrapper use <Control></Control> component to make your own custom control.

Interact with a player via controller

Use PlayerContext to access player instance and control its state. Note the observer HOC which allows component to automagically react to player's state

import { observer } from 'mobx-react-lite';
import { Control, PlayerContext } from '@3deye-toolkit/react-camera';

const CustomControl = observer(() => {
    const player = useContext(PlayerContext);

    return <Control onClick={player.togglePlayback}>{player.paused ? 'play' : 'pause'}></Control>;
});

Demo