# Video Effects SDK for Flutter (WebRTC)

> Add background effects to a Flutter Web app that uses flutter_webrtc with the effects_sdk plugin.

The Flutter plugin wraps the Web SDK for Flutter Web apps built on **flutter_webrtc**: give it a `MediaStream`, get the processed `MediaStream` back.

## Add the plugin

Load the Web SDK in `web/index.html`:

```html
<script src="https://effectssdk.ai/sdk/web/{VERSION}/tsvb-web.js"></script>
```

Add the dependency to `pubspec.yaml`:

```yaml
dependencies:
  effects_sdk:
    git:
      url: https://github.com/EffectsSDK/flutter-plugin.git
```

## Use it

```dart
const customerID = String.fromEnvironment('CUSTOMER_ID');
final effectsSDK = EffectsSDK(customerID);

effectsSDK.useStream(inputStream);
final outputStream = effectsSDK.getStream();

effectsSDK.onReady = () {
  effectsSDK.run();
  effectsSDK.setBlur(60);
};
```

Run the example with your Customer ID from the [Developer Portal](https://effectssdk.ai/cp/registration#video):

```bash
flutter run --dart-define=CUSTOMER_ID=$CUSTOMER_ID
```

## Next steps

- [Plugin API reference](/sdk/flutter-webrtc/)
- [Flutter on Android and iOS with LiveKit](/integrations/flutter)
- [Plugin repository](https://github.com/EffectsSDK/flutter-plugin)