字幕

功能说明

在会议过程中，主持人可能需要通过字幕向参会者发送重要的通知消息。这些消息会以特定的样式显示在会议界面上，确保所有参会者及时知晓。

小鱼易连平台 提供了字幕消息功能的完整解决方案：

会控/服务端 API：负责发送字幕消息到会议；
Web SDK：通过事件回调监听字幕消息，并在客户端进行展示；

实现方法

1. 监听字幕消息事件

终端通过监听 sub-title 回调事件接收字幕消息。每当服务端发送字幕消息时，客户端会收到此事件，并获取包含消息内容及样式的参数。

XYClient.on("sub-title", (e) => {
  console.log("接收到字幕消息：", e);
  displaySubTitle(e);
});

2. 处理字幕消息

回调事件的参数为 ISubTitleContent 类型，包含内容、字体、背景等，详见类型定义；

以下是一个简单的处理字幕消息的函数示例：

const displaySubTitle = (subtitle) => {
  const subtitleDiv = document.getElementById("subtitle");

  if (subtitle.action === "cancel") {
    subtitleDiv.style.display = "none";
    return;
  }
  
  // 设置字幕内容和样式
  subtitleDiv.innerText = subtitle.content;
  subtitleDiv.style.fontFamily = subtitle.fontFamily || "Arial";
  subtitleDiv.style.color = subtitle.fontRGB || "#FFFFFF";
  subtitleDiv.style.backgroundColor = subtitle.backgroundRGB || "rgba(0,0,0,0.5)";
  subtitleDiv.style.opacity = subtitle.backgroundAlpha || "1";
  subtitleDiv.style[subtitle.location] = "10px"; // 根据 location 设置位置
  subtitleDiv.style.left = "50%";
  subtitleDiv.style.transform = "translateX(-50%)";
  
    // 是否滚动字幕
  if (subtitle.scroll === "1") {
    let scrollSpeed = parseInt(subtitle.scrollSpeed || "50", 10);
    subtitleDiv.style.animation = `scroll ${100 / scrollSpeed}s linear infinite`;
  } else {
    subtitleDiv.style.animation = "none";
  }

  // 显示字幕
  subtitleDiv.style.display = "block";
};

3. 添加滚动字幕样式

@keyframes scroll {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}

#subtitle {
  display: none;
  padding: 10px;
  border-radius: 5px;
  white-space: nowrap;
  overflow: hidden;
}

4. 字幕 UI 集成

在 HTML 中添加字幕容器：

<div id="subtitle"></div>

提示

我们在 React/Vue 组件中都提供了字幕组件，用来快速集成展示字幕信息，详情请参见Demo 示例程序；

会控操作端：

参会者端效果：

示例代码

import XYRTC from "@xylink/xy-rtc-sdk";

const subtitleDiv = document.getElementById("subtitle");

// 监听字幕消息
XYRTCClient.on("sub-title", (subtitle) => {
  console.log("接收到字幕消息：", subtitle);
  handleSubTitle(subtitle);
});

const handleSubTitle = (subtitle) => {
  if (subtitle.action === "cancel") {
    subtitleDiv.style.display = "none";
    return;
  }

  // 设置内容和样式
  subtitleDiv.innerText = subtitle.content;
  subtitleDiv.style.fontFamily = subtitle.fontFamily || "Arial";
  subtitleDiv.style.color = subtitle.fontRGB || "#FFFFFF";
  subtitleDiv.style.backgroundColor = subtitle.backgroundRGB || "rgba(0,0,0,0.5)";
  subtitleDiv.style.opacity = subtitle.backgroundAlpha || "1";
  subtitleDiv.style.position = "fixed";
  subtitleDiv.style[subtitle.location] = "10px";
  subtitleDiv.style.left = "50%";
  subtitleDiv.style.transform = "translateX(-50%)";

  if (subtitle.scroll === "1") {
    let scrollSpeed = parseInt(subtitle.scrollSpeed || "50", 10);
    subtitleDiv.style.animation = `scroll ${100 / scrollSpeed}s linear infinite`;
  } else {
    subtitleDiv.style.animation = "none";
  }

  subtitleDiv.style.display = "block";
};

// UI
<div id="subtitle" style="width: 100%; overflow: hidden;"></div>

回调参数：ISubTitleContent

API 参考

事件

sub-title

2025-01-14 11:50:50

导出PDF文档