WebRTC鼠标指针

Question

假设我们有一个从A到B与webRTC的连接。 B在窗口中也看到了他自己的摄像头。 是否可以在B窗口中查看显示自己的网络摄像头的A鼠标箭头？

（所以，如果爱丽丝与鲍勃联系，爱丽丝可以用他的指针向鲍勃指出Bob在厨房里的勺子在哪里。）

Answer 1

使用data channel从A到B发送鼠标指针坐标：

var pc1 = new RTCPeerConnection(), pc2 = new RTCPeerConnection();

pc1.onicecandidate = e => pc2.addIceCandidate(e.candidate);
pc2.onicecandidate = e => pc1.addIceCandidate(e.candidate);
pc1.onnegotiationneeded = e =>
  pc1.createOffer().then(d => pc1.setLocalDescription(d))
  .then(() => pc2.setRemoteDescription(pc1.localDescription))
  .then(() => pc2.createAnswer()).then(d => pc2.setLocalDescription(d))
  .then(() => pc1.setRemoteDescription(pc2.localDescription))
  .catch(e => console.log(e));

var dc = pc1.createDataChannel("mouse position");
document.onmousemove = e => dc.send(e.x + ", " + e.y);

pc2.ondatachannel = ({channel}) => channel.onmessage = e => console.log(e.data);

<div id="div"></div>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>

然后在另一端用JavaScript渲染它。低延迟在对等交互中很重要。

Answer 2

这个问题与WebRTC无关：您的解决方案可以使用Javascript实现，但我担心实施起来会非常困难。

我建议从另一个客户端打开另一个对等点或通道，并在canvas.onmousemove事件上发送鼠标指针坐标。