Кнопка WebRTC OnClick не вызывает необходимую функцию - PullRequest
0 голосов
/ 12 октября 2019

Все,

Следуя руководству 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
	});
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...