带有手动信号的 WebRTC 数据通道,请举例?
WebRTC datachannel with manual signaling, example please?
我真的很难得到一个完整的 WebRTC 数据通道示例,我可以 copy/paste 并且它可以工作。
我想要一个带有手动信号的 WebRTC 数据通道的 Javascript 示例,即当示例加载时,它会在一个文本框中提供信号数据。我手动复制数据(突出显示、复制)并将其粘贴到对等方的 window 中,该 window 有一个文本框来接受该信令数据。我相信信号数据中需要有一个 "answer",因此也需要有相应的文本框等待该输入。谢谢你。
示例能否使用 Google 的免费 STUN 服务器。
我对一点一滴的例子感到很困惑,我想要一个包含 HTML 和 Javascript 的文件(请不要 CSS 或 JQuery) .代码仅适用于 Chrome 就足够了。谢谢。
在这里。 不同 tabs/windows/browsers/machines:
点击下方蓝色按钮
const output = document.getElementById('output');
const config = {
iceServers: [{
urls: "stun:stun.1.google.com:19302"
}]
};
const pc = new RTCPeerConnection(config);
const dc = pc.createDataChannel("chat", {
negotiated: true,
id: 0
});
const log = msg => output.innerHTML += `<br>${msg}`;
dc.onopen = () => chat.select();
dc.onmessage = e => log(`> ${e.data}`);
pc.oniceconnectionstatechange = e => log(pc.iceConnectionState);
chat.onkeypress = function(e) {
if (e.keyCode != 13) return;
dc.send(chat.value);
log(chat.value);
chat.value = "";
};
async function createOffer() {
button.disabled = true;
await pc.setLocalDescription(await pc.createOffer());
pc.onicecandidate = ({
candidate
}) => {
if (candidate) return;
offer.value = pc.localDescription.sdp;
offer.select();
answer.placeholder = "Paste answer here. And Press Enter";
};
}
offer.onkeypress = async function(e) {
if (e.keyCode != 13 || pc.signalingState != "stable") return;
button.disabled = offer.disabled = true;
await pc.setRemoteDescription({
type: "offer",
sdp: offer.value
});
await pc.setLocalDescription(await pc.createAnswer());
pc.onicecandidate = ({
candidate
}) => {
if (candidate) return;
answer.focus();
answer.value = pc.localDescription.sdp;
answer.select();
};
};
answer.onkeypress = function(e) {
if (e.keyCode != 13 || pc.signalingState != "have-local-offer") return;
answer.disabled = true;
pc.setRemoteDescription({
type: "answer",
sdp: answer.value
});
};
pc.onconnectionstatechange = ev => handleChange();
pc.oniceconnectionstatechange = ev => handleChange();
function handleChange() {
let stat = 'ConnectionState: <strong>' + pc.connectionState + '</strong> IceConnectionState: <strong>' + pc.iceConnectionState + '</strong>';
document.getElementById('stat').innerHTML = stat;
console.log('%c' + new Date().toISOString() + ': ConnectionState: %c' + pc.connectionState + ' %cIceConnectionState: %c' + pc.iceConnectionState,
'color:yellow', 'color:orange', 'color:yellow', 'color:orange');
}
handleChange();
<p id=stat></p>
<button id="button" onclick="createOffer()">Offer:</button>
<textarea id="offer" placeholder="Paste offer here. And press Enter"></textarea> Answer: <textarea id="answer"></textarea><br> Chat: <input id="chat"><br>
<pre id="output">Chat: </pre>
然后按照以下步骤操作:
- 在WindowA中,按
Offer
按钮,将报价复制到
剪贴板。
- 在 Window B 中,将该报价粘贴到“在此处粘贴报价”,然后按 ENTER 键。
- 复制几秒钟后出现的答案。
- Return 到 window A 并将答案粘贴到“在此处粘贴答案”的位置,然后按 ENTER。
您现在应该会看到一条消息,说明您已“连接”。在聊天框中输入内容进行聊天!
如果您和朋友以某种方式交换 offer/answer,您现在就有了直接的点对点连接。这应该适用于世界各地(模对称 NAT);不涉及数据服务器。
我真的很难得到一个完整的 WebRTC 数据通道示例,我可以 copy/paste 并且它可以工作。
我想要一个带有手动信号的 WebRTC 数据通道的 Javascript 示例,即当示例加载时,它会在一个文本框中提供信号数据。我手动复制数据(突出显示、复制)并将其粘贴到对等方的 window 中,该 window 有一个文本框来接受该信令数据。我相信信号数据中需要有一个 "answer",因此也需要有相应的文本框等待该输入。谢谢你。
示例能否使用 Google 的免费 STUN 服务器。
我对一点一滴的例子感到很困惑,我想要一个包含 HTML 和 Javascript 的文件(请不要 CSS 或 JQuery) .代码仅适用于 Chrome 就足够了。谢谢。
在这里。
const output = document.getElementById('output');
const config = {
iceServers: [{
urls: "stun:stun.1.google.com:19302"
}]
};
const pc = new RTCPeerConnection(config);
const dc = pc.createDataChannel("chat", {
negotiated: true,
id: 0
});
const log = msg => output.innerHTML += `<br>${msg}`;
dc.onopen = () => chat.select();
dc.onmessage = e => log(`> ${e.data}`);
pc.oniceconnectionstatechange = e => log(pc.iceConnectionState);
chat.onkeypress = function(e) {
if (e.keyCode != 13) return;
dc.send(chat.value);
log(chat.value);
chat.value = "";
};
async function createOffer() {
button.disabled = true;
await pc.setLocalDescription(await pc.createOffer());
pc.onicecandidate = ({
candidate
}) => {
if (candidate) return;
offer.value = pc.localDescription.sdp;
offer.select();
answer.placeholder = "Paste answer here. And Press Enter";
};
}
offer.onkeypress = async function(e) {
if (e.keyCode != 13 || pc.signalingState != "stable") return;
button.disabled = offer.disabled = true;
await pc.setRemoteDescription({
type: "offer",
sdp: offer.value
});
await pc.setLocalDescription(await pc.createAnswer());
pc.onicecandidate = ({
candidate
}) => {
if (candidate) return;
answer.focus();
answer.value = pc.localDescription.sdp;
answer.select();
};
};
answer.onkeypress = function(e) {
if (e.keyCode != 13 || pc.signalingState != "have-local-offer") return;
answer.disabled = true;
pc.setRemoteDescription({
type: "answer",
sdp: answer.value
});
};
pc.onconnectionstatechange = ev => handleChange();
pc.oniceconnectionstatechange = ev => handleChange();
function handleChange() {
let stat = 'ConnectionState: <strong>' + pc.connectionState + '</strong> IceConnectionState: <strong>' + pc.iceConnectionState + '</strong>';
document.getElementById('stat').innerHTML = stat;
console.log('%c' + new Date().toISOString() + ': ConnectionState: %c' + pc.connectionState + ' %cIceConnectionState: %c' + pc.iceConnectionState,
'color:yellow', 'color:orange', 'color:yellow', 'color:orange');
}
handleChange();
<p id=stat></p>
<button id="button" onclick="createOffer()">Offer:</button>
<textarea id="offer" placeholder="Paste offer here. And press Enter"></textarea> Answer: <textarea id="answer"></textarea><br> Chat: <input id="chat"><br>
<pre id="output">Chat: </pre>
然后按照以下步骤操作:
- 在WindowA中,按
Offer
按钮,将报价复制到 剪贴板。 - 在 Window B 中,将该报价粘贴到“在此处粘贴报价”,然后按 ENTER 键。
- 复制几秒钟后出现的答案。
- Return 到 window A 并将答案粘贴到“在此处粘贴答案”的位置,然后按 ENTER。
您现在应该会看到一条消息,说明您已“连接”。在聊天框中输入内容进行聊天!
如果您和朋友以某种方式交换 offer/answer,您现在就有了直接的点对点连接。这应该适用于世界各地(模对称 NAT);不涉及数据服务器。