Recorder

Recorder

A recorder that captures the screen and creates a video or audio file

Constructor

new Recorder(_optionsopt)

Source:
Name Type Default Description
_options? RecorderOptions {}
Example
import Recorder, { OnRequestCapture } from "@scenjs/recorder";
import Scene from "scenejs";

const scene = new Scene();
const recorder = new Recorder();

recorder.setAnimator(scene);
recorder.setCapturing("png", (e: OnRequestCapture) => {
    scene.setTime(e.time, true);
    // html to image
    return htmlToImage(element);
});

recorder.record().then(data => {
  const url = URL.createObjectURL(new Blob(
    [data.buffer],
    { type: 'video/mp4' },
  ));

  video.setAttribute("src", url);
  recorder.destroy();
});

Methods

setFetchFile(fetchFile)

Source:
Set up a function to import files. Defaults to fetchData from `@ffmpeg/ffmpeg`
Name Type Description
fetchFile (data: FileType) => Promise<Uint8Array | null>

setCapturing(imageType, capturing)

Source:
Set the function to get the image to be captured per frame.
Name Type Description
imageType "jpeg" | "png" image extension of the file
capturing (e: OnRequestCapture) => Promise<FileType> | FileType A function that returns the image to be captured per frame.

setAnimator(animator)

Source:
Set the animator to record.
Name Type Description
animator AnimatorLike | Partial<AnimatorOptions>

(async) recordMedia(mediaInfo, optionsopt) → {Promise<Uint8Array>}

Source:
Start audio processing.
Name Type Description
mediaInfo MediaSceneInfo media info
options? RenderMediaInfoOptions media info options
Returns:
Type
Promise<Uint8Array>

(async) record(optionsopt) → {Promise<Uint8Array>}

Source:
Start capturing and video processing.
Name Type Default Description
options? RenderVideoOptions & RecordInfoOptions {} record options
Returns:
Type
Promise<Uint8Array>

getRecordInfo(options)

Source:
Get the information to be recorded through options.
Name Type Description
options RecordInfoOptions

getAudioFile() → {Uint8Array}

Source:
Get the result of audio processing.
Returns:
Type
Uint8Array

exit()

Source:
Quit ffmpeg.

destroy()

Source:
Remove the recorder and ffmpeg instance.

trigger<Name extends keyof Events>(eventName, paramopt) → {boolean}

Source:
Overrides:
Fires an event to call listeners.
Name Type Default Description
eventName Name | ... Event name
param? TargetParam<any> | ... {} Event parameter

trigger<Name extends keyof Events, Param = Events[Name]>(eventName) → {boolean}

Name Type Description
eventName extends TargetParam<Param> ? Name : never

trigger<Name extends keyof Events, Param = Events[Name]>(eventName, param) → {boolean}

Name Type Description
eventName Name
param TargetParam<Param>
Example
import EventEmitter from "@scena/event-emitter";


const emitter = new EventEmitter();

emitter.on("a", e => {
});


emitter.emit("a", {
  a: 1,
});
Returns:
If false, stop the event.
Type
boolean

once<Name extends keyof Events & string, Param = Events[Name]>(eventName, listeneropt) → {Promise<OnEvent<Param, this>>}

Source:
Inherited From:
Add a disposable listener and Use promise to the registered event.
Name Type Description
eventName Name Name of the event to be added
listener? EventListener<Param, this> disposable listener function of the event to be added
Example
import EventEmitter from "@scena/event-emitter";
cosnt emitter = new EventEmitter();

// Add a disposable listener in "a" event
emitter.once("a", () => {
});

// Use Promise
emitter.once("a").then(e => {
});
Returns:
Type
Promise<OnEvent<Param, this>>

on(eventName, listeneropt) → {this}

Source:
Inherited From:
Add a listener to the registered event.
Name Type Description
eventName string | object | ... Name of the event to be added
listener? EventListener<Events[any], this> | ... listener function of the event to be added

on<Name extends keyof Events, Param = Events[Name]>(eventName, listener) → {this}

Name Type Description
eventName Name
listener EventListener<Param, this>

on(events) → {this}

Name Type Description
events EventHash<Events, this>
Example
import EventEmitter from "@scena/event-emitter";
cosnt emitter = new EventEmitter();

// Add listener in "a" event
emitter.on("a", () => {
});
// Add listeners
emitter.on({
 a: () => {},
 b: () => {},
});
Returns:
Type
this

off(eventNameopt, listeneropt) → {this}

Source:
Inherited From:
Remove listeners registered in the event target.
Name Type Description
eventName? string | object | ... Name of the event to be removed
listener? EventListener<Events[any], this> | ... listener function of the event to be removed

off<Name extends keyof Events, Param = Events[Name]>(eventName, listener) → {this}

Name Type Description
eventName? Name
listener? EventListener<Param, this>

off(events) → {this}

Name Type Description
events EventHash<Events, this>
Example
import EventEmitter from "@scena/event-emitter";
cosnt emitter = new EventEmitter();

