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();
  }
}
1
Copied!
// 在视图顶部添加自定义小部件的示例
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 MainActivity extends AppCompatActivity {
    long appID = YourAppID;
    String appSign = YourAppSign;
    String userID = "userID";
    String userName = "userName";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initCallInviteService();
    }

    public void initCallInviteService() {
        ZegoUIKitPrebuiltCallInvitationConfig callInvitationConfig = new ZegoUIKitPrebuiltCallInvitationConfig();
        callInvitationConfig.provider = new ZegoUIKitPrebuiltCallConfigProvider() {
                @Override
                public ZegoUIKitPrebuiltCallConfig requireConfig(ZegoCallInvitationData invitationData) {
                    ZegoUIKitPrebuiltCallConfig config;
                    boolean isVideoCall = invitationData.type == ZegoInvitationType.VIDEO_CALL.getValue();
                    boolean isGroupCall = invitationData.invitees.size() > 1;
                    if (isVideoCall && isGroupCall) {
                        config = ZegoUIKitPrebuiltCallConfig.groupVideoCall();
                    } else if (!isVideoCall && isGroupCall) {
                        config = ZegoUIKitPrebuiltCallConfig.groupVoiceCall();
                    } else if (!isVideoCall) {
                        config = ZegoUIKitPrebuiltCallConfig.oneOnOneVoiceCall();
                    } else {
                        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;
        }
    };
                    return config;
                }
        );
        ZegoUIKitPrebuiltCallService.init(getApplication(), appID, appSign, userID, userName,
            callInvitationConfig);
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        ZegoUIKitPrebuiltCallService.logout();
    }
}
1
Copied!

自定义音频视图

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

Note

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

以下是参考代码:

基本通话
携带邀请的通话
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();
  }
}
1
Copied!
public class MainActivity extends AppCompatActivity {
    long appID = YourAppID;
    String appSign = YourAppSign;
    String userID = "userID";
    String userName = "userName";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initCallInviteService();
    }

    public void initCallInviteService() {
        ZegoUIKitPrebuiltCallInvitationConfig callInvitationConfig = new ZegoUIKitPrebuiltCallInvitationConfig();
        callInvitationConfig.provider = new ZegoUIKitPrebuiltCallConfigProvider() {
                @Override
                public ZegoUIKitPrebuiltCallConfig requireConfig(ZegoCallInvitationData invitationData) {
                    ZegoUIKitPrebuiltCallConfig config;
                    boolean isVideoCall = invitationData.type == ZegoInvitationType.VIDEO_CALL.getValue();
                    boolean isGroupCall = invitationData.invitees.size() > 1;
                    if (isVideoCall && isGroupCall) {
                        config = ZegoUIKitPrebuiltCallConfig.groupVideoCall();
                    } else if (!isVideoCall && isGroupCall) {
                        config = ZegoUIKitPrebuiltCallConfig.groupVoiceCall();
                    } else if (!isVideoCall) {
                        config = ZegoUIKitPrebuiltCallConfig.oneOnOneVoiceCall();
                    } else {
                        config = ZegoUIKitPrebuiltCallConfig.oneOnOneVideoCall();
                    }
                    // 在这里修改您的自定义通话配置。
                    if(!isGroupCall){
                        ZegoLayoutPictureInPictureConfig pipConfig =  new ZegoLayoutPictureInPictureConfig();
                        pipConfig.smallViewBackgroundColor = Color.parseColor("#333437");
                        pipConfig.largeViewBackgroundColor = Color.parseColor("#4A4B4D");
                        config.layout.config = pipConfig;
                    }
                    return config;
                }
        );
        ZegoUIKitPrebuiltCallService.init(getApplication(), appID, appSign, userID, userName,
            callInvitationConfig);
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        ZegoUIKitPrebuiltCallService.logout();
    }
}
1
Copied!

Previous

设置用户头像

Next

调整布局