項(xiàng)目中需要做遠(yuǎn)程控制,可以傳輸指令和音頻,領(lǐng)導(dǎo)說用前端做,整合到h5中,于是研究了一下webRTC,基本能解決需求.就把項(xiàng)目簡化寫了一個(gè)demo分享出來
初始化配置
核心就是兩端通過內(nèi)網(wǎng)nat穿透建立p2p連接,這里我將peerB作為主控端,初始化時(shí),連接本機(jī)獲取本地icecandidate,這里icecandidate可以理解為內(nèi)網(wǎng)nat對外網(wǎng)的映射,可以直接在公網(wǎng)訪問的地址,可以是一個(gè)公網(wǎng)域名,也可以是服務(wù)器ip+端口,獲取之后,通過http傳輸給TURN中繼服務(wù)器,由中繼服務(wù)器轉(zhuǎn)發(fā)給peerA,這里peerA和peerB由登錄的用戶組來控制,進(jìn)行不同的初始化設(shè)置.
關(guān)鍵代碼:
// 監(jiān)聽 B 的ICE候選信息
// 如果收集到硬耍，就添加給 A
this.peerB.onicecandidate = (event) => {
console.log("iceb", event);
if (event.candidate) {
//實(shí)際通信時(shí),這里要用http把event.candidate發(fā)送給TURN中繼服務(wù)器,由中繼服務(wù)器轉(zhuǎn)發(fā)給peerA
this.peerA.addIceCandidate(event.candidate);
}
};
在socket初始化時(shí),獲取本地地址,進(jìn)而換取icecandidate
import io from "socket.io-client";
let host = location.origin;
const socket = io.connect(host);
建立p2p連接
peerB作為主控端,主動發(fā)起連接,發(fā)出offer,設(shè)置本地LocalDescription和遠(yuǎn)端RemoteDescription,都是同一個(gè)offer標(biāo)志,peerA接收到請求后回復(fù)answer,設(shè)置本地LocalDescription和遠(yuǎn)端RemoteDescription,都是同一個(gè)answer標(biāo)志,此時(shí)連接完成,會自動調(diào)用peerA和peerB的onopen事件,可以進(jìn)行雙工通信
傳輸控制信令
信令格式可以自定義,我這里是簡化demo,所以就簡單的放置了clientX, clientY, type, target, innerText 五個(gè)參數(shù),都是從鼠標(biāo)事件中獲取的,獲取之后用相應(yīng)的信道進(jìn)行發(fā)送,遠(yuǎn)端注冊相應(yīng)的onmessage函數(shù)進(jìn)行處理即可
監(jiān)聽dom的click時(shí)間,捕獲鼠標(biāo)事件進(jìn)行發(fā)送
clickB(e) {
if (!this.channelB) return;
const { clientX, clientY, type, target, innerText } = e;
console.log("Btarget", target.getAttribute("id"));
this.channelB.send(
JSON.stringify({
clientX,
clientY,
type,
target: target.getAttribute("id"),
innerText,
})
);
},
遠(yuǎn)端注冊onmessage函數(shù),對消息進(jìn)行處理
this.channelA.onmessage = (e) => {
let m = JSON.parse(e.data);
if (m.type === "click") {
this.receiveTextA = "A收到了點(diǎn)擊" + m.target;
this.$refs["a"].click();
} else if (m.type === "msg") {
this.receiveTextA = "A收到了消息" + m.sendText;
this.show = false;
} else {
console.log("channelA onmessage", JSON.parse(e.data));
this.receiveTextA = "A收到了" + e.data + "";
if (!this.oldTopA || !this.oldLeftA) {
this.oldTopA = m.clientY;
this.oldLeftA = m.clientX;
return;
}
this.insertValueA(m.clientY, m.clientX);
}
};
插值算法
鼠標(biāo)事件不可連續(xù)發(fā)送,由于js線程和ui線程是互斥的,連續(xù)發(fā)送事件會造成ui阻塞,所以必須按一定的時(shí)間間隔進(jìn)行發(fā)送鼠標(biāo)位置
updateXYB: function(event) {
if (this.channelB.readyState !== "open") return;
if (this.timerB) return;
console.log("Bmove event", event);
const { clientX, clientY, type, target, innerText } = event;
this.timerB = setTimeout(() => {
clearTimeout(this.timerB);
this.timerB = null;
this.channelB.send(
JSON.stringify({ clientX, clientY, type, target, innerText })
);
}, 200);
},
在接收端,設(shè)置一個(gè)old標(biāo)志,第一次接收到數(shù)據(jù)并不繪制,保存起來,從第二次接收到數(shù)據(jù)開始與前一幀數(shù)據(jù)進(jìn)行運(yùn)算,插值繪制鼠標(biāo)軌跡,可以有效提升性能.
if (!this.oldTopB || !this.oldLeftB) {
this.oldTopB = m.clientY;
this.oldLeftB = m.clientX;
return;
}
this.insertValueB(m.clientY, m.clientX);
插值函數(shù),保證不卡頓
insertValueA(y, x) {
if (!this.topA || !this.leftA) {
this.topA = this.oldTopA + "px";
this.leftA = this.oldLeftA + "px";
return;
}
let n = 9;
let stepY = (y - this.oldTopA) / n;
let stepX = (x - this.oldLeftA) / n;
let insertValueATimer = setInterval(() => {
this.topA = +this.topA.slice(0, this.topA.indexOf("px")) + stepY + "px";
this.leftA =
+this.leftA.slice(0, this.leftA.indexOf("px")) + stepX + "px";
n--;
if (n === 0) {
clearInterval(insertValueATimer);
insertValueATimer = null;
}
}, 20);
this.oldTopA = y;
this.oldLeftA = x;
},
以上就是webRtc信令傳輸實(shí)現(xiàn)遠(yuǎn)程控制的基本思路,音頻也是類似,當(dāng)p2p通道建立起來之后,整個(gè)連接可以復(fù)用多條udp連接,直接進(jìn)行音頻推送就可以實(shí)現(xiàn)語音和鼠標(biāo)控制事件同時(shí)發(fā)送給被控端了
