@digitalmasterpieces/web-processor NPM

@digitalmasterpieces/

web-processor

npm License npm bundle size Libraries.io dependency status for latest release, scoped npm package Type declarations

Processes visual media using web graphics APIs, such as WebGL or WebGPU. This package provides a generic interface for processing visual media by using a processing core that implements the actual computations.

Installing

You can install the WebProcessor using NPM or Yarn to get the latest version of our library.

npm install @digitalmasterpieces/web-processor

For usage from a CDN we recommend using Skypack CDN. The WebProcessor package is accessable at the following URL:

https://cdn.skypack.dev/@digitalmasterpieces/web-processor

Usage

As default export the package provides the WebProcessor class. You can initialize it as follows:

import WebProcessor, { LogSeverityFlags } from "@digitalmasterpieces/web-processor";

const processor = new WebProcessor({
	canvas: outputCanvas,
	corePath: "/arctic-core/index.js",
	registry,
	logSeverity: LogSeverityFlags.ERROR | LogSeverityFlags.INFO,
});

For initialization you can pass the following options:

canvas - The canvas the result should rendered to. An HTMLCanvasElement of an OffscreenCanvas can be passed. If no canvas is passed, it will use an OffscreenCanvas internally or an HTMLCanvasElement separated from the DOM if your browser does not support the OffscreenCanvas.
core - An URL to a processing core that should be used for processing the visual media. In this example the ArcticCore from the @digitalmasterpieces/arctic-core package was used.
registry - An instance of an AssetRegistry provided by the @digitalmasterpieces/asset-registry package.
logSeverity - Severity level of logging output. If this option is omitted, nothing will be logged to the console.

After initialization the processing core has to be loaded asynchronously:

await processor.load();

When the processing core is loaded images could be processed by passing a File to the process() method with a Blob as result:

const result = await processor.process(image, { "effectId": "default/toon/definition/toon/1" });

Alternatively a combination of the prepare() and render() methods could be used with ImageBitmap to even process frames of a video in an animation loop:

await processor.prepare({ "effectId": "default/toon/definition/toon/1" });

const renderVideo = async () => {
	const inputBitmap = await createImageBitmap(videoElement);

	await processor.render(inputBitmap);

	animation = requestAnimationFrame(renderVideo);
};

The full documentation with some usage examples is available here.

To learn more about the Stylization SDK visit our homepage at https://saas.digitalmasterpieces.com.

Get your own API key here.

Try our demo application here.