[web] web changes

.github/workflows/build.yml

@@ -409,3 +409,33 @@ jobs:
         shell: bash
         run: |
           bash ci/rendering_test_windows.sh
+
+  rendering_test_web:
+    name: Run Flutter Web Rendering Tests
+    if: ${{ !contains(github.event.pull_request.labels.*.name, 'ci:skip') }}
+    strategy:
+      matrix:
+        version: ['3.13.7']
+    runs-on: ubuntu-latest
+    timeout-minutes: 60
+    env:
+      TEST_APP_ID: ${{ secrets.MY_APP_ID }}
+    steps:
+      - uses: actions/checkout@v3
+      - uses: subosito/flutter-action@v2
+        with:
+          flutter-version: ${{ matrix.version }}
+          cache: true
+      - name: Run web rendering test
+        shell: bash
+        run: |
+          export SAVE_DEBUG_GOLDEN="true"
+
+          chromedriver --port=4444 --trace-buffer-size=100000 &
+          bash ci/run_rendering_test.sh web
+
+      - uses: actions/upload-artifact@v3
+        if: failure()
+        with:
+          name: debug-golden-files
+          path: test_shard/rendering_test/screenshot/*.debug.png

ci/run_rendering_test.sh

@@ -0,0 +1,47 @@
+#!/usr/bin/env bash
+
+set -e
+set -x
+
+MY_PATH=$(dirname "$0")
+PLATFORM=$1 # android/ios/macos/windows/web
+
+pushd ${MY_PATH}/../test_shard/rendering_test
+
+flutter packages get
+
+if [[ ${PLATFORM} == "web" ]];then
+    echo "Run rendering test on web"
+
+    flutter drive \
+        --verbose-system-logs \
+        -d web-server \
+        --driver=test_driver/integration_test.dart \
+        --target=integration_test/agora_video_view_smoke_test.dart \
+        --dart-define=TEST_APP_ID="${TEST_APP_ID}"
+
+elif [[ ${PLATFORM} == "android" || ${PLATFORM} == "ios" ]];then
+    echo "Run rendering test on ${PLATFORM}"
+
+    flutter drive \
+        --driver=test_driver/integration_test.dart \
+        --target=integration_test/agora_video_view_render_test.dart \
+        --dart-define=TEST_APP_ID="${TEST_APP_ID}"
+
+    flutter drive \
+        --driver=test_driver/integration_test.dart \
+        --target=integration_test/agora_video_view_smoke_test.dart \
+        --dart-define=TEST_APP_ID="${TEST_APP_ID}"
+
+else
+    echo "Run rendering test on ${PLATFORM}"
+
+    # macos/windows
+    flutter test \
+        integration_test/agora_video_view_render_test.dart \
+        --dart-define=TEST_APP_ID="${TEST_APP_ID}" \
+        -d macos
+
+fi
+
+popd

example/lib/examples/advanced/push_video_frame/push_video_frame.dart

@@ -1,10 +1,12 @@
+import 'dart:async';
 import 'dart:typed_data';
-import 'dart:ui';
+import 'dart:ui' as ui;
 
 import 'package:agora_rtc_engine/agora_rtc_engine.dart';
 import 'package:agora_rtc_engine_example/config/agora.config.dart' as config;
 import 'package:agora_rtc_engine_example/components/example_actions_widget.dart';
 import 'package:agora_rtc_engine_example/components/log_sink.dart';
+import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 
@@ -99,6 +101,8 @@ class _State extends State<PushVideoFrame> {
 
     await _loadImageByteData();
 
+    await _engine.startPreview(sourceType: VideoSourceType.videoSourceCustom);
+
     setState(() {
       _isReadyPreview = true;
     });
@@ -125,21 +129,29 @@ class _State extends State<PushVideoFrame> {
     Uint8List bytes =
         data.buffer.asUint8List(data.offsetInBytes, data.lengthInBytes);
 
-    final image = await decodeImageFromList(bytes);
+    ui.Image image = await decodeImageFromList(bytes);
 
     final byteData =
-        await image.toByteData(format: ImageByteFormat.rawStraightRgba);
+        await image.toByteData(format: ui.ImageByteFormat.rawStraightRgba);
+
     _imageByteData = byteData!.buffer.asUint8List();
     _imageWidth = image.width;
     _imageHeight = image.height;
     image.dispose();
   }
 
   Future<void> _pushVideoFrame() async {
+    VideoPixelFormat format = VideoPixelFormat.videoPixelRgba;
+    if (kIsWeb) {
+      // TODO(littlegnal): https://github.com/flutter/flutter/issues/135409
+      // The `Image.toByteData(format: ui.ImageByteFormat.rawStraightRgba)` return
+      // bgra at this time.
+      format = VideoPixelFormat.videoPixelBgra;
+    }
     await _engine.getMediaEngine().pushVideoFrame(
         frame: ExternalVideoFrame(
             type: VideoBufferType.videoBufferRawData,
-            format: VideoPixelFormat.videoPixelRgba,
+            format: format,
             buffer: _imageByteData,
             stride: _imageWidth,
             height: _imageHeight,
@@ -151,8 +163,14 @@ class _State extends State<PushVideoFrame> {
     return ExampleActionsWidget(
       displayContentBuilder: (context, isLayoutHorizontal) {
         if (!_isReadyPreview) return Container();
-        return const Center(
-          child: Text('No Preview'),
+        return AgoraVideoView(
+          controller: VideoViewController(
+            rtcEngine: _engine,
+            canvas: const VideoCanvas(
+              uid: 0,
+              sourceType: VideoSourceType.videoSourceCustom,
+            ),
+          ),
         );
       },
       actionsBuilder: (context, isLayoutHorizontal) {

lib/src/agora_rtc_engine_ext.dart

@@ -15,9 +15,7 @@ extension RtcEngineExt on RtcEngine {
   /// The actual path of the Asset.
   Future<String?> getAssetAbsolutePath(String assetPath) async {
     final impl = this as RtcEngineImpl;
-    final p = await impl.engineMethodChannel
-        .invokeMethod<String>('getAssetAbsolutePath', assetPath);
-    return p;
+    return impl.getAssetAbsolutePath(assetPath);
   }
 }
 

lib/src/impl/agora_rtc_engine_impl.dart

@@ -373,7 +373,7 @@ class RtcEngineImpl extends rtc_engine_ex_binding.RtcEngineExImpl
     _initializingCompleter = Completer<void>();
     engineMethodChannel = const MethodChannel('agora_rtc_ng');
 
-    if (defaultTargetPlatform == TargetPlatform.android) {
+    if (!kIsWeb && defaultTargetPlatform == TargetPlatform.android) {
       await engineMethodChannel.invokeMethod('androidInit');
     }
 
@@ -1152,6 +1152,17 @@ class RtcEngineImpl extends rtc_engine_ex_binding.RtcEngineExImpl
     }
   }
 
+  Future<String?> getAssetAbsolutePath(String assetPath) async {
+    if (kIsWeb) {
+      // The assets are located in the `assets` directory.
+      return 'assets/$assetPath';
+    }
+
+    final p = await engineMethodChannel.invokeMethod<String>(
+        'getAssetAbsolutePath', assetPath);
+    return p;
+  }
+
   /////////// debug ////////
 
   /// [type] see [VideoSourceType], only [VideoSourceType.videoSourceCamera], [VideoSourceType.videoSourceRemote] supported

lib/src/impl/platform/web/js_iris_api_engine_binding_delegate.dart

@@ -46,8 +46,15 @@ class IrisApiEngineBindingsDelegateJS
     List<Object> buffer = [];
     List<int> lenOfBuffer = [];
     int bufferCount = 0;
+    if (methodCall.buffers != null) {
+      bufferCount += methodCall.buffers!.length;
+      for (final rb in methodCall.buffers!) {
+        buffer.add(rb);
+        lenOfBuffer.add(rb.length);
+      }
+    }
     if (methodCall.rawBufferParams != null) {
-      bufferCount = methodCall.rawBufferParams!.length;
+      bufferCount += methodCall.rawBufferParams!.length;
       for (final rb in methodCall.rawBufferParams!) {
         buffer.add(rb.intPtr());
         lenOfBuffer.add(rb.length);

test_shard/rendering_test/.gitignore

@@ -33,7 +33,6 @@ migrate_working_dir/
 /build/
 
 # Web related
-lib/generated_plugin_registrant.dart
 
 # Symbolication related
 app.*.symbols

test_shard/rendering_test/README.md

@@ -16,6 +16,16 @@ flutter test integration_test/agora_video_view_render_test.dart \
     --dart-define=TEST_APP_ID="<APP_ID>"
 ```
 
+### Web
+Follow the https://docs.flutter.dev/cookbook/testing/integration/introduction#5b-web to dowload and setup the `ChromeDriver`
+
+```
+flutter drive --driver=test_driver/integration_test.dart \
+    --target=integration_test/agora_video_view_render_test.dart \
+    --dart-define=TEST_APP_ID="<APP_ID>" \
+    -d web-server
+```
+
 
 ## Update screenshot
 ### Android/iOS
@@ -35,4 +45,17 @@ To update the screenshot, pass the `--dart-define=UPDATE_GOLDEN=true` to the `fl
 flutter test integration_test/agora_video_view_render_test.dart \
     --dart-define=TEST_APP_ID="<APP_ID>" \
     --dart-define=UPDATE_GOLDEN=true
+```
+
+### Web
+Follow the https://docs.flutter.dev/cookbook/testing/integration/introduction#5b-web to dowload and setup the `ChromeDriver`
+
+To update the screenshot, pass the `export UPDATE_GOLDEN="true"` in command line.
+
+```
+export UPDATE_GOLDEN="true"
+flutter drive --driver=test_driver/integration_test.dart \
+    --target=integration_test/agora_video_view_render_test.dart \
+    --dart-define=TEST_APP_ID="<APP_ID>" \
+    -d web-server
 ```

test_shard/rendering_test/integration_test/agora_video_view_smoke_test.dart

@@ -2,10 +2,12 @@ import 'dart:async';
 import 'dart:io';
 
 import 'package:agora_rtc_engine/agora_rtc_engine.dart';
+import 'package:flutter/foundation.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:integration_test/integration_test.dart';
 
 import 'common/fake_camera_local_video_view.dart';
+import 'common/fake_camera_remote_video_view.dart';
 import 'common/screenshot_matcher_ext.dart';
 import 'common/widget_tester_ext.dart';
 
@@ -103,7 +105,7 @@ void main() {
         skip: true,
       );
     },
-    skip: !Platform.isIOS,
+    skip: kIsWeb || !Platform.isIOS,
   );
 
   group(
@@ -179,7 +181,6 @@ void main() {
                   },
                   onFirstFrame: () async {
                     if (!onFrameCompleter.isCompleted) {
-                      print('startPreview');
                       await rtcEngine.startPreview(
                           sourceType: VideoSourceType.videoSourceCustom);
                       onFrameCompleter.complete(null);
@@ -204,7 +205,7 @@ void main() {
         },
       );
     },
-    skip: !Platform.isAndroid,
+    skip: kIsWeb || !Platform.isAndroid,
   );
 
   group(
@@ -254,4 +255,91 @@ void main() {
     // TODO(littlegnal): Preview for `videoSourceCustom` fix after 6.1.0
     skip: true,
   );
+
+  group(
+    'AgoraVideoView Web',
+    () {
+      group('Platform View', () {
+        testWidgets(
+          'can show local preview',
+          (WidgetTester tester) async {
+            final onFrameCompleter = Completer();
+            final RtcEngineEx rtcEngine = createAgoraRtcEngineEx();
+
+            await tester.pumpWidget(FakeCameraLocalVideoView(
+                rtcEngine: rtcEngine,
+                builder: (context) {
+                  return AgoraVideoView(
+                    controller: VideoViewController(
+                      rtcEngine: rtcEngine,
+                      canvas: const VideoCanvas(
+                        uid: 0,
+                        sourceType: VideoSourceType.videoSourceCustom,
+                      ),
+                    ),
+                  );
+                },
+                onFirstFrame: () async {
+                  if (!onFrameCompleter.isCompleted) {
+                    await rtcEngine.startPreview(
+                        sourceType: VideoSourceType.videoSourceCustom);
+                    onFrameCompleter.complete(null);
+                  }
+                }));
+
+            await tester.pumpAndSettle(const Duration(seconds: 10));
+
+            await onFrameCompleter.future;
+            await waitFrame(tester);
+
+            await binding.takeScreenshot(
+                'web.agora_video_view.platform_view.smoke_test.start_preview_after_enable_video');
+
+            await waitDisposed(tester, binding);
+          },
+        );
+
+        testWidgets(
+          'can show remote preview',
+          (WidgetTester tester) async {
+            final onFrameCompleter = Completer();
+            final RtcEngineEx rtcEngine = createAgoraRtcEngineEx();
+
+            await tester.pumpWidget(FakeCameraRemoteVideoView(
+                rtcEngine: rtcEngine,
+                builder: (context, channelId, localUid, remoteUid) {
+                  return AgoraVideoView(
+                    controller: VideoViewController.remote(
+                      rtcEngine: rtcEngine,
+                      useFlutterTexture: true,
+                      connection: RtcConnection(
+                          channelId: channelId, localUid: localUid),
+                      canvas: VideoCanvas(
+                        uid: remoteUid,
+                      ),
+                    ),
+                  );
+                },
+                onFirstFrame: () async {
+                  if (!onFrameCompleter.isCompleted) {
+                    await rtcEngine.startPreview();
+                    onFrameCompleter.complete(null);
+                  }
+                }));
+
+            await tester.pumpAndSettle(const Duration(seconds: 10));
+
+            await onFrameCompleter.future;
+            await waitFrame(tester);
+
+            await binding.takeScreenshot(
+                'web.agora_video_view.platform_view.smoke_test.show_remote_preview');
+
+            await waitDisposed(tester, binding);
+          },
+        );
+      });
+    },
+    skip: !kIsWeb,
+  );
 }