apps/BareRTC
1
0
Fork 0
Code Issues 14 Pull Requests Packages Projects Releases Wiki Activity

Cleanup JS console logs

Browse Source
This commit is contained in:
Noah 2023-02-06 13:33:09 -08:00
parent 9487595e04
commit e84cc146ad
1 changed files with 5 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
web/static/js/BareRTC.js
View File

@ -1,4 +1,4 @@
console.log("BareRTC!"); // console.log("BareRTC!");
// WebRTC configuration. // WebRTC configuration.
const configuration = { const configuration = {
@ -212,7 +212,7 @@ const app = Vue.createApp({
return; return;
} }
console.debug("Send message: %s", this.message); // console.debug("Send message: %s", this.message);
this.ws.conn.send(JSON.stringify({ this.ws.conn.send(JSON.stringify({
action: "message", action: "message",
channel: this.channel, channel: this.channel,
@ -273,7 +273,7 @@ const app = Vue.createApp({
onOpen(msg) { onOpen(msg) {
// Response for the opener to begin WebRTC connection. // Response for the opener to begin WebRTC connection.
const secret = msg.openSecret; const secret = msg.openSecret;
console.log("OPEN: connect to %s with secret %s", msg.username, secret); // console.log("OPEN: connect to %s with secret %s", msg.username, secret);
// this.ChatClient(`onOpen called for ${msg.username}.`); // this.ChatClient(`onOpen called for ${msg.username}.`);
this.startWebRTC(msg.username, true); this.startWebRTC(msg.username, true);
@ -281,7 +281,7 @@ const app = Vue.createApp({
onRing(msg) { onRing(msg) {
// Message for the receiver to begin WebRTC connection. // Message for the receiver to begin WebRTC connection.
const secret = msg.openSecret; const secret = msg.openSecret;
console.log("RING: connection from %s with secret %s", msg.username, secret); // console.log("RING: connection from %s with secret %s", msg.username, secret);
this.ChatServer(`${msg.username} has opened your camera.`); this.ChatServer(`${msg.username} has opened your camera.`);
this.startWebRTC(msg.username, false); this.startWebRTC(msg.username, false);
@ -347,7 +347,7 @@ const app = Vue.createApp({
// Dial the WebSocket connection. // Dial the WebSocket connection.
dial() { dial() {
console.log("Dialing WebSocket..."); // console.log("Dialing WebSocket...");
const proto = location.protocol === 'https:' ? 'wss' : 'ws'; const proto = location.protocol === 'https:' ? 'wss' : 'ws';
const conn = new WebSocket(`${proto}://${location.host}/ws`); const conn = new WebSocket(`${proto}://${location.host}/ws`);
@ -377,7 +377,6 @@ const app = Vue.createApp({
}); });
conn.addEventListener("message", ev => { conn.addEventListener("message", ev => {
console.log(ev);
if (typeof ev.data !== "string") { if (typeof ev.data !== "string") {
console.error("unexpected message type", typeof ev.data); console.error("unexpected message type", typeof ev.data);
return; return;
@ -393,11 +392,9 @@ const app = Vue.createApp({
switch (msg.action) { switch (msg.action) {
case "who": case "who":
console.log("Got the Who List: %s", msg);
this.onWho(msg); this.onWho(msg);
break; break;
case "me": case "me":
console.log("Got a self-update: %s", msg);
this.onMe(msg); this.onMe(msg);
break; break;
case "message": case "message":
@ -434,7 +431,6 @@ const app = Vue.createApp({
}); });
break; break;
case "ping": case "ping":
console.debug("Received ping from server");
break; break;
default: default:
console.error("Unexpected action: %s", JSON.stringify(msg)); console.error("Unexpected action: %s", JSON.stringify(msg));
@ -464,11 +460,7 @@ const app = Vue.createApp({
// 'onicecandidate' notifies us whenever an ICE agent needs to deliver a // 'onicecandidate' notifies us whenever an ICE agent needs to deliver a
// message to the other peer through the signaling server. // message to the other peer through the signaling server.
pc.onicecandidate = event => { pc.onicecandidate = event => {
console.error("WebRTC OnICECandidate called!", event);
// this.ChatClient("On ICE Candidate called!");
if (event.candidate) { if (event.candidate) {
// this.ChatClient(`Send ICE candidate: ${JSON.stringify(event.candidate)}`);
console.log("Sending candidate to websockets:", event.candidate);
this.ws.conn.send(JSON.stringify({ this.ws.conn.send(JSON.stringify({
action: "candidate", action: "candidate",
username: username, username: username,
@ -479,18 +471,13 @@ const app = Vue.createApp({
// If the user is offerer let the 'negotiationneeded' event create the offer. // If the user is offerer let the 'negotiationneeded' event create the offer.
if (isOfferer) { if (isOfferer) {
// this.ChatClient("We are the offerer - set up onNegotiationNeeded");
pc.onnegotiationneeded = () => { pc.onnegotiationneeded = () => {
console.error("WebRTC OnNegotiationNeeded called!");
// this.ChatClient("Negotiation Needed, creating WebRTC offer.");
pc.createOffer().then(this.localDescCreated(pc, username)).catch(this.ChatClient); pc.createOffer().then(this.localDescCreated(pc, username)).catch(this.ChatClient);
}; };
} }
// When a remote stream arrives. // When a remote stream arrives.
pc.ontrack = event => { pc.ontrack = event => {
// this.ChatServer("ON TRACK CALLED!!!");
console.error("WebRTC OnTrack called!", event);
const stream = event.streams[0]; const stream = event.streams[0];
// Do we already have it? // Do we already have it?
@ -502,9 +489,7 @@ const app = Vue.createApp({
window.requestAnimationFrame(() => { window.requestAnimationFrame(() => {
let $ref = document.getElementById(`videofeed-${username}`); let $ref = document.getElementById(`videofeed-${username}`);
console.log("Video elem:", $ref);
$ref.srcObject = stream; $ref.srcObject = stream;
// this.$refs[`videofeed-${username}`].srcObject = stream;
}); });
// Inform them they are being watched. // Inform them they are being watched.
@ -520,7 +505,6 @@ const app = Vue.createApp({
// this.ChatClient(`Sharing our video stream to ${username}.`); // this.ChatClient(`Sharing our video stream to ${username}.`);
let stream = this.webcam.stream; let stream = this.webcam.stream;
stream.getTracks().forEach(track => { stream.getTracks().forEach(track => {
console.error("Add stream track to WebRTC", stream, track);
pc.addTrack(track, stream) pc.addTrack(track, stream)
}); });
} }
@ -554,16 +538,12 @@ const app = Vue.createApp({
// Handle inbound WebRTC signaling messages proxied by the websocket. // Handle inbound WebRTC signaling messages proxied by the websocket.
onCandidate(msg) { onCandidate(msg) {
console.error("onCandidate() called:", msg);
if (this.WebRTC.pc[msg.username] == undefined) { if (this.WebRTC.pc[msg.username] == undefined) {
console.error("DID NOT FIND RTCPeerConnection for username:", msg.username);
return; return;
} }
let pc = this.WebRTC.pc[msg.username]; let pc = this.WebRTC.pc[msg.username];
// Add the new ICE candidate. // Add the new ICE candidate.
console.log("Add ICE candidate: %s", msg.candidate);
// this.ChatClient(`Received an ICE candidate from ${msg.username}: ${JSON.stringify(msg.candidate)}`);
pc.addIceCandidate( pc.addIceCandidate(
new RTCIceCandidate( new RTCIceCandidate(
msg.candidate, msg.candidate,
@ -573,34 +553,17 @@ const app = Vue.createApp({
); );
}, },
onSDP(msg) { onSDP(msg) {
console.error("onSDP() called:", msg);
if (this.WebRTC.pc[msg.username] == undefined) { if (this.WebRTC.pc[msg.username] == undefined) {
console.error("DID NOT FIND RTCPeerConnection for username:", msg.username);
return; return;
} }
let pc = this.WebRTC.pc[msg.username]; let pc = this.WebRTC.pc[msg.username];
let message = msg.description; let message = msg.description;
// Add the new ICE candidate. // Add the new ICE candidate.
console.log("Set description:", message);
// this.ChatClient(`Received a Remote Description from ${msg.username}: ${JSON.stringify(msg.description)}.`); // this.ChatClient(`Received a Remote Description from ${msg.username}: ${JSON.stringify(msg.description)}.`);
pc.setRemoteDescription(new RTCSessionDescription(message), () => { pc.setRemoteDescription(new RTCSessionDescription(message), () => {
// When receiving an offer let's answer it. // When receiving an offer let's answer it.
if (pc.remoteDescription.type === 'offer') { if (pc.remoteDescription.type === 'offer') {
console.error("Webcam:", this.webcam);
// Add our local video tracks to the connection.
// if (this.webcam.active) {
// this.ChatClient(`Sharing our video stream to ${msg.username}.`);
// let stream = this.webcam.stream;
// stream.getTracks().forEach(track => {
// console.error("Add stream track to WebRTC", stream, track);
// pc.addTrack(track, stream)
// });
// }
// this.ChatClient(`setRemoteDescription callback. Offer recieved - sending answer. Cam active? ${this.webcam.active}`);
console.warn("Creating answer now");
pc.createAnswer().then(this.localDescCreated(pc, msg.username)).catch(this.ChatClient); pc.createAnswer().then(this.localDescCreated(pc, msg.username)).catch(this.ChatClient);
} }
}, console.error); }, console.error);
@ -834,7 +797,6 @@ const app = Vue.createApp({
muteMe() { muteMe() {
this.webcam.muted = !this.webcam.muted; this.webcam.muted = !this.webcam.muted;
this.webcam.stream.getAudioTracks().forEach(track => { this.webcam.stream.getAudioTracks().forEach(track => {
console.error("Set audio track enabled=%s", !this.webcam.muted, track);
track.enabled = !this.webcam.muted; track.enabled = !this.webcam.muted;
}); });
}, },
@ -843,11 +805,9 @@ const app = Vue.createApp({
}, },
muteVideo(username) { muteVideo(username) {
this.WebRTC.muted[username] = !this.isMuted(username); this.WebRTC.muted[username] = !this.isMuted(username);
console.error("muteVideo(%s) is not muted=%s", username, this.WebRTC.muted[username]);
// Find the <video> tag to mute it. // Find the <video> tag to mute it.
let $ref = document.getElementById(`videofeed-${username}`); let $ref = document.getElementById(`videofeed-${username}`);
console.log("Video elem:", $ref);
if ($ref) { if ($ref) {
$ref.muted = this.WebRTC.muted[username]; $ref.muted = this.WebRTC.muted[username];
} }
@ -980,8 +940,6 @@ const app = Vue.createApp({
return; return;
} }
console.error("AudioContext:", this.config.sounds.audioContext);
// Create <audio> elements for all the sounds. // Create <audio> elements for all the sounds.
for (let effect of this.config.sounds.available) { for (let effect of this.config.sounds.available) {
if (!effect.filename) continue; // 'Quiet' has no audio if (!effect.filename) continue; // 'Quiet' has no audio
@ -994,8 +952,6 @@ const app = Vue.createApp({
let track = this.config.sounds.audioContext.createMediaElementSource(elem); let track = this.config.sounds.audioContext.createMediaElementSource(elem);
track.connect(this.config.sounds.audioContext.destination); track.connect(this.config.sounds.audioContext.destination);
this.config.sounds.audioTracks[effect.name] = elem; this.config.sounds.audioTracks[effect.name] = elem;
console.warn(effect.name, this.config.sounds.audioTracks[effect.name]);
} }
// Apply the user's saved preferences if any. // Apply the user's saved preferences if any.
@ -1008,14 +964,10 @@ const app = Vue.createApp({
playSound(event) { playSound(event) {
let filename = this.config.sounds.settings[event]; let filename = this.config.sounds.settings[event];
console.error("Play sound:", event, filename, JSON.stringify(this.config.sounds));
// Do we have an audio track? // Do we have an audio track?
console.log(this.config.sounds.audioTracks[filename]);
if (this.config.sounds.audioTracks[filename] != undefined) { if (this.config.sounds.audioTracks[filename] != undefined) {
let track = this.config.sounds.audioTracks[filename]; let track = this.config.sounds.audioTracks[filename];
console.log("Track:", track);
track.play(); track.play();
console.log("Playing %s", filename);
} }
}, },