Skip to content
flutter_webrtc · livekit_client · Flutter Web

Flutter를 위한 가상 배경과 노이즈 캔슬링

Android, iOS, 웹의 Flutter 영상 앱에 배경 블러와 교체, 뷰티 보정, 자동 프레이밍을, Flutter Web에 AI 노이즈 캔슬링을 추가하세요. flutter_webrtc 기반의 준비된 플러그인으로 가능합니다.

구성 선택

Flutter Web + flutter_webrtc

  • Video
  • Web

effects_sdk 플러그인은 Web Video Effects SDK를 감쌉니다. flutter_webrtc의 MediaStream을 넘기면 처리된 MediaStream을 돌려받습니다.

LiveKit을 사용하는 Android, iOS, 웹

  • Video
  • Android
  • iOS
  • Web

LiveKit Flutter SDK 포크가 LocalVideoTrack에 Video Effects SDK를 추가합니다. Android와 iOS에서는 네이티브 SDK를, 웹에서는 웹 SDK를 사용합니다.

Flutter Web을 위한 노이즈 캔슬링

  • Audio
  • Web

audio_effects_sdk 플러그인은 flutter_webrtc MediaStream에서 Audio Effects SDK를 실행합니다. speed, balanced, quality 프리셋의 AI 노이즈 억제입니다.

코드

플러그인은 웹 SDK와 같은 흐름을 따릅니다. MediaStream을 넣고 onReady를 기다린 뒤 실행하고 처리된 스트림을 사용하세요. LiveKit 포크에서는 효과가 LocalVideoTrack의 메서드입니다.

  • Developer Portal에서 Customer ID 받기
  • GitHub의 플러그인을 pubspec.yaml에 추가
  • 웹에서는 index.html에서 SDK 스크립트 로드
  • 예제 실행: flutter run --dart-define=CUSTOMER_ID=…
// web/index.html: <script src="https://effectssdk.ai/sdk/web/{VERSION}/tsvb-web.js"></script>
// pubspec.yaml:   effects_sdk: { git: { url: https://github.com/EffectsSDK/flutter-plugin.git } }

final effectsSDK = EffectsSDK('YOUR_CUSTOMER_ID');
effectsSDK.useStream(cameraStream);
final outputStream = effectsSDK.getStream();

effectsSDK.onReady = () {
  effectsSDK.run();
  effectsSDK.setBlur(60);
};
// pubspec.yaml: livekit_client from github.com/EffectsSDK/livekit-client-sdk-flutter

final videoTrack = await LocalVideoTrack.createCameraTrack(
  CameraCaptureOptions(effectsSdkRequired: true),
);
await videoTrack.start();

final status = await videoTrack.auth('YOUR_CUSTOMER_ID');
if (status == AuthStatus.active) {
  await videoTrack.setPipelineMode(PipelineMode.blur);
  await videoTrack.setBlurPower(0.6);
}
// web/index.html: <script crossorigin="anonymous" src="https://effectssdk.ai/sdk/audio/dev/{VERSION}/atsvb-web.js"></script>
// pubspec.yaml:   audio_effects_sdk: { git: { url: https://github.com/EffectsSDK/audio-flutter-wrapper } }

final audioSDK = AudioEffectsSDK('YOUR_CUSTOMER_ID');
audioSDK.useStream(micStream);

audioSDK.onReady = () {
  audioSDK.run();
  final cleanStream = audioSDK.getStream();
};

자주 묻는 질문

LiveKit을 사용하시나요? LiveKit 연동을 참고하세요.

Flutter에서는 어떤 플랫폼을 지원하나요?

비디오 효과: LiveKit Flutter 포크로 Android, iOS, 웹을, flutter_webrtc 플러그인으로 웹을 지원합니다. 오디오 노이즈 캔슬링: audio_effects_sdk 플러그인으로 Flutter Web을 지원합니다.

Android나 iOS에서 LiveKit 없이 flutter_webrtc를 씁니다. 어떤 방법이 있나요?

platform channel을 통해 Android와 iOS 네이티브 SDK를 사용하세요. LiveKit 포크가 좋은 참고가 됩니다. 두 플랫폼 모두에서 네이티브 카메라 파이프라인을 Flutter에 연결합니다. 구성을 알려 주시면 도와드리겠습니다.

Flutter 모바일 앱에 노이즈 캔슬링을 추가하려면?

Flutter 오디오 플러그인은 현재 웹을 대상으로 합니다. Android와 iOS에서는 platform channel을 통해 네이티브 Audio Effects SDK(Maven ai.effectssdk:audio, Swift Package AudioEffectsSDK)를 호출하세요.

어떤 효과를 사용할 수 있나요?

웹 플러그인에서는 배경 블러와 교체, 뷰티 보정, 자동 프레이밍, 색 보정, 레이아웃, 하단 자막, 오버레이를 사용할 수 있고, LiveKit 포크는 모바일에서 네이티브 파이프라인 모드를 제공합니다.

Flutter로 개발하시나요?

사용하는 플랫폼과 영상·음성 캡처 방식을 알려 주세요. 통합을 도와드립니다.

시작할 준비가 되셨나요? Developer Portal을 열고 무료 체험을 시작하세요.

reCAPTCHA로 보호됩니다. 개인정보 처리방침을 확인하세요.