WebRTC鼠标指针

Question

假设我们有webRTC从A到B的连接。 B在窗户中看到他自己的摄像头。 是否可以在显示自己的网络摄像头的B窗口上查看A鼠标箭头？ （所以如果Alice与Bob连接，Alice可以使用他的指针向Bob表明Bob在Bob的厨房里的勺子在哪里）。

Answer 1

这个问题与WebRTC无关：您的解决方案可以使用Javascript实现，但恐怕很难实现。

我会建议打开另一个同行或通道从一个客户端到另一个，并发送鼠标指针坐标在canvas.onmousemove事件。

Answer 2

使用一个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上的另一端。低延迟在同伴交互中很重要。