如何在Zoom Video SDK Web示例中添加视频通话顶部静态文本

我希望在Zoom视频通话界面顶部添加静态文本，效果类似顶部带有固定文字的视频通话界面。目前基于Zoom Web SDK示例项目开发，修改的是video.tsx文件，当前返回的JSX结构如下：

return (
  <div className="viewport">
    <ShareView ref={shareViewRef} onRecieveSharingChange={setIsRecieveSharing} />
    <div
      className={classnames('video-container', {
        'video-container-in-sharing': isRecieveSharing
      })}
    >
      <canvas className="video-canvas" id="video-canvas" width="800" height="600" ref={videoRef} />
      {selfVideoLayout && mediaStream?.isRenderSelfViewWithVideoElement() && (
        <video
          id={SELF_VIDEO_ID}
          className="self-video-tag"
          playsInline
          muted
          autoPlay
          style={{
            display: 'block',
            width: `${selfVideoLayout.width}px`,
            height: `${selfVideoLayout.height}px`,
            top: `${selfVideoLayout.y}px`,
            left: `${selfVideoLayout.x}px`,
            pointerEvents: 'none'
          }}
        />
      )}

      <AvatarActionContext.Provider value={avatarActionState}>
        <ul className="avatar-list">
          {visibleParticipants.map((user, index) => {
            if (index > videoLayout.length - 1) {
              return null;
            }
            const dimension = videoLayout[index];
            const { width, height, x, y } = dimension;
            const { height: canvasHeight } = canvasDimension;
            return (
              <Avatar
                participant={user}
                key={user.userId}
                isActive={activeVideo === user.userId}
                networkQuality={networkQuality[`${user.userId}`]}
                style={{
                  width: `${width}px`,
                  height: `${height}px`,
                  top: `${canvasHeight - y - height}px`,
                  left: `${x}px`
                }}
              />
            );
          })}
        </ul>
        <RemoteCameraControlPanel />
      </AvatarActionContext.Provider>
    </div>
    <VideoFooter className="video-operations" sharing selfShareCanvas={shareViewRef.current?.selfShareRef} />

    {totalPage > 1 && <Pagination page={page} totalPage={totalPage} setPage={setPage} inSharing={isRecieveSharing} />}
    <ReportBtn />
  </div>
);

我尝试过论坛里的方法，但插入后没生效，请问该怎么正确添加？

正确实现步骤 #

1. 选对插入位置 #

要让文本覆盖在视频内容上方，必须把文本元素放在video-container这个div内部——这个容器是视频渲染的核心区域，默认是相对定位的，刚好适合作为绝对定位元素的父容器。插入位置要在所有视频、画布元素之后，确保层级更高。

2. 添加静态文本元素 #

在video-container内部的AvatarActionContext.Provider标签之后，插入以下代码：

<div 
  style={{
    position: 'absolute',
    top: '16px', // 距离顶部的间距可自行调整
    left: '50%',
    transform: 'translateX(-50%)', // 让文本水平居中
    zIndex: 100, // 确保层级高于视频内容
    color: 'white',
    fontSize: '20px',
    fontWeight: 'bold',
    textShadow: '0 0 8px rgba(0,0,0,0.8)', // 加阴影提升复杂背景下的可读性
    pointerEvents: 'none' // 避免文本遮挡视频区域的交互操作
  }}
>
  你的静态文本内容
</div>

3. 修改后的完整JSX示例 #

关键修改部分已标注：

return (
  <div className="viewport">
    <ShareView ref={shareViewRef} onRecieveSharingChange={setIsRecieveSharing} />
    <div
      className={classnames('video-container', {
        'video-container-in-sharing': isRecieveSharing
      })}
    >
      <canvas className="video-canvas" id="video-canvas" width="800" height="600" ref={videoRef} />
      {selfVideoLayout && mediaStream?.isRenderSelfViewWithVideoElement() && (
        <video
          id={SELF_VIDEO_ID}
          className="self-video-tag"
          playsInline
          muted
          autoPlay
          style={{
            display: 'block',
            width: `${selfVideoLayout.width}px`,
            height: `${selfVideoLayout.height}px`,
            top: `${selfVideoLayout.y}px`,
            left: `${selfVideoLayout.x}px`,
            pointerEvents: 'none'
          }}
        />
      )}

      <AvatarActionContext.Provider value={avatarActionState}>
        <ul className="avatar-list">
          {visibleParticipants.map((user, index) => {
            if (index > videoLayout.length - 1) {
              return null;
            }
            const dimension = videoLayout[index];
            const { width, height, x, y } = dimension;
            const { height: canvasHeight } = canvasDimension;
            return (
              <Avatar
                participant={user}
                key={user.userId}
                isActive={activeVideo === user.userId}
                networkQuality={networkQuality[`${user.userId}`]}
                style={{
                  width: `${width}px`,
                  height: `${height}px`,
                  top: `${canvasHeight - y - height}px`,
                  left: `${x}px`
                }}
              />
            );
          })}
        </ul>
        <RemoteCameraControlPanel />
      </AvatarActionContext.Provider>

      {/* 新增的静态文本元素 */}
      <div 
        style={{
          position: 'absolute',
          top: '16px',
          left: '50%',
          transform: 'translateX(-50%)',
          zIndex: 100,
          color: 'white',
          fontSize: '20px',
          fontWeight: 'bold',
          textShadow: '0 0 8px rgba(0,0,0,0.8)',
          pointerEvents: 'none'
        }}
      >
        会议主题：XX项目同步会
      </div>
    </div>
    <VideoFooter className="video-operations" sharing selfShareCanvas={shareViewRef.current?.selfShareRef} />

    {totalPage > 1 && <Pagination page={page} totalPage={totalPage} setPage={setPage} inSharing={isRecieveSharing} />}
    <ReportBtn />
  </div>
);

关键注意事项 #

• 确认父容器定位：如果video-container的CSS里没有position: relative，需要手动加上，否则绝对定位的文本会相对于整个页面定位。
• z-index层级：设置足够高的数值（比如100），确保文本在视频、画布等元素的上方。
• pointerEvents属性：必须添加，避免文本遮挡参会者头像点击等交互操作。
• 可读性优化：文字阴影可以根据实际视频背景调整，确保文本清晰可见。

内容的提问来源于stack exchange，提问作者Adam_G