Class: FFMPEGView

FFMPEGView(propertiesopt)

This class is in charge of displaying H264 data by decoding ffmpeg.js library and displaying into them a YUV canvas.

Constructor

new FFMPEGView(propertiesopt)

Create a View.
Parameters:
Name Type Attributes Default Description
properties Object <optional>
 {} the properties of the view
Properties
Name Type Attributes Default Description
container string The div element to attach to
css string The css classes to set, can be multiple if separate by spaces
visible boolean set the default behavior of the visibility of the view
layers Array.<Object> <optional>
 [] The initial layers to add
framerate Number <optional>
 29.67 The framerate to play 1s/framerate and get smooth display
directPlay Boolean <optional>
 false Enable or ignore the framerate play
showTime Boolean <optional>
 false Enable or ignore the show timestamp text onto the canvas
showStats Boolean <optional>
 false Enable or ignore the display stats (FPS number) onto the canvas
width Number <optional>
 1920 Set the default canvas width
height Number <optional>
 1080 Set the default canvas height
codec String <optional>
 'h264' Video codec
Source:
Example
import FFMPEGView from 'core/ui/view/video/FFMPEGView.js';

 let videoView = new FFMPEGView({
  container: 'video-h264-container',
  css: 'video-h264',
  name: 'UAV Video',
  framerate:25,
  showTime: true,
  showStats: true,
    layers: [
      new VideoDataLayer({
        dataSourceId: videoDataSource.id,
        getFrameData: (rec) => rec.videoFrame,
        getTimestamp: (rec) => rec.timestamp
      })
  ]
});

Extends

Methods

reset()

Reset the view by drawing no data array into the YUV canvas.
Source:

updateStatistics()

Overrides:
Source:

Events

onAfterDecoded

Called after each decoded frame.
Overrides:
Source: