bilibili-youtube-danmaku-弹幕同步工具

bilibili-youtube-danmaku 是一个开源的弹幕同步工具，可以将B站视频的弹幕同步到YouTube视频播放器中。它支持实时弹幕显示、时间轴同步、弹幕过滤等功能，让YouTube视频也能享受B站弹幕的乐趣。

主要特性

🎯 弹幕同步

实时同步: B站弹幕实时同步到YouTube
时间轴匹配: 自动匹配视频时间轴
多视频支持: 支持多个视频同时同步
弹幕缓存: 本地缓存弹幕数据

🎨 弹幕显示

自定义样式: 支持弹幕颜色、大小、位置
弹幕过滤: 过滤垃圾弹幕和重复内容
弹幕密度: 控制弹幕显示密度
弹幕动画: 支持弹幕滚动和特效

🔧 高级功能

API支持: 支持B站API和YouTube API
插件扩展: 支持浏览器插件扩展
数据导出: 支持弹幕数据导出
统计分析: 弹幕数据统计分析

🌐 跨平台支持

浏览器: Chrome、Firefox、Safari
移动端: 支持移动浏览器
桌面端: 支持桌面应用
服务端: 支持服务端部署

项目地址

bilibili-youtube-danmaku - Github 浏览器插件下载

安装配置

1. 浏览器插件安装

# Chrome插件安装
1. 打开Chrome扩展程序页面
2. 开启开发者模式
3. 点击"加载已解压的扩展程序"
4. 选择插件目录

# Firefox插件安装
1. 打开Firefox附加组件页面
2. 点击"从文件安装附加组件"
3. 选择.xpi文件

2. 源码安装

# 克隆仓库
git clone https://github.com/bilibili-youtube-danmaku/danmaku.git
cd danmaku

# 安装依赖
npm install

# 开发模式运行
npm run dev

# 构建插件
npm run build

3. 服务端部署

# 安装Node.js依赖
npm install

# 配置环境变量
cp .env.example .env
nano .env

# 启动服务
npm start

# 使用PM2管理
pm2 start app.js --name danmaku-server

基础配置

1. 插件配置

{
  "settings": {
    "enabled": true,
    "autoSync": true,
    "danmakuOpacity": 0.8,
    "danmakuSize": 24,
    "danmakuSpeed": 8,
    "maxDanmaku": 50
  },
  "filter": {
    "enableFilter": true,
    "blockWords": ["广告", "垃圾"],
    "minLength": 2,
    "maxLength": 50
  }
}

2. 弹幕样式

/* 弹幕样式配置 */
.danmaku {
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 24px;
  color: #ffffff;
  text-shadow: 1px 1px 2px #000000;
  background: rgba(0, 0, 0, 0.5);
  padding: 2px 6px;
  border-radius: 3px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 9999;
}

3. API配置

// API配置示例
const config = {
  bilibili: {
    apiUrl: 'https://api.bilibili.com',
    timeout: 5000,
    retryTimes: 3
  },
  youtube: {
    apiKey: 'your-youtube-api-key',
    clientId: 'your-client-id'
  }
};

高级功能

1. 弹幕同步算法

// 时间轴同步算法
function syncDanmaku(bilibiliTime, youtubeTime) {
  const timeOffset = youtubeTime - bilibiliTime;
  
  return danmakuList.map(danmaku => ({
    ...danmaku,
    time: danmaku.time + timeOffset
  }));
}

// 弹幕去重算法
function deduplicateDanmaku(danmakuList) {
  const seen = new Set();
  return danmakuList.filter(danmaku => {
    const key = `${danmaku.content}-${danmaku.time}`;
    if (seen.has(key)) return false;
    seen.add(key);
    return true;
  });
}

2. 弹幕渲染引擎

// 弹幕渲染类
class DanmakuRenderer {
  constructor(canvas) {
    this.canvas = canvas;
    this.ctx = canvas.getContext('2d');
    this.danmakuList = [];
    this.channels = [];
  }

  addDanmaku(danmaku) {
    const channel = this.findAvailableChannel();
    danmaku.channel = channel;
    this.danmakuList.push(danmaku);
  }

