背景

为Mac上的播放器添加一个弹幕层,这样就可以看到直播的视频和弹幕了,这样就彻底的告别了flash。有以下几个问题需要处理

  • 获取弹幕数据,以及处理弹幕数据
  • 将处理后的弹幕数据,展示在播放器的上一层并且使其滚动起来

AsyncSocket & GCDAsyncSocket

项目中的socket通讯使用到了CocoaAsyncSocket

由于之前在iOS上也实现了弹幕的获取,那时候并没有涉及到同时有播放器的播放,所以当时使用的AsyncSocket也并没有出现任何问题。这次不同的是,需要在播放的同时获取弹幕并显示,依然使用AsyncSocket则导致线程阻塞无法异步执行播放任务和弹幕,在各种Google后想到了去查询AsyncSocket和GCDAsyncSocket的区别,于是将其进行了切换,好在只需要修改相应的代理方法即可,方法内的发送数据、接收数据实现是一致的,可以无痛切换。

关于它们的详细区别Reference_GCDAsyncSocketAbout AsyncSocket

斗鱼弹幕的获取机制,细节部分可以在github上搜索,已经有很多现成的实现方法了,主要流程就是一次身份验证,然后才是弹幕数据的获取(ps:数据经过序列化的数据),还有注意的就是为了验证在线的心跳包机制。官方文档

NSView 中的 NSTextField 背景透明

弹幕的展示原理

在一个弹幕容器View上分成多个弹道,然后将数据放入弹道中,弹幕有3种状态(准备进入,进入中和飞出屏幕),基于CAAnimationDelegate通过*计算弹幕进入和飞出的时间*反复绘制单个弹幕的View来达到弹幕移动的目的

这里一个比较坑的问题就是设置了半天就是无法将NSTextField中的背景颜色设置成透明的,这里折腾了我几个小时。
最后通过一个NSTextField的扩展方法创建实例解决了这个问题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
extension NSTextField {
/// Return an `NSTextField` configured exactly like one created by dragging a “Label” into a storyboard.
class func newLabel() -> NSTextField {
let label = NSTextField()
label.isEditable = false
label.isSelectable = false
label.textColor = .labelColor
label.backgroundColor = .controlColor
label.drawsBackground = false
label.isBezeled = false
label.alignment = .natural
label.font = NSFont.systemFont(ofSize: NSFont.systemFontSize(for: label.controlSize))
label.lineBreakMode = .byClipping
label.cell?.isScrollable = true
label.cell?.wraps = false
return label
}
}

最终效果

zhiboOnMac 下载地址

一款在Mac上无需flash观看直播的播放器(支持斗鱼和熊猫)
zhiboOnMac历史版本