← Cloudflare Realtime / realtime / realtimekit / core

Эффекты видео

Добавляйте эффекты фона и размытие к видеопотокам участников встреч RealtimeKit с помощью Core SDK.

Установка

npm i @cloudflare/realtimekit-virtual-background

Использование

1. Отключите стандартный рендеринг по кадрам

Отключите стандартный покадровый рендеринг видео в middleware, чтобы этот middleware управлял им самостоятельно, повысив скорость и качество:

await meeting.self.setVideoMiddlewareGlobalConfig({
	disablePerFrameCanvasRendering: true,
});

2. Инициализируйте трансформер

Создайте объект-преобразователь фона видео:

import RealtimeKitVideoBackgroundTransformer from "@cloudflare/realtimekit-virtual-background";

const videoBackgroundTransformer =
	await RealtimeKitVideoBackgroundTransformer.init({
		meeting,
	});

3. Примените эффекты фона

videoBackgroundTransformer предоставляет два типа миддлваров:

Статичное фоновое изображение

Используйте createStaticBackgroundVideoMiddleware чтобы установить изображение в качестве фона:

const imageUrl = "https://images.unsplash.com/photo-1487088678257-3a541e6e3922";

meeting.self.addVideoMiddleware(
	await videoBackgroundTransformer.createStaticBackgroundVideoMiddleware(
		imageUrl,
	),
);

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

Используйте createBackgroundBlurVideoMiddleware чтобы размыть фон. Передайте blurStrength (0-100) в качестве параметра (по умолчанию 50%):

meeting.self.addVideoMiddleware(
	await videoBackgroundTransformer.createBackgroundBlurVideoMiddleware(50),
);

Поддержка браузерами

Перед инициализацией проверьте поддержку браузера:

if (RealtimeKitVideoBackgroundTransformer.isSupported()) {
	const videoBackgroundTransformer =
		await RealtimeKitVideoBackgroundTransformer.init({
			meeting: meeting,
		});

	meeting.self.addVideoMiddleware(
		await videoBackgroundTransformer.createStaticBackgroundVideoMiddleware(
			imageUrl,
		),
	);
}

Расширенная настройка

Для более чётких и качественных результатов передайте собственную конфигурацию сегментации:

const videoBackgroundTransformer =
	await RealtimeKitVideoBackgroundTransformer.init({
		meeting,
		segmentationConfig: {
			model: "mlkit", // 'meet' | 'mlkit'
			backend: "wasmSimd",
			inputResolution: "256x256", // '256x144' for meet
			pipeline: "webgl2", // 'webgl2' | 'canvas2dCpu'
			// canvas2dCpu gives sharper blur, webgl2 is faster
			targetFps: 35,
		},
	});

Установка

npm i @cloudflare/realtimekit-virtual-background

Использование

import { useState, useEffect } from "react";
import { useRealtimeKitClient } from "@cloudflare/realtimekit-react";
import RealtimeKitVideoBackgroundTransformer from "@cloudflare/realtimekit-virtual-background";

function App() {
	const [meeting] = useRealtimeKitClient();
	const [videoBackgroundTransformer, setVideoBackgroundTransformer] =
		useState(null);

	useEffect(() => {
		const initializeTransformer = async () => {
			if (!meeting) return;

			// Check browser support
			if (!RealtimeKitVideoBackgroundTransformer.isSupported()) {
				console.warn("Video background not supported in this browser");
				return;
			}

			// Disable default per frame rendering
			await meeting.self.setVideoMiddlewareGlobalConfig({
				disablePerFrameCanvasRendering: true,
			});

			// Initialize transformer
			const transformer = await RealtimeKitVideoBackgroundTransformer.init({
				meeting,
			});

			setVideoBackgroundTransformer(transformer);
		};

		initializeTransformer();
	}, [meeting]);

	const applyStaticBackground = async (imageUrl) => {
		if (!videoBackgroundTransformer) return;

		meeting.self.addVideoMiddleware(
			await videoBackgroundTransformer.createStaticBackgroundVideoMiddleware(
				imageUrl,
			),
		);
	};

	const applyBlur = async (blurStrength = 50) => {
		if (!videoBackgroundTransformer) return;

		meeting.self.addVideoMiddleware(
			await videoBackgroundTransformer.createBackgroundBlurVideoMiddleware(
				blurStrength,
			),
		);
	};

	const removeBackground = () => {
		// Remove all video middlewares
		meeting.self.removeVideoMiddleware();
	};

	return (
		<div>
			<button
				onClick={() =>
					applyStaticBackground(
						"https://images.unsplash.com/photo-1487088678257-3a541e6e3922",
					)
				}
			>
				Apply Background
			</button>
			<button onClick={() => applyBlur(50)}>Apply Blur</button>
			<button onClick={removeBackground}>Remove Background</button>
		</div>
	);
}

Расширенная настройка

Для более чётких и качественных результатов передайте собственную конфигурацию сегментации:

const transformer = await RealtimeKitVideoBackgroundTransformer.init({
	meeting,
	segmentationConfig: {
		model: "mlkit", // 'meet' | 'mlkit'
		backend: "wasmSimd",
		inputResolution: "256x256", // '256x144' for meet
		pipeline: "webgl2", // 'webgl2' | 'canvas2dCpu'
		// canvas2dCpu gives sharper blur, webgl2 is faster
		targetFps: 35,
	},
});

Установка

npm i @cloudflare/realtimekit-virtual-background

Использование

В файле TypeScript вашего компонента:

