其他表面视图之上的圆形表面视图

Question

我的要求是使用表面视图显示视频聊天。我的视频视图也将包含远程视图和本地视图。

我能够将本地表面视图的形状弄圆，但是当远程视频视图膨胀时，本地表面视图会恢复到原始的矩形形状。

我正在使用轮廓提供并启用剪切来制作圆形的表面视图。

这就是我想要实现的快照。 本地视频表面视图位于其他远程视频表面视图之上

这就是我得到的：-

在远程视图因视频而膨胀之前： 我可以得到局部视图的曲线形状

远程查看视频后： 局部视图再次恢复到原始形状，即矩形

这是我的 xml 代码:-

<?xml version="1.0" encoding="UTF-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_video_chat_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="io.agora.tutorials1v1vcall.VideoChatViewActivity">

    <RelativeLayout
        android:id="@+id/remote_video_view_container"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:background="@color/remoteBackground">


    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/local_frame"
        android:layout_width="@dimen/local_preview_width"
        android:layout_height="wrap_content"
        android:layout_alignRight="@+id/remote_video_view_container">

        <FrameLayout
            android:id="@+id/local_video_view_container"
            android:layout_width="@dimen/local_preview_width"
            android:layout_height="@dimen/local_preview_height"
            android:layout_alignParentTop="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentRight="true"
            android:layout_marginEnd="@dimen/local_preview_margin_right"
            android:layout_marginRight="@dimen/local_preview_margin_right"
            android:background="@color/localBackground"
            android:elevation="10dp">
        </FrameLayout>
    </RelativeLayout>

这里远程表面视图将进入@+id/remote_video_view_container内部

本地表面视图将进入@+id/local_video_view_container，形状为圆形。

为了更多参考，我已将此示例用于 1 对 1 视频聊天。示例视频聊天

注意：- 我无法创建自定义表面视图作为我从第 3 方库动态获取的表面视图实例。

如有任何帮助，我们将不胜感激......

Answer 1

您应该能够使用AgoraTextureView（远程）和SurfaceView（本地）来实现这一点。我为展示这一点而构建的示例项目：https://slack-files.com/T1CBEDLJY-F012R1T5CL8-7425620f71

Answer 2

您只需将 CardView 作为父布局并将 FrameLayout 保留为其子布局即可实现此目的。

      <androidx.cardview.widget.CardView
            android:id="@+id/cv_local_view"
            android:layout_width="160dp"
            android:layout_height="200dp"
            android:layout_marginTop="@dimen/dimen_10"
            android:layout_marginEnd="@dimen/dimen_20"
            android:backgroundTint="@color/local_color"
            app:cardCornerRadius="@dimen/dimen_20"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent">

            <FrameLayout
                android:id="@+id/local_video_view_container"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:outlineProvider="background" />

        </androidx.cardview.widget.CardView>

然后将 FrameLayout 启动为

TextureView

。

这是初始化TextureView的方法。

private fun setupLocalVideo() {
    localSurfaceView = TextureView(requireContext())
    binding.localVideoViewContainer.addView(localSurfaceView)
    agoraEngine?.setupLocalVideo(
        VideoCanvas(
            localSurfaceView, VideoCanvas.RENDER_MODE_HIDDEN, 0
        )
    )
}

您可以尝试以这种方式实现，希望它能解决您的问题。