remove buttons

This commit is contained in:
ian ramzy 2020-03-21 17:50:35 -04:00
parent 1ea59dcd6b
commit 5d7e55f7bf
2 changed files with 26 additions and 35 deletions

View File

@ -12,15 +12,19 @@ function logIt(message, error) {
logs.appendChild(tmp); logs.appendChild(tmp);
} }
// var willCall = false;
var firstIn = false
// var connected = false;
// Create an object to save various objects to without polluting the global namespace. // Create an object to save various objects to without polluting the global namespace.
var VideoChat = { var VideoChat = {
connected: false, connected: false,
firstInChat : false,
localICECandidates: [], localICECandidates: [],
remoteVideo: document.getElementById('remote-video'),
localVideo: document.getElementById('local-video'),
// videoButton: document.getElementById('get-video'),
// screenButton: document.getElementById('get-screen'),
// callButton: document.getElementById('call'),
// Initialise our connection to the WebSocket.
// Initialise our connection to the WebSocket.
socket: io(), socket: io(),
// Call to getUserMedia (provided by adapter.js for cross browser compatibility) // Call to getUserMedia (provided by adapter.js for cross browser compatibility)
@ -51,18 +55,17 @@ var VideoChat = {
// The onMediaStream function receives the media stream as an argument. // The onMediaStream function receives the media stream as an argument.
onMediaStream: function (stream) { onMediaStream: function (stream) {
VideoChat.localVideo = document.getElementById('local-video');
VideoChat.localVideo.volume = 0; // Turn the volume down to 0 to avoid echoes. VideoChat.localVideo.volume = 0; // Turn the volume down to 0 to avoid echoes.
VideoChat.localStream = stream; VideoChat.localStream = stream;
VideoChat.videoButton.setAttribute('disabled', 'disabled'); // VideoChat.videoButton.setAttribute('disabled', 'disabled');
VideoChat.screenButton.setAttribute('disabled', 'disabled'); // VideoChat.screenButton.setAttribute('disabled', 'disabled');
// Add the stream as video's srcObject. // Add the stream as video's srcObject.
VideoChat.localVideo.srcObject = stream; VideoChat.localVideo.srcObject = stream;
// Now we're ready to join the chat room. // Now we're ready to join the chat room.
VideoChat.socket.emit('join', 'test'); VideoChat.socket.emit('join', 'test');
VideoChat.socket.on('offer', VideoChat.onOffer); VideoChat.socket.on('offer', VideoChat.onOffer);
VideoChat.socket.on('ready', VideoChat.readyToCall); VideoChat.socket.on('ready', VideoChat.readyToCall);
VideoChat.socket.on('firstin', () => firstIn = true); VideoChat.socket.on('firstin', () => VideoChat.firstInChat = true);
}, },
// There's not much to do in this demo if there is no media stream. So let's just stop. // There's not much to do in this demo if there is no media stream. So let's just stop.
@ -72,8 +75,8 @@ var VideoChat = {
// When we are ready to call, enable the Call button. // When we are ready to call, enable the Call button.
readyToCall: function (event) { readyToCall: function (event) {
VideoChat.callButton.removeAttribute('disabled'); // VideoChat.callButton.removeAttribute('disabled');
if (firstIn) { if (VideoChat.firstInChat) {
// alert("firstin is calling") // alert("firstin is calling")
VideoChat.startCall() VideoChat.startCall()
} }
@ -85,7 +88,7 @@ var VideoChat = {
logIt('>>> Sending token request...'); logIt('>>> Sending token request...');
VideoChat.socket.on('token', VideoChat.onToken(VideoChat.createOffer)); VideoChat.socket.on('token', VideoChat.onToken(VideoChat.createOffer));
VideoChat.socket.emit('token'); VideoChat.socket.emit('token');
VideoChat.callButton.disabled = true // VideoChat.callButton.disabled = true
}, },
// When we receive the ephemeral token back from the server. // When we receive the ephemeral token back from the server.
@ -165,12 +168,11 @@ var VideoChat = {
VideoChat.peerConnection.setRemoteDescription(rtcOffer); VideoChat.peerConnection.setRemoteDescription(rtcOffer);
VideoChat.peerConnection.createAnswer( VideoChat.peerConnection.createAnswer(
function (answer) { function (answer) {
console.log(answer);
VideoChat.peerConnection.setLocalDescription(answer); VideoChat.peerConnection.setLocalDescription(answer);
VideoChat.socket.emit('answer', JSON.stringify(answer)); VideoChat.socket.emit('answer', JSON.stringify(answer));
}, },
function (err) { function (err) {
// Handle a failed answer creation. logIt("Failed answer creation.");
logIt(err, true); logIt(err, true);
} }
); );
@ -193,12 +195,11 @@ var VideoChat = {
VideoChat.peerConnection.setRemoteDescription(rtcAnswer); VideoChat.peerConnection.setRemoteDescription(rtcAnswer);
VideoChat.connected = true; VideoChat.connected = true;
VideoChat.localICECandidates.forEach(candidate => { VideoChat.localICECandidates.forEach(candidate => {
// The caller now knows that the callee is ready to accept new // The caller now knows that the callee is ready to accept new ICE candidates, so sending the buffer over
// ICE candidates, so sending the buffer over
logIt(`>>> Sending local ICE candidate (${candidate.address})`); logIt(`>>> Sending local ICE candidate (${candidate.address})`);
VideoChat.socket.emit('candidate', JSON.stringify(candidate)); VideoChat.socket.emit('candidate', JSON.stringify(candidate));
}); });
// Resest the buffer of local ICE candidates. This is not really needed // Reset the buffer of local ICE candidates. This is not really needed
// in this specific client, but it's good practice // in this specific client, but it's good practice
VideoChat.localICECandidates = []; VideoChat.localICECandidates = [];
}, },
@ -207,22 +208,12 @@ var VideoChat = {
// browser, add it to the other video element on the page. // browser, add it to the other video element on the page.
onAddStream: function (event) { onAddStream: function (event) {
logIt('<<< Received new stream from remote. Adding it...'); logIt('<<< Received new stream from remote. Adding it...');
VideoChat.remoteVideo = document.getElementById('remote-video');
VideoChat.remoteVideo.srcObject = event.stream; VideoChat.remoteVideo.srcObject = event.stream;
// VideoChat.remoteVideo.volume = 1;
} }
}; };
// VideoChat.videoButton.addEventListener('click', VideoChat.requestMediaStream, false);
// Get the video button and add a click listener to start the getUserMedia // VideoChat.screenButton.addEventListener('click', VideoChat.requestScreenStream, false);
// process // VideoChat.callButton.addEventListener('click', VideoChat.startCall, false);
VideoChat.videoButton = document.getElementById('get-video');
VideoChat.videoButton.addEventListener('click', VideoChat.requestMediaStream, false);
VideoChat.screenButton = document.getElementById('get-screen');
VideoChat.screenButton.addEventListener('click', VideoChat.requestScreenStream, false);
VideoChat.callButton = document.getElementById('call');
VideoChat.callButton.addEventListener('click', VideoChat.startCall, false);
// auto get media // auto get media
// VideoChat.requestScreenStream(); // VideoChat.requestScreenStream();

View File

@ -42,12 +42,12 @@
<link rel="stylesheet" href="main.css"> <link rel="stylesheet" href="main.css">
</head> </head>
<body> <body>
<div> <!--<div>-->
<button id="get-video">Share Webcam</button> <!-- <button id="get-video">Share Webcam</button>-->
<button id="get-screen">Share Screen</button> <!-- <button id="get-screen">Share Screen</button>-->
<button id="call" disabled="disabled">Call</button> <!-- <button id="call" disabled="disabled">Call</button>-->
<button id="will-call">Will Call</button> <!-- <button id="will-call">Will Call</button>-->
</div> <!--</div>-->
<video id="remote-video" height="500" autoplay></video> <video id="remote-video" height="500" autoplay></video>