fix: use pip from iris to fix renderer issue (#2357) (#2358)

Author: peilinok

android/build.gradle

@@ -58,15 +58,13 @@ dependencies {
     api fileTree(dir: "libs", include: ["*.jar"])
   } else {
     // iris dependencies start
-    api 'io.agora.rtc:iris-rtc:4.5.2-build.1'
+    api 'io.agora.rtc:iris-rtc:4.5.2.140-build.4'
     // iris dependencies end
 
     // native dependencies start
     api 'io.agora.rtc:full-sdk:4.5.2'
     api 'io.agora.rtc:full-screen-sharing:4.5.2'
     // native dependencies end
-
-    api 'io.agora.rtc:pip:0.0.3'
   }
 }
 

android/src/main/java/io/agora/agora_rtc_ng/AgoraPIPFlutterActivity.java

@@ -9,8 +9,8 @@
 
 import java.lang.ref.WeakReference;
 
-import io.agora.pip.AgoraPIPActivityProxy;
-import io.agora.pip.AgoraPIPActivityListener;
+import io.agora.iris.pip.AgoraPIPActivityProxy;
+import io.agora.iris.pip.AgoraPIPActivityListener;
 
 public class AgoraPIPFlutterActivity extends FlutterActivity implements AgoraPIPActivityProxy {
     private WeakReference<AgoraPIPActivityListener> mListener;

android/src/main/java/io/agora/agora_rtc_ng/AgoraPIPFlutterFragmentActivity.java

@@ -9,8 +9,8 @@
 
 import java.lang.ref.WeakReference;
 
-import io.agora.pip.AgoraPIPActivityProxy;
-import io.agora.pip.AgoraPIPActivityListener;
+import io.agora.iris.pip.AgoraPIPActivityProxy;
+import io.agora.iris.pip.AgoraPIPActivityListener;
 
 public class AgoraPIPFlutterFragmentActivity extends FlutterFragmentActivity implements AgoraPIPActivityProxy {
     private WeakReference<AgoraPIPActivityListener> mListener;

android/src/main/java/io/agora/agora_rtc_ng/AgoraRtcNgPlugin.java

@@ -9,8 +9,8 @@
 import androidx.annotation.NonNull;
 import androidx.annotation.Nullable;
 
-import io.agora.pip.AgoraPIPActivityProxy;
-import io.agora.pip.AgoraPIPController;
+import io.agora.iris.pip.AgoraPIPActivityProxy;
+import io.agora.iris.pip.AgoraPIPController;
 import io.flutter.embedding.engine.plugins.FlutterPlugin;
 import io.flutter.embedding.engine.plugins.activity.ActivityAware;
 import io.flutter.embedding.engine.plugins.activity.ActivityPluginBinding;

docs/integration/Picture-in-Picture.md

@@ -111,14 +111,6 @@ The Picture-in-Picture (PiP) feature allows you to display video content in a sm
      // ... configuration
    ));
 
