webRTC ReferenceError: webkitRTCPeerConnection is not defined
webRTC ReferenceError: webkitRTCPeerConnection is not defined
我正在学习关于学习 WebRTC 的书并创建一个演示 4 章。我在控制台中遇到错误:
ReferenceError: webkitRTCPeerConnection is not defined
并且不明白我可以向 "iceServers":
这是我的 javascript 代码
function hasUserMedia(){
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
return !!navigator.getUserMedia;
}
function hasRTCPeerConnection() {
window.RTCPeerConnection = window.RTCPeerConnection || window.webkitRTCPeerConnection || window.mozRTCPeerConnection;
return !!window.RTCPeerConnection;
}
//This function will create our RTCPeerConnection objects, set up the SDP offer and response, and find the ICE candidates for both peers. page 48
function startPeerConnection(stream) {
var configuration = {
// Uncomment this code to add custom iceServers
"iceServers": [{ "url": "stun:stun.1.google.com:19302" }]
};
yourConnection = new webkitRTCPeerConnection(configuration);
theirConnection = new webkitRTCPeerConnection(configuration);
// Setup stream listening
yourConnection.addStream(stream);
theirConnection.onaddstream = function (e) {
theirVideo.src = window.URL.createObjectURL(e.stream);
};
// Setup ice handling
yourConnection.onicecandidate = function (event) {
if (event.candidate){
theirConnection.addIceCandidate(new RTCIceCandidate(event.candidate));
}
};
theirConnection.onicecandidate = function (event) {
if (event.candidate) {
yourConnection.addIceCandidate(new RTCIceCandidate(event.candidate));
}
};
// Begin the offer
yourConnection.createOffer(function (offer) {
yourConnection.setLocalDescription(offer);
theirConnection.setRemoteDescription(offer);
theirConnection.createAnswer(function (offer) {
theirConnection.setLocalDescription(offer);
yourConnection.setRemoteDescription(offer);
});
});
}
var yourVideo = document.querySelector("#yours"),
theirVideo = document.querySelector("#theirs"),
yourConnection, theirConnection;
if (hasUserMedia()) {
navigator.getUserMedia({ video: true, audio: false }, function (stream) {
yourVideo.src = window.URL.createObjectURL(stream);
if (hasRTCPeerConnection()) {
startPeerConnection(stream);
} else {
alert("Sorry, your browser does not support WebRTC.");
}
}, function (error) {
console.log(error);
}
);
} else {
alert("Sorry, your browser does not support WebRTC.");
}
它的输出是这样的..
请告诉我为什么我的视频无法正常播放?请帮我做这个
变化:
yourConnection = new webkitRTCPeerConnection(configuration);
进入:
yourConnection = new RTCPeerConnection(configuration);
因为 webkitRTCPeerConnection
适用于 Chrome 浏览器,并且代码已经在 hasRTCPeerConnection
中定义了 window.RTCPeerConnection
因此它适用于大多数浏览器(包括您正在使用的 Firefox ).
[编辑]
你的逻辑在这个程序中不正确。您正在这样创建两个连接:
yourConnection = new webkitRTCPeerConnection(configuration);
theirConnection = new webkitRTCPeerConnection(configuration);
这不合逻辑。您的程序是 2 点连接的一个点。您只需要设置连接。此外,您需要某种消息传递服务器来在两个对等点之间传输 SDP 消息。这不是ICE服务器的作用。
您的 ICE 配置没有问题。您正在使用 public Google STUN 服务器来处理建立 WebRTC 连接所需的流媒体和 public IP 发现。
我正在学习关于学习 WebRTC 的书并创建一个演示 4 章。我在控制台中遇到错误:
ReferenceError: webkitRTCPeerConnection is not defined
并且不明白我可以向 "iceServers":
这是我的 javascript 代码
function hasUserMedia(){
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
return !!navigator.getUserMedia;
}
function hasRTCPeerConnection() {
window.RTCPeerConnection = window.RTCPeerConnection || window.webkitRTCPeerConnection || window.mozRTCPeerConnection;
return !!window.RTCPeerConnection;
}
//This function will create our RTCPeerConnection objects, set up the SDP offer and response, and find the ICE candidates for both peers. page 48
function startPeerConnection(stream) {
var configuration = {
// Uncomment this code to add custom iceServers
"iceServers": [{ "url": "stun:stun.1.google.com:19302" }]
};
yourConnection = new webkitRTCPeerConnection(configuration);
theirConnection = new webkitRTCPeerConnection(configuration);
// Setup stream listening
yourConnection.addStream(stream);
theirConnection.onaddstream = function (e) {
theirVideo.src = window.URL.createObjectURL(e.stream);
};
// Setup ice handling
yourConnection.onicecandidate = function (event) {
if (event.candidate){
theirConnection.addIceCandidate(new RTCIceCandidate(event.candidate));
}
};
theirConnection.onicecandidate = function (event) {
if (event.candidate) {
yourConnection.addIceCandidate(new RTCIceCandidate(event.candidate));
}
};
// Begin the offer
yourConnection.createOffer(function (offer) {
yourConnection.setLocalDescription(offer);
theirConnection.setRemoteDescription(offer);
theirConnection.createAnswer(function (offer) {
theirConnection.setLocalDescription(offer);
yourConnection.setRemoteDescription(offer);
});
});
}
var yourVideo = document.querySelector("#yours"),
theirVideo = document.querySelector("#theirs"),
yourConnection, theirConnection;
if (hasUserMedia()) {
navigator.getUserMedia({ video: true, audio: false }, function (stream) {
yourVideo.src = window.URL.createObjectURL(stream);
if (hasRTCPeerConnection()) {
startPeerConnection(stream);
} else {
alert("Sorry, your browser does not support WebRTC.");
}
}, function (error) {
console.log(error);
}
);
} else {
alert("Sorry, your browser does not support WebRTC.");
}
它的输出是这样的..
请告诉我为什么我的视频无法正常播放?请帮我做这个
变化:
yourConnection = new webkitRTCPeerConnection(configuration);
进入:
yourConnection = new RTCPeerConnection(configuration);
因为 webkitRTCPeerConnection
适用于 Chrome 浏览器,并且代码已经在 hasRTCPeerConnection
中定义了 window.RTCPeerConnection
因此它适用于大多数浏览器(包括您正在使用的 Firefox ).
[编辑]
你的逻辑在这个程序中不正确。您正在这样创建两个连接:
yourConnection = new webkitRTCPeerConnection(configuration);
theirConnection = new webkitRTCPeerConnection(configuration);
这不合逻辑。您的程序是 2 点连接的一个点。您只需要设置连接。此外,您需要某种消息传递服务器来在两个对等点之间传输 SDP 消息。这不是ICE服务器的作用。
您的 ICE 配置没有问题。您正在使用 public Google STUN 服务器来处理建立 WebRTC 连接所需的流媒体和 public IP 发现。