基本 WebRTC DataChannel MCVE 在 Chrome 中不工作
Basic WebRTC DataChannel MCVE not working in Chrome
我正在开发一个使用 WebRTC DataChannel 的网络应用程序,但我无法在 Chrome 中打开频道。我已将其简化为一个简单的测试,在同一页面上打开两个 RTCPeerConnection
实例,并直接在代码中发出信号 (jsfiddle):
'use strict';
var RTCPC_CONFIG = {
'iceServers': [
{ 'urls': 'stun:stun.l.google.com:19302' },
]
};
var RTCPC_OPTIONAL = { optional: [{ RtpDataChannels: true }] };
var DATACHANNEL_OPTIONS = {
};
// Create offering peer and data channel.
var offPeer = new RTCPeerConnection(RTCPC_CONFIG, RTCPC_OPTIONAL);
var offChan = offPeer.createDataChannel('off', DATACHANNEL_OPTIONS);
offChan.onopen = function() {
console.log('***** offering channel open *****');
};
// Create answering peer and data channel.
var ansPeer = new RTCPeerConnection(RTCPC_CONFIG, RTCPC_OPTIONAL);
var ansChan = ansPeer.createDataChannel('ans', DATACHANNEL_OPTIONS);
ansChan.onopen = function() {
console.log('***** answering channel open *****');
};
// Create the WebRTC offer.
var exchangeDescriptions = offPeer.createOffer().then(function(offer) {
offPeer.setLocalDescription(offer);
console.log('offer\n' + JSON.stringify(offer, null, 2));
// Set the offer on the other peer.
return ansPeer.setRemoteDescription(offer);
}).then(function() {
// Create the WebRTC answer.
return ansPeer.createAnswer();
}).then(function(answer) {
ansPeer.setLocalDescription(answer);
console.log('answer\n' + JSON.stringify(answer, null, 2));
// Set the answer on the other peer.
return offPeer.setRemoteDescription(answer);
});
// Collect and exchange ICE candidates.
offPeer.onicecandidate = function(e) {
if (e.candidate) {
var ice = e.candidate;
exchangeDescriptions.then(function() {
// Add ICE candidate to other peer.
console.log('offer ICE\n' + JSON.stringify(e.candidate, null, 2));
ansPeer.addIceCandidate(ice);
});
}
else
console.log('offer ICE done');
};
ansPeer.onicecandidate = function(e) {
if (e.candidate) {
var ice = e.candidate;
exchangeDescriptions.then(function() {
// Add ICE candidate to other peer.
console.log('answer ICE\n' + JSON.stringify(e.candidate, null, 2));
offPeer.addIceCandidate(ice);
});
}
else
console.log('answer ICE done');
};
请注意 jsfiddle page I am using the WebRTC adapter 将浏览器 API 填充到规范中。
当您 运行 此脚本打开 Javascript 控制台时,我希望看到报告的 DataChannel 在所有日志记录中打开:
***** offering channel open *****
***** answering channel open *****
我确实在 Firefox 43 上看到了这个,但在 Chrome 48(稳定版)或 50(金丝雀版)上看不到。
Chrome 我哪里出错了?我尝试了其他使用 DataChannel 的示例和一些工作,所以我知道 Chrome 支持它。示例代码通常使用较旧的或特定于浏览器的 APIs,我不想简单地复制它们。据我所知,我正在做同样的事情,但显然不是这样。
啊哈,问题似乎出在这个设置上,我从几个网站的示例代码中找到了这个设置:
var RTCPC_OPTIONAL = { optional: [{ RtpDataChannels: true }] };
显然 RtpDataChannels
是遗留的 Chrome 东西,即 no longer supported. If I remove that extra argument from the RTCPeerConnection
constructors then things work on Chrome。
我 filed an issue 在 Chrome。
我正在开发一个使用 WebRTC DataChannel 的网络应用程序,但我无法在 Chrome 中打开频道。我已将其简化为一个简单的测试,在同一页面上打开两个 RTCPeerConnection
实例,并直接在代码中发出信号 (jsfiddle):
'use strict';
var RTCPC_CONFIG = {
'iceServers': [
{ 'urls': 'stun:stun.l.google.com:19302' },
]
};
var RTCPC_OPTIONAL = { optional: [{ RtpDataChannels: true }] };
var DATACHANNEL_OPTIONS = {
};
// Create offering peer and data channel.
var offPeer = new RTCPeerConnection(RTCPC_CONFIG, RTCPC_OPTIONAL);
var offChan = offPeer.createDataChannel('off', DATACHANNEL_OPTIONS);
offChan.onopen = function() {
console.log('***** offering channel open *****');
};
// Create answering peer and data channel.
var ansPeer = new RTCPeerConnection(RTCPC_CONFIG, RTCPC_OPTIONAL);
var ansChan = ansPeer.createDataChannel('ans', DATACHANNEL_OPTIONS);
ansChan.onopen = function() {
console.log('***** answering channel open *****');
};
// Create the WebRTC offer.
var exchangeDescriptions = offPeer.createOffer().then(function(offer) {
offPeer.setLocalDescription(offer);
console.log('offer\n' + JSON.stringify(offer, null, 2));
// Set the offer on the other peer.
return ansPeer.setRemoteDescription(offer);
}).then(function() {
// Create the WebRTC answer.
return ansPeer.createAnswer();
}).then(function(answer) {
ansPeer.setLocalDescription(answer);
console.log('answer\n' + JSON.stringify(answer, null, 2));
// Set the answer on the other peer.
return offPeer.setRemoteDescription(answer);
});
// Collect and exchange ICE candidates.
offPeer.onicecandidate = function(e) {
if (e.candidate) {
var ice = e.candidate;
exchangeDescriptions.then(function() {
// Add ICE candidate to other peer.
console.log('offer ICE\n' + JSON.stringify(e.candidate, null, 2));
ansPeer.addIceCandidate(ice);
});
}
else
console.log('offer ICE done');
};
ansPeer.onicecandidate = function(e) {
if (e.candidate) {
var ice = e.candidate;
exchangeDescriptions.then(function() {
// Add ICE candidate to other peer.
console.log('answer ICE\n' + JSON.stringify(e.candidate, null, 2));
offPeer.addIceCandidate(ice);
});
}
else
console.log('answer ICE done');
};
请注意 jsfiddle page I am using the WebRTC adapter 将浏览器 API 填充到规范中。
当您 运行 此脚本打开 Javascript 控制台时,我希望看到报告的 DataChannel 在所有日志记录中打开:
***** offering channel open *****
***** answering channel open *****
我确实在 Firefox 43 上看到了这个,但在 Chrome 48(稳定版)或 50(金丝雀版)上看不到。
Chrome 我哪里出错了?我尝试了其他使用 DataChannel 的示例和一些工作,所以我知道 Chrome 支持它。示例代码通常使用较旧的或特定于浏览器的 APIs,我不想简单地复制它们。据我所知,我正在做同样的事情,但显然不是这样。
啊哈,问题似乎出在这个设置上,我从几个网站的示例代码中找到了这个设置:
var RTCPC_OPTIONAL = { optional: [{ RtpDataChannels: true }] };
显然 RtpDataChannels
是遗留的 Chrome 东西,即 no longer supported. If I remove that extra argument from the RTCPeerConnection
constructors then things work on Chrome。
我 filed an issue 在 Chrome。