-   // iOS-specific render type configuration
-   if (Platform.isIOS) {
-     // According to [Adopting Picture in Picture in a Custom Player](https://developer.apple.com/documentation/avkit/adopting_picture_in_picture_in_a_custom_player),
-     // the PiP window only supports `AVPlayerLayer` or `AVSampleBufferDisplayLayer` for rendering video content.
-     // Therefore, we need to change the internal render type for iOS to use a compatible layer type.
-     await _engine.setParameters("{\"che.video.render.mode\":22}");
-   }
-
    // Create PiP controller
    _pipController = _engine.createPipController();
    ```

example/lib/examples/advanced/picture_in_picture/picture_in_picture.dart

@@ -37,6 +37,7 @@ class _State extends State<PictureInPicture> with WidgetsBindingObserver {
 
   double _pipContentRow = 1;
   double _pipContentCol = 0;
+  ClientRoleType _clientRoleType = ClientRoleType.clientRoleBroadcaster;
 
   final Map<int, RtcConnection> _remoteUsers = {};
 
@@ -280,18 +281,24 @@ class _State extends State<PictureInPicture> with WidgetsBindingObserver {
         // - The view property in VideoCanvas will be replaced by the SDK-managed native view.
         // - You can customize the rendering of each stream using properties like renderMode and mirrorMode.
         videoStreams: [
-          AgoraPipVideoStream(
-            connection: RtcConnection(
-              channelId: _channelIdController.text,
-              localUid: config.uid,
-            ),
-            canvas: const VideoCanvas(
-              uid: 0,
-              sourceType: VideoSourceType.videoSourceCamera,
-              setupMode: VideoViewSetupMode.videoViewSetupAdd,
-              renderMode: RenderModeType.renderModeHidden,
+          // Only add local video stream if client role is broadcaster
+          if (_clientRoleType == ClientRoleType.clientRoleBroadcaster)
+            AgoraPipVideoStream(
+              connection: RtcConnection(
+                channelId: _channelIdController.text,
+                localUid: config.uid,
+              ),
+              canvas: const VideoCanvas(
+                uid: 0,
+                sourceType: VideoSourceType.videoSourceCamera,
+                setupMode: VideoViewSetupMode.videoViewSetupAdd,
+                renderMode: RenderModeType.renderModeHidden,
+                // you should determine the mirror mode based on your use case, like if you are using the front camera,
+                // you should set the mirror mode to enabled otherwise disabled to get better user experience.
+                mirrorMode: VideoMirrorModeType.videoMirrorModeEnabled,
+              ),
             ),
-          ),
+          // Add all remote video streams
           ..._remoteUsers.entries.map((entry) => AgoraPipVideoStream(
                 connection: entry.value,
                 canvas: VideoCanvas(
@@ -337,11 +344,6 @@ class _State extends State<PictureInPicture> with WidgetsBindingObserver {
       appId: config.appId,
     ));
 
-    if (Platform.isIOS) {
-      // to render video in pip window with sdk, must call this to set the render type
-      await _engine.setParameters("{\"che.video.render.mode\":22}");
-    }
-
     _rtcEngineEventHandler = RtcEngineEventHandler(
         onError: (ErrorCodeType err, String msg) {
       logSink.log('[onError] err: $err, msg: $msg');
@@ -427,8 +429,8 @@ class _State extends State<PictureInPicture> with WidgetsBindingObserver {
       token: config.token,
       channelId: _channelIdController.text,
       uid: config.uid,
-      options: const ChannelMediaOptions(
-        clientRoleType: ClientRoleType.clientRoleBroadcaster,
+      options: ChannelMediaOptions(
+        clientRoleType: _clientRoleType,
       ),
     );
   }
@@ -601,7 +603,48 @@ class _State extends State<PictureInPicture> with WidgetsBindingObserver {
                         ),
                       ],
                     ),
-                    // Second row: Content size and layout
+                    // Second row: Client Role Type
+                    const SizedBox(height: 4),
+                    Row(
+                      children: [
+                        const Text(
+                          'Client Role: ',
+                          style: TextStyle(color: Colors.white),
+                        ),
+                        Expanded(
+                          child: Container(
+                            padding: const EdgeInsets.symmetric(horizontal: 8),
+                            decoration: BoxDecoration(
+                              color: Colors.white,
+                              borderRadius: BorderRadius.circular(4),
+                            ),
+                            child: DropdownButton<ClientRoleType>(
+                              value: _clientRoleType,
+                              isExpanded: true,
+                              underline: Container(),
+                              items: [
+                                ClientRoleType.clientRoleBroadcaster,
+                                ClientRoleType.clientRoleAudience,
+                              ].map((role) => DropdownMenuItem(
+                                value: role,
+                                child: Text(
+                                  role.toString().split('.')[1],
+                                  style: const TextStyle(fontSize: 12),
+                                ),
+                              )).toList(),
+                              onChanged: _isJoined ? null : (value) {
+                                if (value != null) {
+                                  setState(() {
+                                    _clientRoleType = value;
+                                  });
+                                }
+                              },
+                            ),
+                          ),
+                        ),
+                      ],
+                    ),
+                    // Third row: Content size and layout
                     const SizedBox(height: 4),
                     Row(
                       children: [
@@ -641,7 +684,7 @@ class _State extends State<PictureInPicture> with WidgetsBindingObserver {
                         ]
                       ],
                     ),
-                    // Third row: Row and Column
+                    // Fourth row: Row and Column (iOS only)
                     if (Platform.isIOS) ...[
                       const SizedBox(width: 4),
                       Row(
@@ -685,8 +728,8 @@ class _State extends State<PictureInPicture> with WidgetsBindingObserver {
                         ],
                       ),
                     ],
-                    // Fourth row: Setup PIP + Start PIP + Stop PIP + Dispose PIP
-                    const SizedBox(width: 4),
+                    // Fifth row: Setup PIP + Start PIP + Stop PIP + Dispose PIP
+                    const SizedBox(height: 4),
                     Row(
                       children: [
                         ElevatedButton(

ios/agora_rtc_engine.podspec

@@ -24,14 +24,12 @@ Pod::Spec.new do |s|
     s.vendored_frameworks = 'libs/*.xcframework'
   else
     # iris dependencies start
-    s.dependency 'AgoraIrisRTC_iOS', '4.5.2.140-build.2'
+    s.dependency 'AgoraIrisRTC_iOS', '4.5.2.140-build.4'
     # iris dependencies end
 
     # native dependencies start
     s.dependency 'AgoraRtcEngine_Special_iOS', '4.5.2.140'
     # native dependencies end
-
-    s.dependency 'AgoraPIP_iOS', '0.0.2-rc.2'
   end
 
   s.platform = :ios, '9.0'