Data sources

fileUpload

marcelle.fileUpload(): fileUpload;

A file upload component, that creates a stream of files.

Streams

Name	Type	Description	Hold
$files	Stream<never()>	Stream of files

Example

const myFileUpload = marcelle.fileUpload();
myFileUpload.$files.subscribe((x) => console.log('fileUpload $files:', x));

imageUpload

marcelle.imageUpload({ width?: number, height?: number }): ImageUpload;

An Image upload component, that creates a stream of images and thumbnails. Images are cropped and rescaled to match the target dimensions, if these are non-zero, otherwise the dimensions are unchanged.

Parameters

Option	Type	Description	Required	Default
width	number	Target image width		0
height	number	Target image height		0

Streams

Name	Type	Description	Hold
$images	Stream<ImageData>	Stream of images in the ImageData format.
$thumbnails	Stream<string>	Stream of thumbnail images in base64 dataURI format.

Screenshot

Example

const imgUpload = marcelle.imageUpload();
imgUpload.$images.subscribe((x) => console.log('imageUpload $images:', x));

mediaRecorder

marcelle.mediaRecorder(mediaStream: MediaStream): MediaRecorder;

A generic recording component for audio/visual data, that works both for audio and video. The component can be used, for instance, with the microphone and webcam components.

Parameters

Option	Type	Description	Required	Default
mediaStream	MediaStream	MediaStream from which to record		0

The MediaStream can be obtained from the microphone and webcam component through their mediastream stream.

Streams

Name	Type	Description
$mediaStream	Stream<MediaStream>	Stream of MediaStream to specify the source of recordings dynamically
$active	Stream<boolean>	Stream specifying the recording status, that can be used to toggle recording
$recordings	Stream<IRecording>	Stream of recordings produced by the component. A new event occurs whenever the recording is stopped.

Each event in the stream of recordings has the following interface:

$recordings: Stream<{
  duration: number;
  blob: Blob;
  type: string;
  thumbnail: string;
}>;

Screenshot

Example

const input = webcam({ audio: true }); // OR: const input = microphone();
const recorder = mediaRecorder();
recorder.$mediaStream = input.$mediastream;

recorder.$recordings.subscribe(console.log);

microphone

marcelle.microphone(): Microphone;

A microphone source component.

Streams

Name	Type	Description
$active	Stream<boolean>	Boolean stream specifying if the webcam is active (streaming)
$ready	Stream<boolean>	Boolean stream specifying if the webcam is ready
$mediastream	Stream<MediaStream>	Stream of MediaStream corresponding to the selected microphone. Events are emitted whenever a device is selected.

Screenshot

sketchPad

marcelle.sketchpad(): Sketchpad;

An input sketching component allowing the user to draw. The generate generates a stream of images of the sketches, as well as stream for various user actions.

Streams

Name	Type	Description
$images	Stream<ImageData>	Stream of images in the ImageData format.
$thumbnails	Stream<string>	Stream of thumbnail images in base64 dataURI format.
$strokeStart	Stream<undefined>	Stream of empty (undefined) events occurring every time the user starts drawing
$strokeEnd	Stream<undefined>	Stream of empty (undefined) events occurring every time the user stops drawing

Screenshot

Example

const sketch = marcelle.sketchpad();
sketch.$strokeStart.subscribe(() => console.log('sketchpad $strokeStart'));
sketch.$strokeEnd.subscribe(() => console.log('sketchpad $strokeEnd'));

webcam

marcelle.webcam({ width?: number, height?: number, period?: number }): Webcam;

A webcam source component, producing a periodic stream of images.

Parameters

Option	Type	Description	Default
width	number	The target image width	224
height	number	The target image height	224
period	number	The period in ms at which images are sampled	50

Streams

Name	Type	Description
$images	Stream<ImageData>	Stream of images in the ImageData format.
$thumbnails	Stream<string>	Stream of thumbnail images in base64 dataURI format.
$active	Stream<boolean>	Boolean stream specifying if the webcam is active (streaming)
$ready	Stream<boolean>	Boolean stream specifying if the webcam is ready
$mediastream	Stream<MediaStream>	Stream of MediaStream corresponding to the selected webcam. Events are emitted whenever a webcam is selected.

Screenshot

Example

const webcam = marcelle.webcam();
webcam.$images.subscribe((x) => console.log('webcam $images:', x));