webrtc 區域網內文字通訊
阿新 • • 發佈：2019-02-07
環境
Microsoft Windows [版本 10.0.14393]
Google Chrome
版本 55.0.2883.87 m (64-bit)
主要流程
簡單通訊流程：
程式碼
傳輸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"> index.js
//主要流程 ，其他方式傳輸 Description 和 Candidate
//呼叫方 createDataChannel->createOffer->獲得和傳輸本身Description 和 Candidate ↓↓ -- >接收和設定對方傳輸Description 和 Candidate -->OK
//接聽方 接收對方傳輸Description 和 Candidate -->createAnswer --> 獲得和傳輸本身Description 和 Candidate ↑↑ -->OK
var 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();
}