  render() {
    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
    
    this.danmakuList.forEach(danmaku => {
      this.renderDanmaku(danmaku);
    });
    
    requestAnimationFrame(() => this.render());
  }
}

3. 数据存储

// 本地存储管理
class DanmakuStorage {
  constructor() {
    this.dbName = 'danmakuDB';
    this.version = 1;
  }

  async init() {
    return new Promise((resolve, reject) => {
      const request = indexedDB.open(this.dbName, this.version);
      
      request.onerror = () => reject(request.error);
      request.onsuccess = () => resolve(request.result);
      
      request.onupgradeneeded = (event) => {
        const db = event.target.result;
        const store = db.createObjectStore('danmaku', { keyPath: 'id' });
        store.createIndex('videoId', 'videoId', { unique: false });
        store.createIndex('time', 'time', { unique: false });
      };
    });
  }

  async saveDanmaku(videoId, danmakuList) {
    const db = await this.init();
    const transaction = db.transaction(['danmaku'], 'readwrite');
    const store = transaction.objectStore('danmaku');
    
    danmakuList.forEach(danmaku => {
      store.put({
        id: `${videoId}-${danmaku.time}-${danmaku.content}`,
        videoId,
        ...danmaku
      });
    });
  }
}

使用场景

1. 视频观看增强

# 视频观看增强
适用场景:
  - YouTube视频观看
  - 在线课程学习
  - 娱乐视频欣赏
功能:
  - 弹幕互动
  - 评论同步
  - 时间轴标记

2. 内容创作者

# 内容创作者
适用场景:
  - 视频制作
  - 直播互动
  - 内容分析
功能:
  - 弹幕分析
  - 观众反馈
  - 热度统计

3. 教育应用

# 教育应用
适用场景:
  - 在线教学
  - 远程培训
  - 知识分享
功能:
  - 实时问答
  - 重点标记
  - 互动讨论

性能优化

1. 弹幕渲染优化

// 弹幕池管理
class DanmakuPool {
  constructor(maxSize = 1000) {
    this.pool = [];
    this.maxSize = maxSize;
  }

  get() {
    return this.pool.pop() || document.createElement('div');
  }

  put(element) {
    if (this.pool.length < this.maxSize) {
      element.style.display = 'none';
      this.pool.push(element);
    }
  }
}

2. 内存管理

// 内存清理
function cleanupMemory() {
  // 清理过期的弹幕
  const now = Date.now();
  danmakuList = danmakuList.filter(danmaku => 
    now - danmaku.timestamp < 60000
  );
  
  // 清理DOM元素
  const expiredElements = document.querySelectorAll('.danmaku[data-expired="true"]');
  expiredElements.forEach(el => el.remove());
}

3. 网络优化

// 请求缓存
class RequestCache {
  constructor() {
    this.cache = new Map();
    this.maxAge = 5 * 60 * 1000; // 5分钟
  }

  async get(key, fetcher) {
    const cached = this.cache.get(key);
    if (cached && Date.now() - cached.timestamp < this.maxAge) {
      return cached.data;
    }
    
    const data = await fetcher();
    this.cache.set(key, {
      data,
      timestamp: Date.now()
    });
    
    return data;
  }
}

常见问题

Q: 如何同步B站弹幕到YouTube？

A: 安装插件后，在YouTube视频页面会自动检测并同步对应的B站弹幕。

Q: 弹幕显示不正常怎么办？

A: 检查插件设置，调整弹幕样式和显示参数，确保视频时间轴正确匹配。

Q: 如何自定义弹幕过滤规则？

A: 在插件设置中添加关键词过滤，支持正则表达式匹配。

Q: 弹幕数据可以导出吗？

A: 支持导出为JSON、CSV等格式，方便后续分析和处理。

总结

bilibili-youtube-danmaku 是一个创新的弹幕同步工具，具有以下优势：

✅ 完全免费开源
✅ 实时同步
✅ 跨平台支持
✅ 高度可定制
✅ 性能优化
✅ 易于使用

bilibili-youtube-danmaku 特别适合喜欢弹幕文化的用户，让YouTube视频也能享受B站的弹幕体验。

使用弹幕同步工具时请遵守相关平台的使用条款，合理使用弹幕功能。

翻过墙

翻过墙