logo
当前页

添加自定义组件

自定义音视频 View 前景

如果您想要在音视频 View 的顶层添加自定义组件,例如在视频视图显示时,展示用户头像、添加用户等级的图标等,则可以使用setForegroundViewProvider方法。

通过 setForegroundViewProvider 实现并返回自定义 View ,该自定义 View 将放置在音视频 View 上,如图所示,添加了一个自定义 View 在每一个音视频 View 的右下角,可以显示名字,摄像头和麦克风的状态按钮:

以下是参考代码:

// 在视图顶部添加自定义小部件的示例
public class YourCustomView extends ZegoBaseAudioVideoForegroundView {

    public YourCustomView(@NonNull Context context, String userID) {
        super(context, userID);
    }

    public YourCustomView(@NonNull Context context, @Nullable AttributeSet attrs,
        String userID) {
        super(context, attrs, userID);
    }

    protected void onForegroundViewCreated(ZegoUIKitUser uiKitUser) {
        // 初始化您的自定义视图
    }

    protected void onCameraStateChanged(boolean isCameraOn) {
        // 当摄像头状态改变时调用
    }

    protected void onMicrophoneStateChanged(boolean isMicrophoneOn) {
        // 当麦克风状态改变时调用
    }

    protected void onInRoomAttributesUpdated(HashMap<String, String> inRoomAttributes) {
        // 当房间内属性改变时调用
    }
}

public class CallActivity extends AppCompatActivity {
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_call);

    long appID = YourAppID;
    String appSign = YourAppSign;
    String userID = "userID";
    String userName = "userName";
    String callID = "testCallID";

    // 在这里修改您的自定义配置。
    ZegoUIKitPrebuiltCallConfig config = ZegoUIKitPrebuiltCallConfig.oneOnOneVideoCall();
    config.audioVideoViewConfig.videoViewForegroundViewProvider = new ZegoForegroundViewProvider() {
        @Override
        public ZegoBaseAudioVideoForegroundView getForegroundView(ViewGroup parent, ZegoUIKitUser uiKitUser) {
            YourCustomView foregroundView = new YourCustomView(parent.getContext(),uiKitUser.userID);
            return foregroundView;
        }
    };

    ZegoUIKitPrebuiltCallFragment fragment = ZegoUIKitPrebuiltCallFragment.newInstance(appID, appSign, callID, userID, userName, config);
    getSupportFragmentManager()
            .beginTransaction()
            .replace(R.id.fragment_container, fragment)
            .commitNow();
  }
}

自定义音频视图

如果您需要在音频模式下自定义用户的视图,例如设置背景图片,您可以使用 ZegoLayoutPictureInPictureConfig 中的 largeViewBackgroundImagesmallViewBackgroundImagelargeViewBackgroundColorsmallViewBackgroundColor

说明

这些配置仅在用户关闭摄像头时有效(因为在摄像头打开时,视频视图将自动显示)。

以下是参考代码:

public class CallActivity extends AppCompatActivity {
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_call);

    long appID = YourAppID;
    String appSign = YourAppSign;
    String userID = "userID";
    String userName = "userName";
    String callID = "testCallID";

    // 在这里修改您的自定义配置。
    ZegoUIKitPrebuiltCallConfig config = ZegoUIKitPrebuiltCallConfig.oneOnOneVideoCall();
    ZegoLayoutPictureInPictureConfig pipConfig =  new ZegoLayoutPictureInPictureConfig();
    pipConfig.smallViewBackgroundColor = Color.parseColor("#333437");
    pipConfig.largeViewBackgroundColor = Color.parseColor("#4A4B4D");
    config.layout.config = pipConfig;

    ZegoUIKitPrebuiltCallFragment fragment = ZegoUIKitPrebuiltCallFragment
            .newInstance(appID, appSign, callID, userID, userName, config);

    getSupportFragmentManager()
            .beginTransaction()
            .replace(R.id.fragment_container, fragment)
            .commitNow();
  }
}

Previous

设置用户头像

Next

调整布局