Enable Virtual Background not working on flutter web.

Question

Enable Virtual Background not working on flutter web.

Closed this issue 5 months ago · 7 comments

Version of the agora_rtc_engine

5.3.1

Platforms affected

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

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<void> 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<void> leaveCall() {
    _engine.leaveChannel();
    _engine.destroy();
  }

  @override
  FutureOr<bool> muteCamera() async {
    _mutedCamera = !_mutedCamera;
    await _engine.muteLocalVideoStream(_mutedCamera);
    return _mutedCamera;
  }

  @override
  FutureOr<bool> muteMic() async {
    _mutedMic = !_mutedMic;
    await _engine.muteLocalAudioStream(_mutedMic);
    return _mutedMic;
  }

  @override
  FutureOr<void> switchCamera() async {
    await _engine.switchCamera();
  }

  @override
  FutureOr<void> 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<void> 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

[Paste your logs here]

Flutter Doctor output

Doctor output

[!] 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

Answer 1 · 2024-07-09T08:34:02.000Z

It's not supported on the web.

Answer 2 · 2024-07-09T14:12:50.000Z

is the virtual background supported on 6.0.0 for the web ?

Answer 3 · 2024-07-11T08:06:40.000Z

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

Answer 4 · 2024-07-16T16:40:32.000Z

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?

Answer 5 · 2024-07-17T09:04:02.000Z

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.

Answer 6 · 2024-07-31T09:09:32.000Z

Without additional information, we are unfortunately not sure how to resolve this issue. We are therefore reluctantly going to close this bug for now. If you find this problem please file a new issue with the same description, what happens, logs and the output. All system setups can be slightly different so it's always better to open new issues and reference the related ones. Thanks for your contribution.

Answer 7 · 2024-08-07T10:00:59.000Z

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please raise a new issue.