// Remove all listeners.
emitter.off();

// Remove all listeners in "A" event.
emitter.off("a");


// Remove "listener" listener in "a" event.
emitter.off("a", listener);
Returns:
Type
this

emit(eventName, paramopt) → {boolean}

Source:
Inherited From:
Fires an event to call listeners.
Name Type Default Description
eventName string | ... Event name
param? TargetParam<any> | ... {} Event parameter

emit<Name extends keyof Events, Param = Events[Name]>(eventName) → {boolean}

Name Type Description
eventName extends Param ? Name : never

emit<Name extends keyof Events, Param = Events[Name]>(eventName, param) → {boolean}

Name Type Description
eventName Name
param TargetParam<Param>
Example
import EventEmitter from "@scena/event-emitter";


const emitter = new EventEmitter();

emitter.on("a", e => {
});


emitter.emit("a", {
  a: 1,
});
Returns:
If false, stop the event.
Type
boolean

Type Definitions

FileType

Source:
Type:
  • string | Buffer | File | Blob | null

OnCapture

Source:
Properties:
ratio
ratio: number
Progress rate captured
frameCount
frameCount: number
Number of frames captured
totalFrame
totalFrame: number
Total number of frames to capture
currentCapturingTime
currentCapturingTime: number
Current capturing progress time
expectedCapturingTime
expectedCapturingTime: number
Expected time for all capturing.
frameInfo
frameInfo: {frame: number, time: number}
Frame Information Captured Now
Type:
  • TSInterface

OnCaptureStart

Source:
Properties:
startFame
startFame: number
The starting frame of the animator to capture.
endFrame
endFrame: number
The end frame of the animator to capture.
startTime
startTime: number
The starting time of the animator to capture.
endTime
endTime: number
The end time of the animator to capture.
duration
duration: number
Length of time of the animator to capture
multi
multi: number
The number of split captures.
fps
fps: number
fps
imageType
imageType: "png" | "jpeg"
Image type (or extension) to capture
Type:
  • TSInterface

OnProcess

Source:
Properties:
ratio
ratio: number
Current progress percentage
currentProcessingTime
currentProcessingTime: number
Current processing progress time
expectedProcessingTime
expectedProcessingTime: number
Expected time for all processing.
Type:
  • TSInterface

OnProcessAudioStart

Source:
Properties:
audiosLength
audiosLength: number
Number of audios included in mediaInfo
Type:
  • TSInterface

OnRequestCapture

Source:
Properties:
frame
frame: number
caputring frame
time
time: number
capturing time
workerIndex
workerIndex: number
worker index
Type:
  • TSInterface

RecorderOptions

Source:
Properties:
log optional
log?: boolean
Whether to show ffmpeg's log
Type:
  • TSInterface

RecordInfoOptions

Source:
Properties:
iteration optional
Default Value: 0
iteration?: number
Input iterationCount of the Scene set by the user himself
duration optional
duration?: number
input how many seconds to play
startTime optional
Default Value: 0
startTime?: number
Input for start time
fps optional
Default Value: 60
fps?: number
multi optional
Default Value: 1
multi?: number
Type:
  • TSInterface

RenderMediaInfoOptions

Source:
Properties:
inputPath optional
inputPath?: string
Type:
  • TSInterface

RenderVideoOptions

Source:
Properties:
duration optional
Default Value: scene's duration
duration?: number
custom scene's duration
fps optional
Default Value: 60
fps?: number
fps
codec optional
Default Value: "libx264"
codec?: string
Codec to encode video If you don't set it up, it's the default (mp4: libx264, webm: libvpx-vp9)
bitrate optional
Default Value: "4096k"
bitrate?: string
Bitrate of video (the higher the bit rate, the clearer the video quality)
ext optional
Default Value: "mp4"
ext?: "mp4" | "webm"
file extension
cpuUsed optional
Default Value: 8
cpuUsed?: number
Number of cpus to use for ffmpeg video or audio processing
Type:
  • TSInterface

Events

capture

Source:
The event is fired when frame capturing is in progress.
Type Description
Recorder.OnCapture Parameters for the `capture` event

captureEnd

Source:
The event is fired when capture ends.

captureStart

Source:
The event is fired when capture starts.
Type Description
Recorder.OnCaptureStart Parameters for the `captureStart` event

processAudio

Source:
The event is fired when audio processing is in progress.
Type Description
Recorder.OnProcess Parameters for the `processAudio` event

processAudioEnd

Source:
The event is fired when audio process ends.

processAudioStart

Source:
The event is fired when audio process starts.
Type Description
Recorder.OnProcessAudioStart Parameters for the `processAudioStart` event

processVideo

Source:
The event is fired when frame video processing is in progress.
Type Description
Recorder.OnProcess Parameters for the `processVideo` event

processVideoEnd

Source:
The event is fired when process video ends

processVideoStart

Source:
The event is fired when process video starts.
Type Description
Recorder.OnProcessVideoStart Parameters for the `processVideoStart` event