对RTCPeerConnection做了简单的封装，实现最简单的两点通过RTCDataChannel来发送数据
需要一个websocket server做调度。
刚开始接触webrtc的点对点通讯还是有些懵逼，其实最好的教程就是一些大站的官方教程。
例如MDN这种 https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API
看完之后是完全用不到买什么书啊，或者网上的教程。
<style>
a.user {
display: block;
height: 30px;
width: auto;
}
</style>
<script>
class RTCPeerRequest {
peerConnection;
dataChannel;
peerId;
targetId;
icecandidate;
message;
constructor() {
var conf = {
"iceServers": [{ "url": "stun:stun.l.google.com:19302" }]
};
this.peerConnection = new RTCPeerConnection(conf, { optional: [{ RtpDataChannel: true }] });
this.peerConnection.onicecandidate = this.handleIceCandidate.bind(this);
this.peerConnection.ondatachannel = this.handleDataChannel.bind(this);
}
onicecandidate(callback) {
if(callback instanceof Function) {
this.icecandidate = callback;
}
return this;
}
onmessage(callback) {
if(callback instanceof Function) {
this.message = callback;
}
return this;
}
offer(offercallback) {
this.openChannel();
var peer = this.peerConnection;
this.peerConnection.createOffer()
.then(function (offer) {
console.log("offer=%o", offer)
return peer.setLocalDescription(offer);
})
.then(() => {
if(offercallback instanceof Function) {
offercallback(peer.localDescription);
}
})
.catch((err) => { console.log("offer error %o", err); });
return this;
}
answer(answercallback) {
var peer = this.peerConnection;
this.peerConnection.createAnswer()
.then((answer) => {
return peer.setLocalDescription(answer);
})
.then(() => {
if(answercallback instanceof Function) {
answercallback(peer.localDescription);
}
})
.catch((err) => { console.log("answer error %o", err); });
return this;
}
openChannel() {
var dataChannelOptions = {
reliable: true
}
this.dataChannel = this.peerConnection.createDataChannel("datachannel" + this.targetId, dataChannelOptions);
this.dataChannel.onopen = this.handleChannelOpen.bind(this);
this.dataChannel.onerror = this.handleChannelError.bind(this);
this.dataChannel.onmessage = this.handChannelData.bind(this);
return this;
}
send(data) {
this.dataChannel.send(data);
return this;
}
remoteSdp(sdp) {
this.peerConnection.setRemoteDescription(sdp);
return this;
}
addIceCandidate(candidate) {
console.log("addIceCandidate:%o", candidate);
this.peerConnection.addIceCandidate(candidate);
return this;
}
handleIceCandidate(e) {
console.log("handle candidate=%o", e.candidate);
if (e.candidate != null && this.icecandidate != null) {
this.icecandidate(e.candidate);
}
}
handleDataChannel(e) {
console.log("create channel");
this.dataChannel = e.channel;
this.dataChannel.onopen = this.handleChannelOpen.bind(this);
this.dataChannel.onerror = this.handleChannelError.bind(this);
this.dataChannel.onmessage = this.handChannelData.bind(this);
}
handleChannelOpen(){
console.log("data channel opened.")
}
handleChannelError(){
console.log("data channel error.")
}
handChannelData(e) {
console.log("data channel message = %o", e);
if(this.message) {
this.message(e.data);
}
}
}
</script>
<input type="text" id="name" />
<input type="button" id="loginButton" onclick="joinServer()" />
<div id="onlinelist" style="width:500px;height:300px;border:1px solid #9c9ace"></div>
<input type="text" id="message" />
<input type="button" id="chatButton" onclick="sendMessage()" />
<div id="messagelist" style="width:500px;height:300px;border:1px solid #9c9ace"></div>
<script>
var websocket = null;
var onlines = [];
var userObject = null;
var peerConnection = null;
var target = null;
var dataChannel = null;
var rtcRequest = null;
function joinServer() {
websocket = new WebSocket("ws://127.0.0.1:8080/" + document.getElementById("name").value);
websocket.onmessage = function (message) {
let command = JSON.parse(message.data);
console.log("command=%o", command)
switch (command.type) {
case "login":
userObject = command.data;
break;
case "online":
let onlines = command.data;
for (var i = 0; i < onlines.length; i++) {
listUser(onlines[i].id, onlines[i].name);
}
break;
case "join":
listUser(command.data.id, command.data.name);
break;
case "offer":
let offer = command.data;
let fromid = command.from;
createAnswer(fromid, offer);
break;
case "answer":
let answer = command.data;
rtcRequest.remoteSdp(command.data);
break;
case "candidate":
let candidate = command.data;
rtcRequest.addIceCandidate(candidate);
break;
case "leave":
var users = document.getElementById("onlinelist").children;
for (var i = 0; i < users.length; i++) {
var user = users[i];
if (user.nodeName == "A" && user.getAttribute("uid") == command.data.id) {
user.parentNode.removeChild(user);
break;
}
}
break;
}
};
}
function listUser(id, name) {
var a = document.createElement("A");
a.innerHTML = name;
a.setAttribute("uid", id);
a.href = "#none";
a.className = "user";
a.onclick = function () {
createOffer(a.getAttribute("uid"));
}
document.getElementById("onlinelist").appendChild(a);
}
function createOffer(id) {
if (id == userObject.id) {
alert("is self");
return;
}
rtcRequest = new RTCPeerRequest()
.onicecandidate(candidate=>{
websocket.send(JSON.stringify({
type: "candidate",
from: userObject.id,
target: id,
data: candidate}));
})
.onmessage(message=>{
console.log("receive %o",message);
})
.offer((offer)=>{
var command = {
type: "offer",
from: userObject.id,
target: id,
data: offer
};
websocket.send(JSON.stringify(command));
});
}
function createAnswer(fromid, offer) {
rtcRequest = new RTCPeerRequest()
.onicecandidate((candidate)=>{
websocket.send(JSON.stringify({
type: "candidate",
from: userObject.id,
target: fromid,
data: candidate
}));
})
.onmessage((message)=>{
console.log("receive %o",message);
})
.remoteSdp(offer)
.answer((answer)=>{
var command = {
type: "answer",
from: userObject.id,
target: fromid,
data: answer
};
websocket.send(JSON.stringify(command));
});
}
function sendMessage() {
var input = document.getElementById("message");
if(input.value != "") {
rtcRequest.send(input.value);
input.value = "";
input.focus();
}
}
</script>
