Installing

Using npm:

$ npm install cutout-video-sdk

Using CDN:

<script src="https://d38b044pevnwc9.cloudfront.net/cutout-nuxt/videoMatting/cutout-video-sdk.0.1.3.js"></script>

Usage

Constructor:

PicupVideoCutout(token, background, options, useMicrophone)

• token: User needs to get authorized token from cutout.pro business, whose email is [email protected]. The officail site is https://www.cutout.pro
• background: The video background is replaced by the specified image.
• options: Other options, for example '{ width: 1280, height: 720 }' can be used to constrain the video width and height

Constructor Sample:

import PicupVideoCutout from 'cutout-video-sdk';
...

new PicupVideoCutout(token) //Initialize a video stream that return the original video stream from camera
new PicupVideoCutout(token, "blur") //Initialize a video stream that can make a blur background effect
new PicupVideoCutout(token, "https://d38b044pevnwc9.cloudfront.net/cutout-nuxt/videoMatting/bgimg_big_1.jpg") //Initialize a video stream that the video background is replaced by the specified image
new PicupVideoCutout(token, '', { width: 1280, height: 720 }) //Initialize a video stream with specified video width and height. The local camera should also support the specified video width and height
new PicupVideoCutout(token, "transparent") //Initialize a video stream that can make a transparent background effect
new PicupVideoCutout(token, 'transparent', {}, true) //Initialize a stream with video and audio

token

Full code sample

Following code shows a sample that use a video tag to show the cutout video stream

let customStreamVideo = document.getElementById('customStreamVideo');
let token = "xxx";
let background = "https://d38b044pevnwc9.cloudfront.net/cutout-nuxt/videoMatting/bgimg_big_1.jpg";
//let background = "blur";

let picupVideoBgSwapTest = new PicupVideoCutout(token, background);
picupVideoBgSwapTest.getOutputStream().then((videoSource) => {
    console.log('picupVideoBgSwapTest-1', videoSource)
    customStreamVideo.srcObject = videoSource
    customStreamVideo.play()
}).catch(function(err) {
    console.log('picupVideoBgSwapTest-err', err, err.name, err.message);
});

Following code shows a sample how to return a canvas, and you can do something with this canvas

let returnCanvas = picupVideoBgSwapTest.captureCanvas()

let newCanvas = document.createElement('canvas')
let newCanvasCtxs = newCanvas.getContext( '2d' );
newCanvas.width = returnCanvas.width
newCanvas.height = returnCanvas.height
newCanvas.drawImage(returnCanvas, 0, 0, newCanvas.width, newCanvas.height);

Other functions

changeBackground(newBackground):

'blur' is a special value for blurring the background

let background = "https://d38b044pevnwc9.cloudfront.net/cutout-nuxt/videoMatting/bgimg_big_2.jpg"
picupVideoBgSwapTest.changeBackground(background)

disable():

Temporarily stop the video processing

picupVideoBgSwapTest.disable()

enable():

Enable the video processing

picupVideoBgSwapTest.enable()

stop():

Permanently stop video processing

picupVideoBgSwapTest.stop()

requestFrameRate(rate):

Change the video frame rate

let rate = 30
picupVideoBgSwapTest.requestFrameRate(rate)

captureCanvas():

Get canvas object

picupVideoBgSwapTest.captureCanvas()