import { Component, OnInit } from "@angular/core";
import RealtimeKitClient from "@cloudflare/realtimekit";
import RealtimeKitVideoBackgroundTransformer from "@cloudflare/realtimekit-virtual-background";

@Component({
	selector: "app-meeting",
	templateUrl: "./meeting.component.html",
})
export class MeetingComponent implements OnInit {
	meeting: any;
	videoBackgroundTransformer: any;

	async ngOnInit() {
		// Initialize meeting
		this.meeting = await RealtimeKitClient.init({
			authToken: "<participant_auth_token>",
		});

		await this.meeting.join();

		// Check browser support
		if (!RealtimeKitVideoBackgroundTransformer.isSupported()) {
			console.warn("Video background not supported in this browser");
			return;
		}

		// Disable default per frame rendering
		await this.meeting.self.setVideoMiddlewareGlobalConfig({
			disablePerFrameCanvasRendering: true,
		});

		// Initialize transformer
		this.videoBackgroundTransformer =
			await RealtimeKitVideoBackgroundTransformer.init({
				meeting: this.meeting,
			});
	}

	async applyStaticBackground(imageUrl: string) {
		if (!this.videoBackgroundTransformer) return;

		this.meeting.self.addVideoMiddleware(
			await this.videoBackgroundTransformer.createStaticBackgroundVideoMiddleware(
				imageUrl,
			),
		);
	}

	async applyBlur(blurStrength: number = 50) {
		if (!this.videoBackgroundTransformer) return;

		this.meeting.self.addVideoMiddleware(
			await this.videoBackgroundTransformer.createBackgroundBlurVideoMiddleware(
				blurStrength,
			),
		);
	}

	removeBackground() {
		// Remove all video middlewares
		this.meeting.self.removeVideoMiddleware();
	}
}

В шаблоне вашего компонента:

<button
	(click)="applyStaticBackground('https://images.unsplash.com/photo-1487088678257-3a541e6e3922')"
>
	Apply Background
</button>
<button (click)="applyBlur(50)">Apply Blur</button>
<button (click)="removeBackground()">Remove Background</button>

Расширенная настройка

Для более чётких и качественных результатов передайте собственную конфигурацию сегментации:

this.videoBackgroundTransformer =
	await RealtimeKitVideoBackgroundTransformer.init({
		meeting: this.meeting,
		segmentationConfig: {
			model: "mlkit", // 'meet' | 'mlkit'
			backend: "wasmSimd",
			inputResolution: "256x256", // '256x144' for meet
			pipeline: "webgl2", // 'webgl2' | 'canvas2dCpu'
			// canvas2dCpu gives sharper blur, webgl2 is faster
			targetFps: 35,
		},
	});

Установка

Готовые фильтры можно добавить в проект, добавив следующую зависимость в build.gradle файле:

dependencies {
    // (other dependencies)
    implementation 'com.cloudflare.realtimekit:filters:0.1.0'
}

Использование

Этот пакет в настоящее время предоставляет VirtualBackgroundVideoFilter который можно использовать с FilterVideoProcessor:

// Create a virtual background filter with a custom background image.
val bgFilter = VirtualBackgroundVideoFilter(context, R.drawable.background)

// Initialize the video processor with the filter.
val processor = FilterVideoProcessor(eglBase, bgFilter)

// // Set the video processor on the meeting builder.
val meeting = RealtimeKitMeetingBuilder
  .setVideoProcessor(eglBase, processor)
  .build(activity)

Расширенная настройка

Вы также можете создавать собственные фильтры для применения эффектов, фильтров или аналитики прямо к прямому видеопотоку. Наш API VideoProcessor предоставляют гибкие и мощные способы обработки видеокадров.

Типы видеопроцессоров

Мы предоставляем три типа видеопроцессоров:

NoDropVideoProcessor: позволяет выполнять собственную обработку видео без потери кадров.
ChainVideoProcessor: объединяет несколько обработчиков кадров в цепочку, что полезно для применения нескольких эффектов или фильтров к видеопотоку.
FilterVideoProcessor: Более простой и эффективный способ применить один эффект или фильтр к видеопотоку.

Тем не менее вы можете создавать собственные видеопроцессоры, реализовав VideoProcessor интерфейс напрямую:

import realtimekit.org.webrtc.VideoFrame
import realtimekit.org.webrtc.VideoProcessor
import realtimekit.org.webrtc.VideoSink

class CustomVideoProcessor : VideoProcessor {
  override fun onCapturerStarted(started: Boolean) {}

  override fun onCapturerStopped() {}

  override fun onFrameCaptured(frame: VideoFrame?) {}

  override fun setSink(sink: VideoSink?) {}
}

Пример использования

После того как вы создали и настроили VideoProcessor, передайте его в RealtimeKitMeetingBuilder объект. Это будет обрабатывать видеокадры, снятые камерой, прежде чем они будут отправлены другим участникам или отображены локально:

// Assuming 'myCustomProcessor' is an instance of any VideoProcessor implementation
// (for example, ChainVideoProcessor, FilterVideoProcessor, and more).

val myCustomProcessor = CustomProcessor()

// Set the video processor on the meeting builder.
val meeting = RealtimeKitMeetingBuilder
  .setVideoProcessor(processor = myCustomProcessor)
  .build(activity)

// You can also pass an EglBase to the builder
// This is useful when using FilterVideoProcessor
val eglBase = EglBase.create()
val meeting = RealtimeKitMeetingBuilder
  .setVideoProcessor(eglBase = eglBase, processor = myCustomProcessor)
  .build(activity)