Use DeepAR Web with video-calling and streaming frameworks

The output of DeepAR is rendered onto a canvas element which can then be further used as an input to other APIs.

Get DeepAR canvas:

const canvas = deepAR.getCanvas()

Canvas can be converted into a MediaStream with captureStream method.

const mediaStream = canvas.captureStream()

The media stream can then be used as an input source to video-calling and streaming APIs.

To control the exact resolution of the canvas, it can be created by the application and passed into DeepAR during initialization.

Create canvas directly in the HTML:

<canvas width='1280' height='720'></canvas>

Or you can create it in Javascript.

const canvas = document.createElement('canvas');
canvas.width = 1280;
canvas.height = 720;

⚠️ Note: Be sure to set width and height properties of the canvas!

You can always change the canvas dimensions and they don't have to match the input video resolution. DeepAR will fit the input camera/video stream correctly to any canvas size.

You pass the canvas when initializing DeepAR.

await deepar.initialize({
  canvas: canvas, 
  // ...
});