Data sources

fileUpload

marcelle.fileUpload(): fileUpload;

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

Streams

NameTypeDescriptionHold
$filesStream<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

OptionTypeDescriptionRequiredDefault
widthnumberTarget image width0
heightnumberTarget image height0

Streams

NameTypeDescriptionHold
$imagesStream<ImageData>Stream of images in the ImageDataopen in new window format.
$thumbnailsStream<string>Stream of thumbnail images in base64 dataURIopen in new window format.

Screenshot

Screenshot of the imageUpload component

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

OptionTypeDescriptionRequiredDefault
mediaStreamMediaStreamMediaStream from which to record0

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

Streams

NameTypeDescriptionHold
$mediaStreamStream<MediaStream>Stream of MediaStream to specify the source of recordings dynamically
$activeStream<boolean>Stream specifying the recording status, that can be used to toggle recording
$recordingsStream<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

Screenshot of the media-recorder component

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

NameTypeDescriptionHold
$activeStream<boolean>Boolean stream specifying if the webcam is active (streaming)
$readyStream<boolean>Boolean stream specifying if the webcam is ready
$mediastreamStream<MediaStream>Stream of MediaStream corresponding to the selected microphone. Events are emitted whenever a device is selected.

Screenshot

Screenshot of the microphone component

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

NameTypeDescriptionHold
$imagesStream<ImageData>Stream of images in the ImageDataopen in new window format.
$thumbnailsStream<string>Stream of thumbnail images in base64 dataURIopen in new window format.
$strokeStartStream<undefined>Stream of empty (undefined) events occurring every time the user starts drawing
$strokeEndStream<undefined>Stream of empty (undefined) events occurring every time the user stops drawing

Screenshot

Screenshot of the sketchpad component

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

OptionTypeDescriptionRequiredDefault
widthnumberThe target image width224
heightnumberThe target image height224
periodnumberThe period in ms at which images are sampled50

Streams

NameTypeDescriptionHold
$imagesStream<ImageData>Stream of images in the ImageDataopen in new window format.
$thumbnailsStream<string>Stream of thumbnail images in base64 dataURIopen in new window format.
$activeStream<boolean>Boolean stream specifying if the webcam is active (streaming)
$readyStream<boolean>Boolean stream specifying if the webcam is ready
$mediastreamStream<MediaStream>Stream of MediaStream corresponding to the selected webcam. Events are emitted whenever a webcam is selected.

Screenshot

Screenshot of the webcam component

Example

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