# 安装说明

# 接口修改

目前后端部署在字节轻服务中，参数校验做得还不完善，且没有进行域名限制。如果需要投入实际使用，建议修改后端接口。请求路径位于 src/request/url.ts 中。

# Chrome 拓展

你可以将其作为 Chrome 拓展进行使用，这也是本插件开发的最初想法。

安装步骤：

到 Github (opens new window) 中下载对应的源码
如果您没有安装过 Node.js，请自行在网上查阅安装方法
运行命令 npm install，安装相关的依赖包
运行命令 npm run build，获取 dist 打包文件夹，删除其中的 txt 文件
打开谷歌浏览器，在地址栏输入链接 chrome://extensions/，按下回车以后，来到拓展页面
打开右上角的开发者模式
选择左侧的加载已解压的扩展程序选项
路径选择 dist 文件夹的路径，导入即可

# 引入自己的网页中

你可以选择像上面一样，获取 dist 文件夹之后，将其中的 content.js 拷贝到你的项目中，然后直接通过 script 引入脚本即可。

示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bullet Chat Everywhere Testing</title>
  </head>
  <body>
    <script>
      (function () {
        // 判断是否是移动设备
        if (screen.width >= 900) {
          const script = document.createElement("script");
          script.src = "./content.js";
          document.body.appendChild(script);
        }
      })();
    </script>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

更推荐的方式是直接使用 CDN 引入，如果是使用 vue cli / create-react-app 脚手架，只需要在 public 文件夹下的 index.html 引入即可：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bullet Chat Everywhere Testing</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="https://bullet-chat-testing-5c5s551c589b-1305624698.tcloudbaseapp.com/bullet-chat.js"></script>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13

TIP

根据此方式引入时，脚本默认在移动端不引入。另外推荐将其作为最后一项 script 标签引入。

# 通过调用弹幕类提供的接口

下载此路径下 (opens new window) 的 barrage 文件夹，然后可以创建 barragesManager 实例来控制弹幕的渲染。

下面以在 React Hooks 中的使用作为例子：

const [barragesManager, setBarragesManager] = useState<BarragesManager>(
  new BarragesManager(
    [],
    new ChannelPositions(PositionSetting.WHOLE_POSITION)
  )
);

useEffect(() => {
  axios
    .post("/getBarrages", {
      website: document.location.origin,
    })
    .then(({ data }) => {
      if (data.status === 200) {
        console.log("弹幕数据", data.list);
        setBarragesManager(
          new BarragesManager(
            data.list,
            new ChannelPositions(barragesManager.getPosition()),
            barragesManager.getSetting()
          )
        );
      } else {
        console.log("Error: ", data.msg);
      }
    });
}, []);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

然后可以把这个 barragesManager 作为 props 传递给子组件，需要修改 barragesManager 属性的时候只要调用下面的接口即可。

# 控制弹幕开关

replay() 重播弹幕
add() 添加弹幕
open() 开启弹幕
close(delay) 关闭弹幕，参数 delay 表示延迟执行的时间，单位为 ms，建议设置为 50

# 属性设置与获取

getOpacity() & setOpacity(opacity) 获取与设置弹幕透明度，opacity 代表透明度，值介于 0 到 1 之间，值越小越透明

getPosition() & setPosition(position) 获取与设置位置信息，position 属性取值如下：

export enum PositionSetting {
  TOP_POSITON = "TOP_POSITON", // 顶部弹幕
  MIDDLE_POSITION = "MIDDLE_POSITION", // 中间弹幕
  BOTTOM_POSITION = "BOTTOM_POSITION", // 底部弹幕
  WHOLE_POSITION = "WHOLE_POSITION", // 全屏弹幕
}

1
2
3
4
5
6

getSpeed() & setSpeed(speed) 获取与设置弹幕速度，speed 取值如下：

export enum Speed {
  SLOW_SPEED = 1,
  NORMAL_SPEED = 2,
  QUICK_SPEED = 4,
  VERY_QUICK_SPEED = 6,
}

1
2
3
4
5
6

getColorSetting() & setColorSetting(colorSetting) 获取与设置颜色配置，colorSetting 取值如下：

export enum ColorSetting {
  DEFAULT_COLOR_SETTING = "DEFAULT_COLOR_SETTING", // 弹幕默认颜色
  BLACK_COLOR_SETTING = "BLACK_COLOR_SETTING", // 弹幕纯黑色
  WHITE_COLOR_SETTING = "WHITE_COLOR_SETTING", // 弹幕纯白色
}

1
2
3
4
5

默认可修改的枚举属性在 enum.ts 中，你可以修改里面的值。另外，可修改的常量还有 constants.ts 文件中的以下属性：

// 字体
export const FONT_FAMILY =
  "Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif";

// 弹幕相关设置
export const BARRAGE_HEIGHT = 90; // 通道的高度
export const MARGIN_FROM_WINDOW = 60; // 第一排弹幕与窗口顶部的距离
export const CHANNEL_SIZE = 8; // 通道数
export const DEFAULT_OPACITY = 0.8; // 默认的透明度
export const BARRAGE_PADDING = 30; // 弹幕间距

1
2
3
4
5
6
7
8
9
10

← 用户手册插件实现原理 →