All the APIs in this article can be viewed in the Room
class. The room
in the sample code of this article is an instance of whiteRoom
.
The whiteboard provided by White SDK extends infinitely to all directions. At the same time, it also allows users to move the whiteboard through the mouse wheel, gestures, etc. Therefore, even if it is the same page on the same whiteboard, different users may see different content on the screen. In order to meet the needs of all users to watch the same content, this article introduces the concept of host mode
.
The sdk supports setting a certain person in the room as the anchor (other users will automatically become audience mode
), and the content seen on the user's screen is the content seen by all other viewers.
When the anchor zooms or moves the viewing angle, other people's screens will also automatically zoom, move and other operations to ensure that all the visible content on the anchor can be viewed.
In the host mode, all the content seen by the host will be synchronized to the audience. However, the screen ratio on the audience side may be inconsistent with that on the host side. In order to fully display the content on the host side, zoom adjustments are performed, similar to when a movie is played, in order to maintain the original screen ratio and retain the original content, on some monitors, scaling is performed and black bars appear.
public class BroadcastState {
// The current perspective mode is as follows:
// 1. "freedom" free perspective, the perspective will not follow anyone
// 2. "follower" follows the perspective and will follow the anchor in the room
// 2. "broadcaster" perspective, the perspective of other people in the room will follow me
private ViewMode mode;
// Room host ID.
// If there is no anchor in the current room, it is undefined
private Long broadcasterId;
// Host information, can be customized, see the following data structure for details
private MemberInformation broadcasterInformation;
... setter/getter
}
public class MemberInformation {
// ID
private Long id;
// nickname
private String nickName;
// Avatar URL
private String avatar;
... setter/getter
}
// host mode
// The perspective mode of other people in the room will be automatically changed to follower, and you will be forced to watch your perspective.
// If there is another anchor in the room, the angle mode of the anchor will also be forced to change to follower.
// It's as if you grabbed his/her anchor position.
room.setViewMode(ViewMode.broadcaster);
// free mode
// You can zoom and move the perspective freely.
// Even if there is an anchor in the room, the anchor cannot affect your perspective.
room.setViewMode(ViewMode.freedom);
// Follow mode
// You will follow the anchor's perspective. Where the anchor is watching, you will follow.
// In this mode, if you zoom and move the angle of view, it will automatically switch back to freedom mode.
room.setViewMode(ViewMode.follower);
room.getBroadcastState();
The structure of the acquired content is shown in the figure below
public class BroadcastState {
private ViewMode mode;
private Long broadcasterId;
private MemberInformation broadcasterInformation;
... getter/setter
}
2.2.0 added API, 2.3.2 added animation option; playback replay and real-time room room support this API
public class Displayer {
// Adjust the view center
public void moveCamera(CameraConfig camera);
// Adjust the visual rectangle
public void moveCameraToContainer(RectangleConfig rectange);
}
The moveCamera
API can be used to adjust the viewing angle. The parameters are optional. The SDK will adjust the viewing angle center and zoom ratio according to the input parameters.
// Viewing center movement parameters
public class CameraConfig extends WhiteObject {
public AnimationMode getAnimationMode() {
return animationMode;
}
// The default continuous animation can be set to switch instantly
public void setAnimationMode(AnimationMode animationMode) {
this.animationMode = animationMode;
}
private AnimationMode animationMode;
public Double getCenterX() {
return centerX;
}
//Optional parameter, if left blank, it will not change
public void setCenterX(Double centerX) {
this.centerX = centerX;
}
public Double getCenterY() {
return centerY;
}
//Optional parameter, if left blank, it will not change
public void setCenterY(Double centerY) {
this.centerY = centerY;
}
public Double getScale() {
return scale;
}
//Optional parameter, if left blank, it will not change, instead of zoomScale
public void setScale(Double scale) {
this.scale = scale;
}
private Double centerX;
private Double centerY;
private Double scale;
}
In addition to adjusting the viewing angle center, the SDK also provides an API for adjusting the visual rectangle.
The visual rectangle represents the area your viewing angle must accommodate. After you set the visual rectangle, the angle of view will be automatically adjusted to just fully display the range represented by the visual rectangle.
public class RectangleConfig extends WhiteObject {
private Double originX;
private Double originY;
private Double width;
private Double height;
public RectangleConfig(Double width, Double height, AnimationMode mode) {
this(width, height);
this.animationMode = mode;
}
// The center point is the initial position
public RectangleConfig(Double width, Double height) {
this.width = width;
this.height = height;
this.originX =-width / 2.0d;
this.originY =-height / 2.0d;
}
public RectangleConfig(Double originX, Double originY, Double width, Double height) {
this.originX = originX;
this.originY = originY;
this.width = width;
this.height = height;
}
public RectangleConfig(Double originX, Double originY, Double width, Double height, AnimationMode mode) {
this(originX, originY, width, height);
this.animationMode = mode;
}
public Double getOriginX() {
return originX;
}
public void setOriginX(Double originX) {
this.originX = originX;
}
public Double getOriginY() {
return originY;
}
public void setOriginY(Double originY) {
this.originY = originY;
}
public Double getWidth() {
return width;
}
public void setWidth(Double width) {
this.width = width;
}
public Double getHeight() {
return height;
}
public void setHeight(Double height) {
this.height = height;
}
public AnimationMode getAnimationMode() {
return animationMode;
}
public void setAnimationMode(AnimationMode animationMode) {
this.animationMode = animationMode;
}
private AnimationMode animationMode;
}
2.4.22
// displayer.java
// room player general
/**
* In the form of continuous animation, the ppt is scaled proportionally to ensure that all the contents of the ppt are in the container.
* @since 2.4.22
*/
public void scalePptToFit() {
bridge.callHandler("displayer.scalePptToFit", new Object[]{});
}
/**
* Scaling ppt proportionally to ensure that all contents of ppt are in the container.
* @param mode when zooming, animation behavior
* @since 2.4.28
*/
public void scalePptToFit(AnimationMode mode) {
2.2.0 New API
Developers can use the following methods to prohibit users from manually adjusting the angle of view (using the mouse wheel to zoom, touch pad gesture movement, zoom, mobile terminal two-finger operation movement).
// prohibit the user from actively changing the field of view
room.disableCameraTransform(true);
// Restore the user's vision change permissions
room.disableCameraTransform(false);