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()
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>
const canvas = document.createElement('canvas');
canvas.width = 1280;
canvas.height = 720;
⚠️ Note: Be sure to set
heightproperties of the
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.