1
2つのピア間でWebRTCデータチャネルメッセージを受信できません。WebRTCデータチャネル接続が確立されていますが、メッセージが届かない
以下は両方のピアが同じページであり、シグナリングチャネルがプレーンJavaScriptオブジェクト交換で置き換えられているMVPです。
私はトリックルICEを選択して使用していません。私はそれを使用しないという欠点を認識していますが、私は下のMVPに干渉してはいけません。
コードは期待どおりに動作し、すべてのログメッセージが通過します。欠落しているのは、データチャネルのメッセージ処理用のメッセージだけです。メッセージがどちらのピアからも送られないかのようです。これは、テストを送信しようとするイベントハンドラです。 メソッド呼び出しが失敗し、nullの参照エラーが発生し、その根本原因を追跡できませんでした。
私はUntangling the WebRTC Flowに続き、私はこのMVPのどこにいるのですか。回答のYou can see it live here so you don't have to run it yourself.
class Peer {
constructor(name) {
this.name = name;
}
offer() {
const peerConnection = new webkitRTCPeerConnection({ iceServers: [ { url: "stun:stun.l.google.com:19302" } ] });
peerConnection.onnegotiationneeded = event => console.debug(this.name, "onnegotiationneeded");
peerConnection.onsignalingstatechange = event => console.debug(this.name, "onsignalingstatechange", peerConnection.signalingState);
peerConnection.onicegatheringstatechange = event => console.debug(this.name, "onicegatheringstatechange", peerConnection.iceGatheringState);
peerConnection.oniceconnectionstatechange = event => console.debug(this.name, "oniceconnectionstatechange", peerConnection.iceConnectionState);
peerConnection.onconnectionstatechange = event => console.debug(this.name, "onconnectionstatechange", peerConnection.connectionState);
peerConnection.ondatachannel = event => {
const dataChannel = event.channel;
dataChannel.onopen = event => {
console.debug(this.name, "onopen");
dataChannel.send("TEST");
};
dataChannel.onclose = event => console.debug(this.name, "onclose");
dataChannel.onerror = event => console.debug(this.name, "onerror");
dataChannel.onmessage = event => console.debug(this.name, "onmessage");
console.debug(this.name, "ondatachannelO");
this.dataChannel = dataChannel;
};
return new Promise((resolve, reject) => {
peerConnection.onicecandidate = event => {
if (!event.candidate) {
peerConnection.createOffer()
.then(offer => {
console.debug(this.name, "created an offer with candidates.");
this.peerConnection = peerConnection;
resolve(peerConnection.localDescription);
})
.catch(reject);
}
};
peerConnection.createDataChannel("datachannel");
peerConnection.createOffer()
.then(offer => {
console.debug(this.name, "created an offer without candidates.");
peerConnection.setLocalDescription(offer)
.then(() => {
console.debug(this.name, "set local description. Collecting candidates…");
})
.catch(reject);
})
.catch(reject);
});
}
answer(offer) {
const peerConnection = new webkitRTCPeerConnection({ iceServers: [ { url: "stun:stun.l.google.com:19302" } ] });
peerConnection.onnegotiationneeded = event => console.debug(this.name, "onnegotiationneeded");
peerConnection.onsignalingstatechange = event => console.debug(this.name, "onsignalingstatechange", peerConnection.signalingState);
peerConnection.onicegatheringstatechange = event => console.debug(this.name, "onicegatheringstatechange", peerConnection.iceGatheringState);
peerConnection.oniceconnectionstatechange = event => console.debug(this.name, "oniceconnectionstatechange", peerConnection.iceConnectionState);
peerConnection.onconnectionstatechange = event => console.debug(this.name, "onconnectionstatechange", peerConnection.connectionState);
peerConnection.ondatachannel = event => {
const dataChannel = event.channel;
dataChannel.onopen = event => {
console.debug(this.name, "onopen");
dataChannel.send("TEST");
};
dataChannel.onclose = event => console.debug(this.name, "onclose");
dataChannel.onerror = event => console.debug(this.name, "onerror");
dataChannel.onmessage = event => console.debug(this.name, "onmessage");
console.debug(this.name, "ondatachannelA");
this.dataChannel = dataChannel;
};
return new Promise((resolve, reject) => {
peerConnection.onicecandidate = event => {
if (!event.candidate) {
peerConnection.createAnswer()
.then(answer => {
console.debug(this.name, "created an answer with candidates.");
resolve(peerConnection.localDescription);
})
.catch(reject);
}
};
peerConnection.setRemoteDescription(offer)
.then(() => {
console.debug(this.name, "set remote description.");
peerConnection.createAnswer()
.then(answer => {
console.debug(this.name, "created an answer without candidates.");
peerConnection.setLocalDescription(answer)
.then(() => {
console.debug(this.name, "set local description.");
})
.catch(reject);
})
.catch(reject);
})
.catch(reject);
});
}
sealTheDeal(proffer) {
return new Promise((resolve, reject) => {
this.peerConnection.setRemoteDescription(proffer)
.then(() => {
console.debug(this.name, "set remote description.");
resolve();
})
.catch(console.e);
});
}
send() {
this.dataChannel.send("TEST");
}
}
function flow() {
const peerA = new Peer("Alice");
const peerB = new Peer("Bob");
peerA.offer()
.then(offer => {
console.debug("Signal transfering offer from Alice to Bob.");
peerB.answer(offer)
.then(proffer => {
console.debug("Signal transfering proffer from Bob to Alice.");
peerA.sealTheDeal(proffer)
.then(() => {
peerB.offer()
.then(offer => {
console.debug("Signal transfering offer from Bob to Alice.");
peerA.answer(offer)
.then(proffer => {
console.debug("Signal transfering proffer from Alice to Bob.");
peerB.sealTheDeal(proffer)
.then(() => {
console.debug("HYPE");
peerA.send("From Alice to Bob.");
peerB.send("From Bob to Alice.");
})
.catch(console.error);
})
.catch(console.error);
})
.catch(console.error);
})
.catch(console.error);
})
.catch(console.error);
})
.catch(console.error);
window.peerA = peerA;
window.peerB = peerB;
}
flow();