VirtualBackground Addon

VideoBgAddon.tsx

import { useEffect, useState } from 'react';
import DyteClient from '@dytesdk/web-core';
import { DyteMeeting, registerAddons } from '@dytesdk/react-ui-kit';
import VideoBackgroundAddon from '@dytesdk/ui-kit-addons/video-background';

const videoBackground = new VideoBackgroundAddon({
	modes: ['blur', 'virtual'],
	images: [
		'https://images.unsplash.com/photo-1487088678257-3a541e6e3922?q=80&w=2874&auto=format&fit=crop&ixlib=rb-4.0.3',
		'https://images.unsplash.com/photo-1496715976403-7e36dc43f17b?q=80&w=2848&auto=format&fit=crop&ixlib=rb-4.0.3',
		'https://images.unsplash.com/photo-1600431521340-491eca880813?q=80&w=2938&auto=format&fit=crop&ixlib=rb-4.0.3',
	],
});

function VideoBgAddon() {
	const [meeting, setMeeting] = useState<DyteClient | null>(null);
	const url = new URL(window.location.href);
	const queryToken = url.searchParams.get('authToken')!;

	if (!queryToken) {
		alert('Please add authToken to url query params');
	}

	useEffect(() => {
		if (meeting) return;
		const init = async () => {
			DyteClient.init({
				defaults: { audio: false, video: false },
				authToken: queryToken,
			}).then((m) => {
				setMeeting(m);
			});
		};
		init();
	}, [meeting, queryToken]);

	if (!meeting) {
		return 'Loading...';
	}

	return <DyteMeeting meeting={meeting} config={registerAddons([videoBackground], meeting)} />;
}

export default VideoBgAddon;