假设我们使用webRTC从A到B建立了连接。 B在窗口中也看到了自己的摄像头。
是否可以在显示他自己的网络摄像头的B窗口上查看A鼠标箭头?
(因此,如果Alice与Bob连接,Alice可以使用其指针向Bob指示Bob厨房里的汤匙在哪里)。
最佳答案
使用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呈现。低延迟在同级交互中很重要。