这是一个独立的弹幕客户端,其服务端项目见danmu-server。屏幕截图见Release。
如果你喜欢,请点个Star;欢迎Pull Request :)
欲使用此项目,服务端需要使用对应的版本。已发布的客户端均已写明对应的服务端版本号,开发分支内的客户端版本仅对应开发分支的服务端。
- 以
WebSocket
作为通讯协议,用Canvas
作为弹幕的画布; - 可在桌面任何位置显示弹幕,可与其他程序(如PowerPoint、视频播放器等)共同工作;
- 窗口置于最前,完全透明可穿透,能与其他程序正常交互;
- 提供紧急清空弹幕池、停止接收弹幕等功能,可删除单条弹幕;
- 支持图片弹幕。
- 数十人至千人集会(如学校活动、电影放映会)的实时互动
- 大型活动实时公告信息显示
- 欲在桌面显示实时吐槽
- Windows 7+ / OS X 10.8 / Linux(?)
- 打开Release下载已经编译好的程序包并解压到某目录。
- 双击目录下的
danmu-client.exe
,启动成功。
- 下载并安装Nodejs,同时需要安装Visual Studio和
Python
以便编译C++组件。 - 命令行切换到工程目录下,执行
npm install
,等待自动下载和编译组件。(如果不想通过npm下载electron,可以在package.json
里去掉electron-prebuilt
)。 - 执行
electron .
,启动成功。
- 根据
danmu.png
手动生成一个danmu.ico
; npm install node-gyp electron-packager -g
- PowerShell运行
pack.ps1
,完成。
根目录config.js
下有配置,以下是说明
socket: {
url: "弹幕服务器开启的IP与端口(如使用反代,需要确认反代支持WebSocket连接)",
password: "弹幕服务器连接密码",
room: "选择连接弹幕服务器的某间房间",
heartbeat: 心跳包发送间隔
},
display: {
comment: {
animationStyle: "默认弹幕样式(支持scroll、reversescroll、staticdown、staticup)",
fontStyle: "默认字体样式",
fontColor: "默认颜色",
lifeTime: 每条弹幕的基本存活时间,
height: 每条弹幕占据高度
},
image: 图片弹幕开关
},
image: {
regex: 图片判断正则,勿动
whitelist: [
"图片弹幕允许加载的网络图片白名单。",
"不支持通配符,必须一条一条手动添加。",
"请确认图片可以正常被打开。"
],
preload: 网络图片是否预读缓存
}
打开图片弹幕开关后,弹幕内含相关内容的将被解析为图片。图片必须可以正常打开,调用代码如:[IMG WIDTH=24]danmu-24.png[/IMG]
。格式:[IMG WIDTH=图片宽度]图片地址(支持HTTP)[/IMG]
为了保证安全与稳定,图片弹幕有防火墙机制。只有在弹幕程序目录及子目录下存在的图片才可被加载。引用网络图片,必须手动修改config.js
添加白名单规则。如果被过滤,则程序不会有任何提示,该弹幕也不会被显示。
需要在服务器打开相应开关后,才允许使用自定义弹幕功能。自定义弹幕必须返回一个函数(或类),继承自lib/danmu/sprite.js
中的Sprite
,并需要实现updateLifeTime
方法和draw
方法,有alive
属性。
示例代码如下(生成一个颜色随机、在屏幕上晃来晃去的玩意):
return (() => {
'use strict';
let Sprite = require('./lib/danmu/sprite');
let canvasWidth = 0;
let canvasHeight = 0;
class Comment extends Sprite {
constructor(param) {
super(param.id, param.x, param.y, param.width, param.height, param.speed, param.lifeTime);
this.text = param.text || ""; //文字内容
this.lifeTime = param.lifeTime || config.display.comment.lifeTime;
this.font = param.font || config.display.comment.fontStyle;
}
draw(canvasContext) {
if (canvasWidth === 0) canvasWidth = canvasContext.canvas.width;
if (canvasHeight === 0) canvasHeight = canvasContext.canvas.height;
canvasContext.fillStyle = `rgb(${parseInt(Math.random() * 255)}, ${parseInt(Math.random() * 255)}, ${parseInt(Math.random() * 255)})`;
canvasContext.font = this.font;
canvasContext.fillText(this.text, parseInt(Math.random() * canvasWidth), parseInt(Math.random() * canvasHeight));
}
updateLifeTime() {
this.lifeTime--; //每刷新一帧,存活时间-1
this.alive = (this.lifeTime >= 0);
};
}
return Comment;
})();
var Sprite = require('./lib/danmu/sprite');
var canvasWidth = 0;
var canvasHeight = 0;
function Comment(param) {
Sprite.call(this, param.id, param.x, param.y, param.width, param.height, param.speed, param.lifeTime);
this.text = param.text || ""; //文字内容
this.lifeTime = param.lifeTime || config.display.comment.lifeTime;
this.font = param.font || config.display.comment.fontStyle;
}
Comment.prototype = Object.create(Sprite.prototype);
Comment.prototype.draw = function (canvasContext) {
if (canvasWidth === 0) canvasWidth = canvasContext.canvas.width;
if (canvasHeight === 0) canvasHeight = canvasContext.canvas.height;
canvasContext.fillStyle = "rgb(" + parseInt(Math.random() * 255) + ", " + parseInt(Math.random() * 255) + ", " + parseInt(Math.random() * 255) + ")";
canvasContext.font = this.font;
canvasContext.fillText(this.text, parseInt(Math.random() * canvasWidth), parseInt(Math.random() * canvasHeight));
};
Comment.prototype.updateLifeTime = function () {
this.lifeTime--; //每刷新一帧,存活时间-1
this.alive = (this.lifeTime >= 0);
};
return Comment;
The MIT License (MIT)
zsx - http://www.zsxsoft.com / 博客 - http://blog.zsxsoft.com
DDPlayer by dpy1123