Все,
Следуя руководству webrtc по настройке одноранговой веб-страницы, я столкнулся с проблемой с кнопкой | btnGoRoom.onclick = function () |, когда она выбрана, она ничего не делает .. Я проанализировал код, чтобы убрать любые ошибки при наборе текста, и я в растерянности .. любой совет? Я могу предоставить больше информации о выполненной установке или другом файле, если это будет необходимо. Это моя первая попытка написания javascript, немного нового для опций для кнопок, спасибо за любую помощь заранее!
// here we get a reference to the webpage elements
var divSelectRoom = document.getElementById("selectRoom");
var divConsultingRoom = document.getElementById("consultingRoom");
var inputRoomNumber = document.getElementById("roomNumber");
var btnGoRoom = document.getElementById("goRoom");
var localVideo = document.getElementById("localVideo");
var remoteVideo = document.getElementById("remoteVideo");
// these are the global variables
var roomNumber;
var localStream;
var remoteStream;
var rtcPeerConnection;
// these are the STUN servers
var iceServers = {
'iceServers': [
{'url':stun:stun.services.mozilla.com'},
{'url':'stun.stun.i.google.com:19302'}
]
}
var streamConstraints = { audio: true, video: true };
var isCaller;
// here we connect to the socket.io server. We will create it later.
var socket = io();
// here we add a click event to the button
btnGoRoom.onclick = function () {
if (inputRoomNumber.value === "){
alert("Please type a room number")
} else {
roomNumber = inputRoomNumber.value; //we take the value from the element
socket.emit('create or join', roomNumber); //we send a message to the server
divSelectRoom.style = "display: none;"; //hide selectRoom div
divConsultingRoom.style = "display: block;"; //show consultingRoom div
}
};
// when server emits created
socket.on('created', function (room) {
//caller gets user media devices with defined constraints
navigator.mediaDevices.getUserMedia(streamConstraints).then(function (stream){
localStream = stream; //sets local stream to a variable
localVideo.src = URL.createObjectURL(stream); //shows stream to user
isCaller = true; //sets current user as caller
}).catch(function (err) {
console.log('An error ocurred when accessing media devices');
});
});
// when server emits joined
socket.on('joined', functon (room) {
//callee gets user media devices
navigator.mediaDevices.getUserMedia(streamConstraints).then(function (stream){
localStream = stream; //sets local stream to a variable
localVideo.src = URL.createObjectURL(stream); //shows stream to user
socket.emit('ready',roomNumber); //sends message to server
}).catch(function (err) {
console.log('An error ocurred when accessing media devices');
});
});
// when server emits ready
socket.on('ready', function () {
if(isCaller){
// Creates an RTCPeerConnection Object
rtcPeerConnection = new RTCPeerConnection(iceServers);
// Adds event listeners to the newly created oject
rtcPeerConnection.onicecandidate = onIceCandidate;
rtcPeerConnection.onaddStream = onAddStream;
// Adds the current local stream to the object
rtcPeerConnection.addStream(localStream);
// Prepares an Offer
rtcPeerConnection.createOffer(setLocalAndOffer,function(e){console.log(e)});
}
});
// When servers emits offer
socket.on('offer', function (event){
if(!isCaller){
// Creates an RTCPeerConnection object
rtcPeerConnection = new RTCPeerConnection(iceServers);
// Adds event listeners to the newly created object
rtcPeerConnection.onicecandidate = onIceCandidate;
rtcPeerConnection.onaddstream = onAddStream;
// Adds the current local stream to the object
rtcPeerConnection.addStream(localStream);
// Stores the offer as remote description
rtcPeerConnection.setRemoteDescription(new RTCSessionDescription(event));
// Prepares an Answer
rtcPeerConnection.createAnswer(setLocalAndAnswer, function(e){console.log(e)});
}
});
// When server emits answer
socket.on('answer', function (event){
// Stores it as a remote description
rtcPeerConnection.setRemoteDescription(new RTCSessionDescription(event));
});
// When server emits candidate
socket.on('candidate', function (event) {
// Creates a candidate object
var candidate = new RTCIceCandidate({
sdpMLineIndex: event.label,
candidate: event.candidate
});
// Stores candidate
rtcPeerConneciton.addIceCandidate(candidate);
});
// When a user receives the other user's video and audio stream
function onAddStream(event) {
remoteVideo.src = URL.createObjectURL(event.stream);
remoteStream = event.stream;
}
// These are the functions referenced before as listeners for the peer connection
// Sends a candidate message to server
function onIceCandidate(event) {
if (event.candidate) {
console.log('sending ice candidate');
socket.emit('candidate',{
type: 'candidate',
lable: event.candidate.sdpMLineIndex,
id: event.candidate.sdpMid,
candidate: event.candidate.candidate,
room: roomNumber
})
}
}
// Stores offer and sends message to server
function setLocalAndOffer(sessionDescription) {
rtcPeerConnection.setLocalDescription(sessionDescription);
socket.emit('offer',{
type: 'offer',
sdp: sessionDescription,
room: roomNumber
});
}
// Stores answer and sends message to server
function setLocalAndAnswer(sessionDescription){
rtcPeerConnection.setLocalDescription(sessionDescription);
socket.emit('answer',{
type: 'answer',
sdp: sessionDescription,
room: roomNumber
});
}