通知
本站点除 Legacy 产品与方案外,已迁移至 声网新文档中心 ,当前页面不再维护
文档中心
全部产品
Console 官网 社区 技术支持

如何自定义课堂 UI

分类: 集成类    平台: All Platforms   最后更新时间: 2023/04/13 23:09:21

Web 端如何更新房间背景颜色?

如果想修改教室背景,例如去掉黑色背景色,可修改 packages/agora-classroom-sdk/src/infra/capabilities/containers/root-box/fixed-aspect-ratio.tsx 文件中的代码。

背景色是通过以下代码设置的:

<div className="flex bg-black justify-center items-center h-screen w-screen">

删除 bg-black 即可。更多自定义 UI 信息参考自定义课堂 UI

Web 端如何更改白板背景颜色?

如需修改白板背景色,可修改 packages/agora-plugin-gallery/src/gallery/whiteboard/style.css 文件中的代码。

.netless-whiteboard-wrapper {
height: 100%;
width: 100%;
border: 1px solid;
border-radius: 4px;
@apply bg-foreground border-divider;
background: #000; /* 这行设置白板颜色背景色为黑色 */
}

更多自定义 UI 信息参考自定义课堂 UI

Web 端如何更改屏幕共享背景颜色?

packages/agora-classroom-sdk/src/infra/capabilities/containers/screen-share/index.cssremote-screen-share-container 下面一行增加以下代码即可:

/* 覆盖屏幕共享背景样式 */
div {
  background-color: unset!important;
}

更多自定义 UI 信息参考自定义课堂 UI

如何修改白板宽高比例?

调整每个班型里白板的宽高比,可修改 packages/agora-classroom-sdk/src/infra/stores/common/board/index.ts 文件中的代码。灵动课堂会先按照 packages/agora-classroom-sdk/src/infra/stores/common/share/index.ts 中的 viewportAspectRatio 计算出整体教室区域的宽高, 再计算出白板容器的高度,最后根据白板占白板容器的比例 heightRatio 动态设置白板的大小。

如果你只想修改一对一场景中的白板高度,则可在 packages/agora-classroom-sdk/src/infra/stores/one-on-one 目录下新建 board.ts 文件。

更多自定义 UI 信息参考自定义课堂 UI

如何在 UI 层获取角色信息

如果你想要获取用户角色(学生或老师),用于给不同角色显示不同的信息,可通过在 packages/agora-classroom-sdk/src/infra/capabilities/containers/nav/index.tsx 添加以下代码实现:

export const NavigationBar = visibilityControl(observer(() => {
  const userRole = EduClassroomConfig.shared.sessionInfo.role;


  const { streamUIStore } = useStore();
  const { studentCameraStream, teacherCameraStream } = streamUIStore;

  return (
    <Header className="fcr-biz-header">
      <div className="header-signal">
        <SignalQuality />

      </div>

      <div>
        {userRole === EduRoleTypeEnum.teacher ?
        <div>{studentCameraStream?.stream.fromUser.userName}</div> :
         <div>{teacherCameraStream?.stream.fromUser.userName}</div>}
      </div>

      <div className="fcr-biz-header-title-wrap">
        <RoomState />
      </div>
      <div className="header-actions">
        <Actions />
        <ShareCard />
      </div>
    </Header>
  );
}), headerEnabled);

如有更多需求,可下载源码并参照自定义课堂 UI进行修改定制。