PeerStream更新-按键偶发不释放

前言

最近有多位群友反馈PeerStream在使用过程中出现键盘不释放的情况，特别是在进行人物移动的时候，通过WASD控制人物行走，按键不释放会导致人物失去控制，一直向前。
https://github.com/inveta/peer-stream/issues/149

问题排查

首先我们参考官方的demo，发现也存在如下问题，测试视频如下：

我们发现当按键按住之后，如果突然失去焦点，就会导致不会发送按键释放命令。这个问题必现，例如通过ctrl+shift+A会呼出chrome弹窗，弹出后会导致PeerStream失焦。

问题解决

我们定义一个集合保存按下的键盘

keysDown = new Set()

之后在键盘按下的时候，将其插入集合，再键盘释放的时候，删除集合，如果突然拾取焦点，就把按键进行释放。

this.onkeydown = (e) => {
   const keyCode = SpecialKeyCodes[e.code] || e.keyCode
   this.dc.send(new Uint8Array([SEND.KeyDown, keyCode, e.repeat]));
   this.keysDown.add(keyCode)
  };

this.onkeyup = (e) => {
   const keyCode = SpecialKeyCodes[e.code] || e.keyCode
   this.dc.send(new Uint8Array([SEND.KeyUp, keyCode]));
   this.keysDown.delete(keyCode)
  };

this.onblur = e => {
   this.keysDown.forEach(keyCode => {
    this.dc.send(new Uint8Array([SEND.KeyUp, keyCode]));
   })
   this.keysDown.clear()
  }

总结

本文主要介绍了peerstream解决了键盘按键在失去焦点之后，不释放的问题。官方的版本也存在这个问题。

Inveta团队

Inveta团队由研发、美术设计、建模等组成。团队介绍:
https://www.inveta.cn/about.html
团队开源项目：
https://github.com/inveta
团队推出了UE像素流的技术支持服务，帮助大家更好的管理UE的像素流。