Installing

Using npm:

$ npm install picup-video-cutout

Using CDN:

<script src="https://d38b044pevnwc9.cloudfront.net/cutout-nuxt/videoMatting/picup-video-cutout.v0.1.15.js"></script>

Usage

Constructor:

PicupVideoCutout(token, background, options)

• 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 'picup-video-cutout';
...

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

let domainConfig = {
    token: 'https://picupapi.tukeli.net',
    file: 'https://deeplor.oss-cn-hangzhou.aliyuncs.com/videosdk',
}
new PicupVideoCutout(token, '', {}, domainConfig)

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);
});

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)