INTEGRITY Dokumentace

← Cloudflare Realtime / realtime / realtimekit / core

Efekty videa

Pomocí Core SDK přidejte do video přenosů účastníků ve schůzkách RealtimeKit efekty pozadí videa a rozostření.

Instalace

npm i @cloudflare/realtimekit-virtual-background

Použití

1. Vypněte výchozí vykreslování po jednotlivých snímcích

Vypněte výchozí vykreslování videa po jednotlivých snímcích ve middlewaru, aby si toto řízení převzal middleware sám a zlepšila se tak rychlost a kvalita:

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

2. Inicializujte transformer

Vytvoření objektu transformátoru pozadí videa:

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

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

3. Použijte efekty pozadí

videoBackgroundTransformer zpřístupňuje dva typy middlewaru:

Statický obrázek pozadí

Použijte createStaticBackgroundVideoMiddleware a nastavit tak obrázek jako pozadí:

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

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

Rozmazání pozadí

Použijte createBackgroundBlurVideoMiddleware a rozostříte tak pozadí. Předejte blurStrength (0 až 100) jako parametr (výchozí hodnota 50 %):

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

Podpora prohlížečů

Před inicializací zkontrolujte podporu prohlížeče:

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

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

Pokročilá konfigurace

Pro lepší a ostřejší výsledky předejte vlastní konfiguraci segmentace:

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

Instalace

npm i @cloudflare/realtimekit-virtual-background

Použití

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

Pokročilá konfigurace

Pro lepší a ostřejší výsledky předejte vlastní konfiguraci segmentace:

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

Instalace

npm i @cloudflare/realtimekit-virtual-background

Použití

V souboru TypeScript vaší komponenty:

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

V šabloně vaší komponenty:

<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>

Pokročilá konfigurace

Pro lepší a ostřejší výsledky předejte vlastní konfiguraci segmentace:

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

Instalace

Předpřipravené filtry do svého projektu přidáte tak, že přidáte následující závislost do svého build.gradle soubor:

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

Použití

Tento balíček v současné době poskytuje VirtualBackgroundVideoFilter kterou lze použít s 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)

Pokročilá konfigurace

Můžete si také vytvořit vlastní filtry a aplikovat efekty, filtry nebo analytiku přímo na živý video stream. Náš Rozhraní VideoProcessor API poskytují flexibilní a výkonné způsoby, jak upravovat videosnímky.

Typy procesorů videa

Nabízíme tři typy video procesorů:

Přesto si můžete vytvořit vlastní video procesory tím, že implementujete VideoProcessor rozhraní přímo:

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?) {}
}

Příklad použití

Jakmile vytvoříte a nakonfigurujete svůj VideoProcessor, předejte jej RealtimeKitMeetingBuilder. Tím se zpracují snímky videa zachycené fotoaparátem ještě předtím, než jsou odeslány ostatním účastníkům nebo vykresleny lokálně:

// 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)