EvaLivePlayer

Contents

• EvaLivePlayer

  • Example

  • Parameters

  • Interfaces

    • EvaLivePlayerParams

React component. Live video player

Note

Video decoding in web browser requires secure connection (HTTPS). See Front-end server for HMI service.

Example

import { EvaLivePlayer } from "@eva-ics/webengine-react";
import { useState } from "react";
import { type EvaVideoStreamInfo } from "@eva-ics/webengine-multimedia";
import {
  EvaLivePlayer as EvaLivePlayerC,
  EvaPlayerAutoSize
} from "@eva-ics/webengine-multimedia";

const CustomVideoPlayer = () => {
  const [streamInfo, setStreamInfo] = useState(null);
  const [player, setPlayer] = useState(null);
  const [playing, setPlaying] = useState(true);

  let info = null;

  if (streamInfo) {
    info = (
      <>
        {streamInfo.width}x{streamInfo.height} {streamInfo.codec}{" "}
        {streamInfo.hardwareAcceleration ? "HW" : "SW"}
      </>
    );
  }

  return (
    <>
      <div
        style={{ position: "relative" }}
        onClick={() => {
          if (player) {
            player.togglePause();
            setPlaying(player.isPlaying());
          }
        }}
      >
        <div
          style={{
            position: "absolute",
            right: 40,
            fontWeight: "bold",
            fontSize: playing ? 24 : 50,
            textShadow: "0 0 2px #000;",
            color: "orange",
            top: playing? 10 : 0,
            textAlign: "right",
            display: "inline-block"
          }}
        >
          {player && (playing ? "" : "⏸")}
        </div>
        <EvaLivePlayer
          width="640"
          height="480"
          oid="sensor:streams/s0"
          style={{ backgroundColor: "black" }}
          setPlayer={setPlayer}
          autoSize={EvaPlayerAutoSize.None}
          onChange={(info: EvaVideoStreamInfo) => {
            console.log("Stream changed:", info);
            setStreamInfo(info);
          }}
        />
        <div>{info}</div>
      </div>
    </>
  );
}

Parameters

name	type	required	description
oid	string	yes	item OID
streamName	string	no	An optional WebEngine custom stream name
width	string | number	no	video player width
height	string | number	no	video player height
className	string	no	custom CSS class
style	React.CSSProperties	no	custom CSS styles
autoSize	EvaPlayerAutoSize (enum from eva-webengine-multimedia)	no	Automatically adjust player size
onError	(err: EvaError) => void	no	Called on stream/decoder errors
onFrame	() => void	no	Called on each video frame
onEOS	() => void	no	Called on end of stream
onChange	(info: EvaVideoStreamInfo) => void	no	Called on stream parameters init / change
onInit	(canvas: HTMLCanvasElement) => void	no	Called on player initialization with the canvas element
setPlayer	(player: EvaLivePlayer) => void (class from eva-webengine-multimedia)	no	Allows to get the player internal instance
decoderHardwareAcceleration	boolean	no	Use hardware acceleration for video decoding (default: true)
decoderFallbackToSoftware	boolean	no	Fallback to software decoding if hardware acceleration fails (default: true)
engine	Eva	no	WebEngine object (if no default set)

Interfaces

EvaLivePlayerParams

interface EvaLivePlayerParams {
  oid: string;
  streamName?: string;
  width?: number | string;
  height?: number | string;
  className?: string;
  style?: React.CSSProperties;
  autoSize?: EvaPlayerAutoSize;
  engine?: Eva;
  onError?: (error: EvaError) => void;
  onFrame?: () => void;
  onEOS?: () => void;
  onChange?: (info: EvaVideoStreamInfo) => void;
  onInit?: (canvas: HTMLCanvasElement) => void;
  setPlayer?: (player: EvaLivePlayerC) => void;
  decoderHardwareAcceleration?: boolean;
  decoderFallbackToSoftware?: boolean;
}