Helpers

SDK provides number of helper classes that can be useful in AR applications:

Snapshoter

Takes a snapshot of the ResponsiveCanvas backing a CanvasRenderer. In general, ResponsiveCanvas is multi-layer therefore two capturing modes are available: capture all layers separately or merge them into one image. When you call snapshot() method Snapshoter waits for the next render update and makes a copy of all canvas layers.

Example of usage (capture snapshot):

const container = document.getElementById("root");
const renderer = new AvatarRenderer(container, "crop", true);
const snapshoter = new Snapshoter(renderer);
container.onclick = async () => {
    const image = await snapshoter.snapshot();
    if (!image)
        return;
    const canvas = document.createElement("canvas");
    const context = canvas.getContext('2d');
    if (!context)
        return;
    canvas.width = image.width;
    canvas.height = image.height;
    context.putImageData(image, 0, 0);
    const url = canvas.toDataURL();
    const link = document.createElement("a");
    link.hidden = true;
    link.href = url;
    link.download = "capture.png";
    link.click();
    link.remove();
    URL.revokeObjectURL(url);
};

Recorder

Records a video of the ResponsiveCanvas backing a CanvasRenderer. ResponsiveCanvas is multi-layer. Every rendering update Recorder merges all snapshots onto the recording canvas. Video of snapshot series is recorded into final video file.

Example of how to record 10 seconds video and download it:

const container = document.getElementById("root");
const renderer = new AvatarRenderer(container, "crop", true);
const recorder = new Recorder(renderer);
container.onclick = async () => {
    recorder?.start();
    setTimeout(async () => {
        const blob = await recorder?.stop();
        if (!blob)
            return;
        const url = URL.createObjectURL(blob);
        const link = document.createElement("a");
        link.hidden = true;
        link.href = url;
        link.download = "capture.webm";
        link.click();
        link.remove();
        URL.revokeObjectURL(url);
    }, 10000);
};

Streamer

Streams video of the ResponsiveCanvas backing a CanvasRenderer. ResponsiveCanvas is multi-layer, Every rendering update Streamer merges all snapshots onto the recording canvas. MediaStream instance is created for this canvas and provides access the generated video stream.