前言
最近有多位群友反馈PeerStream在使用过程中出现键盘不释放的情况,特别是在进行人物移动的时候,通过WASD控制人物行走,按键不释放会导致人物失去控制,一直向前。
https://github.com/inveta/peer-stream/issues/149
![d185946297e3ee6fc16e808fac081fb7.png](https://i-blog.csdnimg.cn/blog_migrate/f637fbb63bb0765fbd53f7e46a24a8aa.png)
问题排查
首先我们参考官方的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的像素流。