Видео-эффекты

Поддерживается несколько базовых видео-эффектов

import * as SDK from '@vkontakte/calls-sdk';
import {
    isSupported,
    EffectBackground,
    EffectBlur,
    EffectOverlay,
    EffectFilter,
    EffectCombined,
    VideoEffects,
} from '@vkontakte/calls-video-effects';

await SDK.init(/* ... */);
if (isSupported()) {
    SDK.setVideoEffects(new VideoEffects());
}

Замена фона изображением

const effectBackground = new EffectBackground();
await effectBackground.setBackgroundImage('./image.jpg')
await SDK.changeVideoEffect(effectBackground);

Размытие фона

const effectBlur = new EffectBlur();
effectBlur.setEffects({blurStrength: 0.8}); // optional
await SDK.changeVideoEffect(effectBlur);

Наложение изображения

const effectOverlay = new EffectOverlay();
await effectOverlay.setOverlayImage('./overlay.png');
await SDK.changeVideoEffect(effectOverlay);

Фильтры

const effectFilter = new EffectFilter();
await effectFilter.setFilter({
    grayscale: 0.8,
    sepia: 0.7,
    brightness: 1.2,
    contrast: 1.5
});
await SDK.changeVideoEffect(effectFilter);

Комбинация нескольких эффектов

const effectCombined = new EffectCombined([effectBlur, effectFilter, effectOverlay]);
await SDK.changeVideoEffect(effectCombined);

Эффекты будут применяться к видео по порядку, но есть ограничения:

• EffectBlur и EffectBackground всегда будут применяться первыми
• EffectBlur и EffectBackground нельзя использовать вместе

---

Эффекты можно использовать отдельно от звонка, например в интерфейсе выбора и предпросмотра

const videoEffects = new VideoEffects();
// Получаем стрим с камеры и видео-трек
const stream = await SDK.browser.getUserVideo();
const [track] = stream.getVideoTracks();
// Создаем эффект
const effect = new EffectBackground();
effect.setBackgroundImage(photo);
// Получаем новый трек с эффектом и устанавливаем его источником видео-элементу
const newTrack = await videoEffects.setEffect(effect, track.clone());
video.srcObject = new MediaStream([newTrack]);