작동 방식
-
1
트랙 감싸기
영상: 카메라 트랙에 Effects SDK TrackProcessor를 설정합니다. 음성: 마이크를 Audio Effects SDK에 통과시킵니다.
-
2
기기에서 처리
SDK가 브라우저나 앱에서 프레임을 세그멘테이션하고 개선하거나 오디오를 정리합니다. 웹에서는 WebGPU, WebGL, WebAssembly를 사용합니다.
-
3
평소처럼 게시
LiveKit이 처리된 트랙을 게시합니다. 사람이든 에이전트든 모든 구독자가 결과를 받습니다.
코드
LiveKit의 track processor는 로컬 트랙을 수정하는 표준 방식입니다. 샘플은 Web Video Effects SDK를 기반으로 이를 구현하며, Flutter 포크는 Android, iOS, 웹의 LocalVideoTrack에 같은 효과를 추가합니다.
- 영상: 블러, 이미지·영상 배경, 뷰티 보정, 자동 프레이밍, 색 보정, 하단 자막
- 음성: 노이즈 억제와 실내 에코 제거, speed / balanced / quality 프리셋
- 다시 게시하지 않고 통화 중 효과 변경
import { Track, TrackProcessor, VideoProcessorOptions } from 'livekit-client';
import { tsvb } from 'effects-sdk';
export class EffectsVideoProcessor implements TrackProcessor<Track.Kind.Video, VideoProcessorOptions> {
name = 'effects-sdk';
processedTrack?: MediaStreamTrack;
sdk = new tsvb('YOUR_CUSTOMER_ID');
constructor() {
this.sdk.config({ provider: 'webgpu' });
this.sdk.preload();
}
async init(opts: VideoProcessorOptions) {
this.sdk.clear();
this.sdk.useStream(new MediaStream([opts.track]));
this.processedTrack = this.sdk.getStream()?.getVideoTracks()[0];
await new Promise((ready) => (this.sdk.onReady = ready));
this.sdk.run();
}
async restart(opts: VideoProcessorOptions) {
await this.init(opts);
}
async destroy() {
this.sdk.stop();
this.sdk.clear();
this.processedTrack = undefined;
}
}
import { createLocalVideoTrack } from 'livekit-client';
const processor = new EffectsVideoProcessor();
const cameraTrack = await createLocalVideoTrack();
await cameraTrack.setProcessor(processor);
await room.localParticipant.publishTrack(cameraTrack);
// Change effects at any time, without republishing
processor.sdk.setBlur(0.6);
processor.sdk.setBackground('https://example.com/office.jpg');
import { atsvb } from 'audio-effects-sdk';
const sdk = new atsvb('YOUR_CUSTOMER_ID');
sdk.config({ preset: 'speed', sample_rate: 16000 });
sdk.preload();
const mic = await navigator.mediaDevices.getUserMedia({ audio: true });
sdk.useStream(mic);
sdk.onReady = async () => {
sdk.run();
const cleanTrack = sdk.getStream().getAudioTracks()[0];
// Publish the processed track instead of the raw microphone
await room.localParticipant.publishTrack(cleanTrack);
};
// pubspec.yaml: livekit_client from github.com/EffectsSDK/livekit-client-sdk-flutter
// Web only: load tsvb-web.js in index.html and call this first
VideoEffectsSDKExt.initialize('YOUR_CUSTOMER_ID');
final videoTrack = await LocalVideoTrack.createCameraTrack(
CameraCaptureOptions(effectsSdkRequired: true),
);
await videoTrack.start();
// Android and iOS: authorize the track
final status = await videoTrack.auth('YOUR_CUSTOMER_ID');
if (status == AuthStatus.active) {
await videoTrack.setPipelineMode(PipelineMode.blur);
await videoTrack.setBlurPower(0.6);
}
자주 묻는 질문
Flutter로 개발하시나요? Flutter 연동을 참고하세요.
LiveKit Cloud와 자체 호스팅 LiveKit에서 동작하나요?
네. 효과는 트랙이 게시되기 전에 참석자의 기기에서 적용되므로, LiveKit Cloud든 자체 서버든 서버는 이미 처리된 트랙을 받습니다. 서버 측에서 바뀌는 것은 없습니다.
LiveKit 내장 노이즈 필터와 무엇이 다른가요?
Effects SDK는 웹, iOS, Android, 데스크톱에서 최종 사용자 기기 안에서만 실행되고, 어떤 LiveKit 배포 환경에서도 동작하며, 같은 SDK 제품군으로 비디오 효과도 제공합니다. 사용자의 하드웨어에 맞는 프리셋(speed, balanced, quality)을 고르세요.
통화 중에 효과를 바꿀 수 있나요?
네. 블러, 배경, 뷰티 보정, 프레이밍 등의 효과는 트랙을 다시 만들거나 게시하지 않고 언제든 전환할 수 있습니다.
LiveKit 음성 에이전트에서도 동작하나요?
네. 게시하기 전에 Audio Effects SDK로 사용자의 마이크를 정리하면, 에이전트는 배경 소음과 실내 에코가 없는 오디오를 받습니다. AI 음성 에이전트를 위한 노이즈 캔슬링을 참고하세요.
어떤 LiveKit SDK를 지원하나요?
웹용 livekit-client(JavaScript/TypeScript)는 TrackProcessor로, Android, iOS, 웹의 LiveKit Flutter는 당사의 Flutter SDK 포크로 지원합니다.
LiveKit과 통합하시나요?
웹, Flutter, 에이전트 등 LiveKit 구성을 알려 주세요. 통합을 도와드립니다.
시작할 준비가 되셨나요? Developer Portal을 열고 무료 체험을 시작하세요.