webrtc 局域網內文本通信

2024-04-27 15:10:30

字體：大中小

來源：轉載

供稿：網友

環境

Microsoft Windows [版本 10.0.14393] Google Chrome 版本 55.0.2883.87 m (64-bit)

相關API請參照MDN和webrtc.org。

主要流程

簡單通信流程：

代碼

傳輸Description 和 Candidate 需要通過其他通信通道進行,例如Ajax,websocket,這里采用手動復制粘貼內容代替

index.html

<html><head><meta charset='utf-8' ><title>WEBRTC</title><style>#log{ border:2px solid red; width:500px; height:500px;}.tip{color:blue;}.message{color:green;}</style></head><body><div class="container"> <div><input id="callBtn" value="請求呼叫" type="button"/><input id="myDescription" type="text" placeholder="我的Description" /><input id="myCandidate" type="text" placeholder="我的Candidate" /></div> <div><input id="anDescription" type="text" placeholder="對方的Description" /><input id="anCandidate" type="text" placeholder="對方的Candidate" /><input id="anBtn" value="確定" type="button"/></div> <div><input id="answerBtn" value="接聽" type="button"/><input id="hangBtn" value="掛機" type="button"/></div> <div><input id="contentInput" type="text" placeholder="發送文字內容" /><input id="sendBtn" value="發送" type="button"/></div> <div id="log"> <div class="tip">1.呼叫方點擊請求呼叫 </div> </div></div> <script>/****操作提示*/function tip(msg){ var d=document.createElement("div"); d.className="tip"; d.innerHTML=msg; log.appendChild(d);}/****操作提示*/function message(msg){ var d=document.createElement("div"); d.className="message"; d.innerHTML=msg; log.appendChild(d);}</script><script src="index.js"> </script></body></html>

index.js

//主要流程，其他方式傳輸 Description 和 Candidate//呼叫方 createDataChannel->createOffer->獲得和傳輸本身Description 和 Candidate ↓↓ -- >接收和設置對方傳輸Description 和 Candidate -->OK //接聽方接收對方傳輸Description 和 Candidate -->createAnswer --> 獲得和傳輸本身Description 和 Candidate ↑↑ -->OKvar RTCPeerConnection=RTCPeerConnection||webkitRTCPeerConnection;var pc; var mediaConstraints = null; var conf=null; pc = new RTCPeerConnection(conf,mediaConstraints);pc.onconnectionstatechange=function(){ console.log(arguments);}; pc.ondatachannel=function(e){ console.log("傳輸通道打開",arguments); channel =e.channel; channel.onopen = function() { tip("等待接收消息"); console.log("接收通道打開",arguments); }; channel.onclose = function() { tip("斷開消息通道"); console.log("接收通道關閉",arguments); }; channel.onmessage = function(e) { console.log("接收通道信息",arguments); message("收到:"+e.data); };}; pc.onicecandidate=function(e){ if(e.candidate) { //這里傳輸candidate給對方 myCandidate.value=JSON.stringify(e.candidate); } console.log("獲取ice",arguments);}; pc.oniceconnectionstatechange=function(){ console.log(arguments);}; pc.onidentityresult=function(){ console.log(arguments);}; pc.onidpassertionerror=function(){ console.log(arguments);}; pc.onidpvalidationerror=function(){ console.log(arguments);}; pc.onnegotiationneeded=function(){ console.log("需要協商",arguments); pc.createOffer().then(function(offer) { console.log("分配內容",offer); myDescription.value=JSON.stringify(offer); //這里傳輸Description 給接聽方 , 手動復制 tip("2.將我的Description 和 Candidate復制到接聽方對應的對方的Description 和 Candidate ,接聽方點擊接聽"); return pc.setLocalDescription(offer); });}; pc.onpeeridentity=function(){ console.log(arguments);}; pc.onremovestream=function(){ console.log(arguments);}; pc.onsignalingstatechange=function(){ console.log(arguments);}; pc.ontrack=function(){ console.log(arguments);}; var channel;//請求呼叫callBtn.onclick=function(){ channel =pc.createDataChannel("hehe",mediaConstraints);//可以發送文字什么的 channel.onopen = function() { tip("可以發送消息"); console.log("hehe通道打開",arguments); }; channel.onclose = function() { tip("關閉消息通道"); console.log("hehe通道關閉",arguments); }; channel.onmessage = function(e) { console.log("hehe通道信息",arguments); message("收到:"+e.data); };};sendBtn.onclick=function(){ channel.send(contentInput.value);};//接聽輸入的請求地址answerBtn.onclick=function(){ //這里獲取傳輸過來的 Description ,手動粘貼 pc.setRemoteDescription(new RTCsessionDescription(JSON.parse(anDescription.value))); pc.createAnswer().then(function(ans){ console.log("分配內容",ans); myDescription.value=JSON.stringify(ans); //這里傳輸Description給呼叫方 , 手動復制 tip("3.將我的Description 和 Candidate復制到呼叫方對應的對方的Description 和 Candidate ,呼叫方點擊確認"); pc.setLocalDescription(ans); }); pc.addIceCandidate(JSON.parse(anCandidate.value));};//請求呼叫方確認呼叫方的地址anBtn.onclick=function(){ pc.setRemoteDescription(new RTCSessionDescription(JSON.parse(anDescription.value))); pc.addIceCandidate(JSON.parse(anCandidate.value));};//關閉hangBtn.onclick=function(){ channel.close(); pc.close();}

上一篇：nodejs開發框架

下一篇：JQuery常用基礎