From 2e0c97732e4fbae24ec54010ae5c683f333f2e35 Mon Sep 17 00:00:00 2001 From: littleGnAl Date: Mon, 22 Apr 2024 16:55:28 +0800 Subject: [PATCH 1/9] fix: AgoraVideoView takes over the whole APP window --- .github/workflows/build.yml | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index 629626ecb..6888142a5 100644 --- a/.github/workflows/build.yml +++ b/.github/workflows/build.yml @@ -564,9 +564,7 @@ jobs: if: ${{ !contains(github.event.pull_request.labels.*.name, 'ci:skip') }} strategy: matrix: - # TODO(littlegnal): Temporily pin the Flutter SDK version to 3.16, since the rendering on web not work correct after 3.16, - # see https://github.com/AgoraIO-Extensions/Agora-Flutter-SDK/actions/runs/7958003510/job/21721962323?pr=1572 - version: ['3.16'] + version: ['3.x'] runs-on: ubuntu-latest timeout-minutes: 60 env: From 4b7ae181b861cd72aadcbd7ff244cb7936931f1d Mon Sep 17 00:00:00 2001 From: littleGnAl Date: Mon, 22 Apr 2024 17:34:06 +0800 Subject: [PATCH 2/9] fix: AgoraVideoView takes over the whole browser window --- lib/src/impl/agora_rtc_renderer.dart | 10 ++++++++++ .../web/global_video_view_controller_platform_web.dart | 5 ++++- 2 files changed, 14 insertions(+), 1 deletion(-) diff --git a/lib/src/impl/agora_rtc_renderer.dart b/lib/src/impl/agora_rtc_renderer.dart index 7351d19fd..18a325456 100644 --- a/lib/src/impl/agora_rtc_renderer.dart +++ b/lib/src/impl/agora_rtc_renderer.dart @@ -88,6 +88,16 @@ mixin RtcRenderMixin on State { onPlatformViewCreated, ), ); +// return HtmlElementView.fromTagName( +// tagName: 'div', +// onElementCreated: (element) { +// (element as html.DivElement) +// ..id = 'myOtherDivId' +// ..style.width = '100px' +// ..style.height = '100px' +// ..style.backgroundColor = 'red'; +// }, +// ); } if (defaultTargetPlatform == TargetPlatform.android) { diff --git a/lib/src/impl/platform/web/global_video_view_controller_platform_web.dart b/lib/src/impl/platform/web/global_video_view_controller_platform_web.dart index e9c92eb10..55ff0d8f2 100644 --- a/lib/src/impl/platform/web/global_video_view_controller_platform_web.dart +++ b/lib/src/impl/platform/web/global_video_view_controller_platform_web.dart @@ -48,7 +48,10 @@ class GlobalVideoViewControllerWeb extends GlobalVideoViewControllerPlatfrom { // The `viewHandle` is the platform view id on web final viewId = viewHandle as int; - final div = _viewMap[viewId]!; + // final div = _viewMap[viewId]!; + // ignore: undefined_prefixed_name + final div = ui.platformViewRegistry.getViewById(viewId) + as DivElement; await super.setupVideoView(div.id, videoCanvas, connection: connection); } From 7e01ff1c7871ad67c61155ff5c104be8eaf07c39 Mon Sep 17 00:00:00 2001 From: littleGnAl Date: Mon, 22 Apr 2024 19:23:17 +0800 Subject: [PATCH 3/9] fix: AgoraVideoView takes over the whole browser window --- lib/src/impl/agora_rtc_renderer.dart | 34 +++++++++---------- ...al_video_view_controller_platform_web.dart | 3 ++ 2 files changed, 20 insertions(+), 17 deletions(-) diff --git a/lib/src/impl/agora_rtc_renderer.dart b/lib/src/impl/agora_rtc_renderer.dart index 18a325456..d764adf9e 100644 --- a/lib/src/impl/agora_rtc_renderer.dart +++ b/lib/src/impl/agora_rtc_renderer.dart @@ -81,23 +81,23 @@ mixin RtcRenderMixin on State { // `kIsWeb` check needs put first, since `defaultTargetPlatform == TargetPlatform.android` or // `defaultTargetPlatform == TargetPlatform.iOS` is true in mobile web. if (kIsWeb) { - return HtmlElementView( - viewType: viewType, - onPlatformViewCreated: _onPlatformViewCreated( - viewType, - onPlatformViewCreated, - ), - ); -// return HtmlElementView.fromTagName( -// tagName: 'div', -// onElementCreated: (element) { -// (element as html.DivElement) -// ..id = 'myOtherDivId' -// ..style.width = '100px' -// ..style.height = '100px' -// ..style.backgroundColor = 'red'; -// }, -// ); + // return HtmlElementView( + // viewType: viewType, + // onPlatformViewCreated: _onPlatformViewCreated( + // viewType, + // onPlatformViewCreated, + // ), + // ); + return HtmlElementView.fromTagName( + tagName: 'div', + onElementCreated: (element) { + (element as html.DivElement) + ..id = 'myOtherDivId' + ..style.width = '100px' + ..style.height = '100px' + ..style.backgroundColor = 'red'; + }, +); } if (defaultTargetPlatform == TargetPlatform.android) { diff --git a/lib/src/impl/platform/web/global_video_view_controller_platform_web.dart b/lib/src/impl/platform/web/global_video_view_controller_platform_web.dart index 55ff0d8f2..194511378 100644 --- a/lib/src/impl/platform/web/global_video_view_controller_platform_web.dart +++ b/lib/src/impl/platform/web/global_video_view_controller_platform_web.dart @@ -31,6 +31,7 @@ class GlobalVideoViewControllerWeb extends GlobalVideoViewControllerPlatfrom { ..style.height = '100%'; _viewMap[viewId] = div; + print('registerViewFactory'); return div; }); @@ -53,6 +54,8 @@ class GlobalVideoViewControllerWeb extends GlobalVideoViewControllerPlatfrom { final div = ui.platformViewRegistry.getViewById(viewId) as DivElement; + print('setupVideoView'); + await super.setupVideoView(div.id, videoCanvas, connection: connection); } } From 87052e96d4a1f778d82ef9cec1400fd7cbe23e32 Mon Sep 17 00:00:00 2001 From: littleGnAl Date: Mon, 22 Apr 2024 19:53:46 +0800 Subject: [PATCH 4/9] fix: AgoraVideoView takes over the whole browser window --- lib/src/impl/agora_rtc_renderer.dart | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/lib/src/impl/agora_rtc_renderer.dart b/lib/src/impl/agora_rtc_renderer.dart index d764adf9e..df0a97232 100644 --- a/lib/src/impl/agora_rtc_renderer.dart +++ b/lib/src/impl/agora_rtc_renderer.dart @@ -91,11 +91,12 @@ mixin RtcRenderMixin on State { return HtmlElementView.fromTagName( tagName: 'div', onElementCreated: (element) { - (element as html.DivElement) - ..id = 'myOtherDivId' - ..style.width = '100px' - ..style.height = '100px' - ..style.backgroundColor = 'red'; + // (element as html.DivElement) + // ..id = 'myOtherDivId' + // ..style.width = '100px' + // ..style.height = '100px' + // ..style.backgroundColor = 'red'; + print('HtmlElementView.fromTagName'); }, ); } From 4d8576e9b2f767d08501d81c96157bdb7cf6dc73 Mon Sep 17 00:00:00 2001 From: littleGnAl Date: Mon, 22 Apr 2024 20:00:03 +0800 Subject: [PATCH 5/9] fix: AgoraVideoView takes over the whole browser window --- lib/src/impl/agora_rtc_renderer.dart | 36 ++++++++++++++-------------- 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/lib/src/impl/agora_rtc_renderer.dart b/lib/src/impl/agora_rtc_renderer.dart index df0a97232..eb607489c 100644 --- a/lib/src/impl/agora_rtc_renderer.dart +++ b/lib/src/impl/agora_rtc_renderer.dart @@ -81,24 +81,24 @@ mixin RtcRenderMixin on State { // `kIsWeb` check needs put first, since `defaultTargetPlatform == TargetPlatform.android` or // `defaultTargetPlatform == TargetPlatform.iOS` is true in mobile web. if (kIsWeb) { - // return HtmlElementView( - // viewType: viewType, - // onPlatformViewCreated: _onPlatformViewCreated( - // viewType, - // onPlatformViewCreated, - // ), - // ); - return HtmlElementView.fromTagName( - tagName: 'div', - onElementCreated: (element) { - // (element as html.DivElement) - // ..id = 'myOtherDivId' - // ..style.width = '100px' - // ..style.height = '100px' - // ..style.backgroundColor = 'red'; - print('HtmlElementView.fromTagName'); - }, -); + return HtmlElementView( + viewType: viewType, + onPlatformViewCreated: _onPlatformViewCreated( + viewType, + onPlatformViewCreated, + ), + ); +// return HtmlElementView.fromTagName( +// tagName: 'div', +// onElementCreated: (element) { +// // (element as html.DivElement) +// // ..id = 'myOtherDivId' +// // ..style.width = '100px' +// // ..style.height = '100px' +// // ..style.backgroundColor = 'red'; +// print('HtmlElementView.fromTagName'); +// }, +// ); } if (defaultTargetPlatform == TargetPlatform.android) { From d8923ef731fe2f01de95b835351216fffa979c19 Mon Sep 17 00:00:00 2001 From: littleGnAl Date: Mon, 22 Apr 2024 20:31:37 +0800 Subject: [PATCH 6/9] fix: AgoraVideoView takes over the whole browser window --- ...al_video_view_controller_platform_web.dart | 66 +++++++++++++++---- 1 file changed, 52 insertions(+), 14 deletions(-) diff --git a/lib/src/impl/platform/web/global_video_view_controller_platform_web.dart b/lib/src/impl/platform/web/global_video_view_controller_platform_web.dart index 194511378..f6c891678 100644 --- a/lib/src/impl/platform/web/global_video_view_controller_platform_web.dart +++ b/lib/src/impl/platform/web/global_video_view_controller_platform_web.dart @@ -1,6 +1,5 @@ import 'dart:async'; -// ignore: avoid_web_libraries_in_flutter -import 'dart:html'; +import 'dart:html' as html; import 'dart:ui' as ui; import 'package:agora_rtc_engine/agora_rtc_engine.dart'; @@ -15,8 +14,36 @@ String _getViewType(int id) { return 'agora_rtc_engine/${_platformRendererViewType}_$id'; } +class _View { + _View(this._platformViewId) + : _div = html.DivElement() + ..id = _getViewType(_platformViewId) + ..style.width = '100%' + ..style.height = '100%' { + // this._div = html.DivElement() + // ..id = _getViewType(platformViewId) + // ..style.width = '100%' + // ..style.height = '100%'; + + final observer = html.IntersectionObserver((entries, observer) { + observer.unobserve(_div); + _viewCompleter.complete(_div); + }); + observer.observe(_div); + } + final int _platformViewId; + final html.DivElement _div; + final _viewCompleter = Completer(); + Future getHandle() async { + final div = await _viewCompleter.future; + return div.id; + } +} + // TODO(littlegnal): Need handle remove view logic on web -final Map _viewMap = {}; +// final Map _viewMap = {}; + +final Map _viewMap = {}; class GlobalVideoViewControllerWeb extends GlobalVideoViewControllerPlatfrom { GlobalVideoViewControllerWeb( @@ -25,15 +52,23 @@ class GlobalVideoViewControllerWeb extends GlobalVideoViewControllerPlatfrom { // ignore: undefined_prefixed_name ui.platformViewRegistry.registerViewFactory(_platformRendererViewType, (int viewId) { - final div = DivElement() - ..id = _getViewType(viewId) - ..style.width = '100%' - ..style.height = '100%'; + // final div = html.DivElement() + // ..id = _getViewType(viewId) + // ..style.width = '100%' + // ..style.height = '100%'; + + final view = _View(viewId); - _viewMap[viewId] = div; + // _viewMap[viewId] = div; + _viewMap[viewId] = view; print('registerViewFactory'); - return div; + // final observer = html.IntersectionObserver((entries, observer) { + // observer.unobserve(div); + // }); + // observer.observe(div); + + return view._div; }); } @@ -49,13 +84,16 @@ class GlobalVideoViewControllerWeb extends GlobalVideoViewControllerPlatfrom { // The `viewHandle` is the platform view id on web final viewId = viewHandle as int; - // final div = _viewMap[viewId]!; + final div = _viewMap[viewId]!; // ignore: undefined_prefixed_name - final div = ui.platformViewRegistry.getViewById(viewId) - as DivElement; + // final div = ui.platformViewRegistry.getViewById(viewId) as html.DivElement; + + // context.callMethod(); - print('setupVideoView'); + print('setupVideoView'); + final divId = await div.getHandle(); - await super.setupVideoView(div.id, videoCanvas, connection: connection); + // await super.setupVideoView(div.id, videoCanvas, connection: connection); + await super.setupVideoView(divId, videoCanvas, connection: connection); } } From ee12f6f27cf7e963aab4266f8c9a53094c4b1fa2 Mon Sep 17 00:00:00 2001 From: littleGnAl Date: Mon, 22 Apr 2024 21:42:04 +0800 Subject: [PATCH 7/9] fix: AgoraVideoView takes over the whole browser window --- .../global_video_view_controller_platform_web.dart | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/lib/src/impl/platform/web/global_video_view_controller_platform_web.dart b/lib/src/impl/platform/web/global_video_view_controller_platform_web.dart index f6c891678..20d05c842 100644 --- a/lib/src/impl/platform/web/global_video_view_controller_platform_web.dart +++ b/lib/src/impl/platform/web/global_video_view_controller_platform_web.dart @@ -26,8 +26,12 @@ class _View { // ..style.height = '100%'; final observer = html.IntersectionObserver((entries, observer) { - observer.unobserve(_div); - _viewCompleter.complete(_div); + print( + '_platformViewId: ${_platformViewId}, entries: ${entries.toString()}, _div.isConnected: ${_div.isConnected}'); + if (_div.isConnected == true) { + observer.unobserve(_div); + _viewCompleter.complete(_div); + } }); observer.observe(_div); } @@ -57,7 +61,7 @@ class GlobalVideoViewControllerWeb extends GlobalVideoViewControllerPlatfrom { // ..style.width = '100%' // ..style.height = '100%'; - final view = _View(viewId); + final view = _View(viewId); // _viewMap[viewId] = div; _viewMap[viewId] = view; @@ -92,6 +96,7 @@ class GlobalVideoViewControllerWeb extends GlobalVideoViewControllerPlatfrom { print('setupVideoView'); final divId = await div.getHandle(); + print('divId: $divId'); // await super.setupVideoView(div.id, videoCanvas, connection: connection); await super.setupVideoView(divId, videoCanvas, connection: connection); From 7ca320780dd0ae4ceb455346ea3ec57e9c28a394 Mon Sep 17 00:00:00 2001 From: littleGnAl Date: Mon, 22 Apr 2024 21:54:13 +0800 Subject: [PATCH 8/9] fix: AgoraVideoView takes over the whole browser window --- lib/src/impl/agora_rtc_renderer.dart | 11 ---- ...al_video_view_controller_platform_web.dart | 58 +++++-------------- 2 files changed, 15 insertions(+), 54 deletions(-) diff --git a/lib/src/impl/agora_rtc_renderer.dart b/lib/src/impl/agora_rtc_renderer.dart index eb607489c..7351d19fd 100644 --- a/lib/src/impl/agora_rtc_renderer.dart +++ b/lib/src/impl/agora_rtc_renderer.dart @@ -88,17 +88,6 @@ mixin RtcRenderMixin on State { onPlatformViewCreated, ), ); -// return HtmlElementView.fromTagName( -// tagName: 'div', -// onElementCreated: (element) { -// // (element as html.DivElement) -// // ..id = 'myOtherDivId' -// // ..style.width = '100px' -// // ..style.height = '100px' -// // ..style.backgroundColor = 'red'; -// print('HtmlElementView.fromTagName'); -// }, -// ); } if (defaultTargetPlatform == TargetPlatform.android) { diff --git a/lib/src/impl/platform/web/global_video_view_controller_platform_web.dart b/lib/src/impl/platform/web/global_video_view_controller_platform_web.dart index 20d05c842..0f2fce87a 100644 --- a/lib/src/impl/platform/web/global_video_view_controller_platform_web.dart +++ b/lib/src/impl/platform/web/global_video_view_controller_platform_web.dart @@ -15,38 +15,32 @@ String _getViewType(int id) { } class _View { - _View(this._platformViewId) - : _div = html.DivElement() - ..id = _getViewType(_platformViewId) + _View(int platformViewId) + : _element = html.DivElement() + ..id = _getViewType(platformViewId) ..style.width = '100%' ..style.height = '100%' { - // this._div = html.DivElement() - // ..id = _getViewType(platformViewId) - // ..style.width = '100%' - // ..style.height = '100%'; - final observer = html.IntersectionObserver((entries, observer) { - print( - '_platformViewId: ${_platformViewId}, entries: ${entries.toString()}, _div.isConnected: ${_div.isConnected}'); - if (_div.isConnected == true) { - observer.unobserve(_div); - _viewCompleter.complete(_div); + if (_element.isConnected == true) { + observer.unobserve(_element); + _viewCompleter.complete(_element); } }); - observer.observe(_div); + observer.observe(_element); } - final int _platformViewId; - final html.DivElement _div; + + final html.HtmlElement _element; + html.HtmlElement get element => _element; + final _viewCompleter = Completer(); - Future getHandle() async { + + Future waitAndGetId() async { final div = await _viewCompleter.future; return div.id; } } // TODO(littlegnal): Need handle remove view logic on web -// final Map _viewMap = {}; - final Map _viewMap = {}; class GlobalVideoViewControllerWeb extends GlobalVideoViewControllerPlatfrom { @@ -56,23 +50,9 @@ class GlobalVideoViewControllerWeb extends GlobalVideoViewControllerPlatfrom { // ignore: undefined_prefixed_name ui.platformViewRegistry.registerViewFactory(_platformRendererViewType, (int viewId) { - // final div = html.DivElement() - // ..id = _getViewType(viewId) - // ..style.width = '100%' - // ..style.height = '100%'; - final view = _View(viewId); - - // _viewMap[viewId] = div; _viewMap[viewId] = view; - print('registerViewFactory'); - - // final observer = html.IntersectionObserver((entries, observer) { - // observer.unobserve(div); - // }); - // observer.observe(div); - - return view._div; + return view.element; }); } @@ -89,16 +69,8 @@ class GlobalVideoViewControllerWeb extends GlobalVideoViewControllerPlatfrom { final viewId = viewHandle as int; final div = _viewMap[viewId]!; - // ignore: undefined_prefixed_name - // final div = ui.platformViewRegistry.getViewById(viewId) as html.DivElement; - - // context.callMethod(); - - print('setupVideoView'); - final divId = await div.getHandle(); - print('divId: $divId'); + final divId = await div.waitAndGetId(); - // await super.setupVideoView(div.id, videoCanvas, connection: connection); await super.setupVideoView(divId, videoCanvas, connection: connection); } } From 404fc8bca211458b7d658fe219dde4ee6be78a54 Mon Sep 17 00:00:00 2001 From: littleGnAl Date: Mon, 22 Apr 2024 22:04:24 +0800 Subject: [PATCH 9/9] fix: AgoraVideoView takes over the whole browser window --- .../platform/web/global_video_view_controller_platform_web.dart | 2 ++ 1 file changed, 2 insertions(+) diff --git a/lib/src/impl/platform/web/global_video_view_controller_platform_web.dart b/lib/src/impl/platform/web/global_video_view_controller_platform_web.dart index 0f2fce87a..73a564ac6 100644 --- a/lib/src/impl/platform/web/global_video_view_controller_platform_web.dart +++ b/lib/src/impl/platform/web/global_video_view_controller_platform_web.dart @@ -20,6 +20,8 @@ class _View { ..id = _getViewType(platformViewId) ..style.width = '100%' ..style.height = '100%' { + // Wait until the element is injected into the DOM, + // see https://github.com/flutter/flutter/issues/143922#issuecomment-1960133128 final observer = html.IntersectionObserver((entries, observer) { if (_element.isConnected == true) { observer.unobserve(_element);