Enable Virtual Background not working on flutter web.

[DanielaAvendano]

Version of the agora_rtc_engine

5.3.1

Platforms affected

• [ ] Android
• [ ] iOS
• [ ] macOS
• [ ] Windows
• [X] Web

Steps to reproduce

VirtualBackgroundSource does not seem to work on flutter web. No errors showed , the _blurVideo shows true when the blur button is pressed in my app , but in the browser does not work, nothing happens. Already enabled the video and in IOS or android platforms work properly.

  @override
  FutureOr<void> enableBlurVideo() async {
    _blurVideo = !blurVideo;
    final backgroundSource = VirtualBackgroundSource();
    backgroundSource.backgroundSourceType = VirtualBackgroundSourceType.Blur;
    backgroundSource.blurDegree = VirtualBackgroundBlurDegree.Medium;

    await _engine.enableVirtualBackground(
      _blurVideo,
      backgroundSource,
    );
  }

What else should I do ?

Expected results

show blur background when hit the button .

Actual results

Nothing happens.

Code sample

Code sample

```dart import 'dart:async'; import 'package:agora_rtc_engine/rtc_engine.dart'; import 'videochat_client.dart'; class AgoraVideoChatClient implements VideoChatClient { AgoraVideoChatClient({required String agoraAppId}) : _agoraAppId = agoraAppId; final String _agoraAppId; late RtcEngine _engine; late int? _speakerUid; late int? _listenerUid; bool _mutedCamera = false; bool _mutedMic = false; bool _blurVideo = false; int? get speakerUid => _speakerUid; int? get listenerUid => _listenerUid; bool get mutedMic => _mutedMic; bool get mutedCamera => _mutedCamera; bool get blurVideo => _blurVideo; late RtcEngineEventHandler _agoraEventHandler; @override FutureOr joinCall({ required String speakerUid, required String channelName, required String token, }) async { final speakerUidInt = userIdToInt(speakerUid); _speakerUid = speakerUidInt; _engine = await RtcEngine.create(_agoraAppId); await _engine.enableVideo(); await _engine.setChannelProfile(ChannelProfile.LiveBroadcasting); await _engine.setClientRole(ClientRole.Broadcaster); _agoraEventHandler = RtcEngineEventHandler( error: (code) {}, userJoined: (uid, elapsed) { if (uid == _speakerUid) { return; } else { _listenerUid = uid; } }, userOffline: (uid, elapsed) async { if (uid == _speakerUid) { await leaveCall(); } else { _listenerUid = null; } }, ); _engine.setEventHandler(_agoraEventHandler); VideoEncoderConfiguration configuration = VideoEncoderConfiguration( dimensions: const VideoDimensions(height: 1920, width: 1080), ); await _engine.setVideoEncoderConfiguration(configuration); await _engine.joinChannel( token, channelName, null, _speakerUid!, ); } @override FutureOr leaveCall() { _engine.leaveChannel(); _engine.destroy(); } @override FutureOr muteCamera() async { _mutedCamera = !_mutedCamera; await _engine.muteLocalVideoStream(_mutedCamera); return _mutedCamera; } @override FutureOr muteMic() async { _mutedMic = !_mutedMic; await _engine.muteLocalAudioStream(_mutedMic); return _mutedMic; } @override FutureOr switchCamera() async { await _engine.switchCamera(); } @override FutureOr setRtcEventHandler({ required void Function(dynamic userId) onUserJoined, required void Function(dynamic userId) onUserOfflined, required void Function(int userId, bool videoEnabled, bool videoFrozen) onVideoStateChange, required void Function( bool localVideoState, bool error, ) onLocalVideoStateChanged, }) { _agoraEventHandler = RtcEngineEventHandler( error: (code) {}, virtualBackgroundSourceEnabled: (bool enabled, VirtualBackgroundSourceStateReason reason) { print( 'virtualBackgroundSourceEnabled enabled: $enabled, reason: $reason'); }, userJoined: (uid, elapsed) { if (uid == _speakerUid) { return; } else { _listenerUid = uid; } onUserJoined(uid); }, remoteVideoStateChanged: (uid, state, reason, elapsed) { onVideoStateChange( uid, state != VideoRemoteState.Stopped, reason == VideoRemoteStateReason.SDKInBackground || reason == VideoRemoteStateReason.RemoteOffline, ); }, localVideoStateChanged: (localVideoState, error) { onLocalVideoStateChanged( localVideoState == LocalVideoStreamState.Failed, error == LocalVideoStreamError.CaptureInBackground, ); }, userOffline: (uid, elapsed) async { if (uid == _speakerUid) { await leaveCall(); } else { _listenerUid = null; } onUserOfflined(uid); }, ); _engine.setEventHandler(_agoraEventHandler); } @override int userIdToInt(String userId) { int userIdInt = int.parse(userId.replaceAll(RegExp(r'[^0-9]'), '')); if (userIdInt > 4294967295) { while (userIdInt > 4294967295) { userIdInt = (userIdInt / 10).round(); } } return userIdInt; } @override FutureOr enableBlurVideo() async { _blurVideo = !blurVideo; final backgroundSource = VirtualBackgroundSource(); backgroundSource.backgroundSourceType = VirtualBackgroundSourceType.Blur; backgroundSource.blurDegree = VirtualBackgroundBlurDegree.Medium; await _engine.enableVirtualBackground( _blurVideo, backgroundSource, ); } } ```

Screenshots or Video

Screenshots / Video demonstration

[Upload media here]

Logs

Logs

```console [Paste your logs here] ```

Flutter Doctor output

Doctor output

```console [!] Flutter (Channel unknown, 3.7.0, on macOS 14.5 23F79 darwin-arm64, locale en-US) ! Flutter version 3.7.0 on channel unknown at /Users/usuario/development/flutter Currently on an unknown channel. Run `flutter channel` to switch to an official channel. If that doesn't fix the issue, reinstall Flutter by following instructions at https://flutter.dev/docs/get-started/install. ! Unknown upstream repository. Reinstall Flutter by following instructions at https://flutter.dev/docs/get-started/install. [!] Android toolchain - develop for Android devices (Android SDK version 34.0.0) ✗ Android license status unknown. Run `flutter doctor --android-licenses` to accept the SDK licenses. See https://flutter.dev/docs/get-started/install/macos#android-setup for more details. [✓] Xcode - develop for iOS and macOS (Xcode 15.4) [✓] Chrome - develop for the web [✓] Android Studio (version 2023.2) [✓] VS Code (version 1.90.2) [✓] Connected device (4 available) [✓] HTTP Host Availability ```

[littleGnAl]

It's not supported on the web.

[DanielaAvendano]

is the virtual background supported on 6.0.0 for the web ?

[littleGnAl]

It's so sorry that it's not supported yet on 6.x on the web.

[DanielaAvendano]

I urgently need the blur feature for my web app on Flutter. Are you planning to develop it, or is it already in development? If so, when do you expect to release it?

[littleGnAl]

This feature is not planned, I think you'd better contact your sales or raise a ticket to Agora Support to raise the priority of this feature.