Skip to content

Realtime database #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Realtime database #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d7a16b3
firebase init
Z-Nikolov Jul 1, 2021
ac4cfb8
database storing the data
Z-Nikolov Jul 2, 2021
029dcff
cleaning code
Z-Nikolov Jul 2, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 3 additions & 5 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,6 @@ <h3>Local Stream</h3>
<h3>Remote Stream</h3>
<video id="remoteVideo" autoplay playsinline></video>
</span>


</div>

<button id="webcamButton">Start webcam</button>
Expand All @@ -27,15 +25,15 @@ <h2>2. Create a new Call</h2>

<h2>3. Join a Call</h2>
<p>Answer the call from a different browser window or device</p>

<input id="callInput" />

<!-- <input id="callInput" /> -->
<input id="databaseID" />
<button id="answerButton" disabled>Answer</button>

<h2>4. Hangup</h2>

<button id="hangupButton" disabled>Hangup</button>

<script type="module" src="/main.js"></script>

</body>
</html>
128 changes: 93 additions & 35 deletions main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,24 @@ import './style.css';

import firebase from 'firebase/app';
import 'firebase/firestore';
import 'firebase/database';

const firebaseConfig = {
// your config
apiKey: "AIzaSyAMlK4Jz60lEYnZvcFzGo-JqOPQ-Q2oXP0",
authDomain: "web-rtc-b2af7.firebaseapp.com",
databaseURL: "https://web-rtc-b2af7-default-rtdb.europe-west1.firebasedatabase.app",
projectId: "web-rtc-b2af7",
storageBucket: "web-rtc-b2af7.appspot.com",
messagingSenderId: "593149952785",
appId: "1:593149952785:web:1867797b5db06dac09c2b0"
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I know this pr is old but did you literally put your own credentials on a public repo??

};

if (!firebase.apps.length) {
firebase.initializeApp(firebaseConfig);
}
const firestore = firebase.firestore();
const database = firebase.database();


const servers = {
iceServers: [
Expand All @@ -35,6 +44,8 @@ const answerButton = document.getElementById('answerButton');
const remoteVideo = document.getElementById('remoteVideo');
const hangupButton = document.getElementById('hangupButton');

//
const databaseID = document.getElementById('databaseID')
// 1. Setup media sources

webcamButton.onclick = async () => {
Expand Down Expand Up @@ -64,15 +75,25 @@ webcamButton.onclick = async () => {
// 2. Create an offer
callButton.onclick = async () => {
// Reference Firestore collections for signaling
const callDoc = firestore.collection('calls').doc();
const offerCandidates = callDoc.collection('offerCandidates');
const answerCandidates = callDoc.collection('answerCandidates');
// const callDoc = firestore.collection('calls').doc();
// const offerCandidates = callDoc.collection('offerCandidates');
// const answerCandidates = callDoc.collection('answerCandidates');

// database test below
const callRef = database.ref('calls').push()
const offerCandidates2 = callRef.child('offerCandidates')
const answerCandidates2 = callRef.child('answerCandidates')

database.ref("calls").on("child_added", (snapshot) => {
databaseID.value = snapshot.key
})

callInput.value = callDoc.id;
// callInput.value = callDoc.id;// add value from snapshot here

// Get candidates for caller, save to db
pc.onicecandidate = (event) => {
event.candidate && offerCandidates.add(event.candidate.toJSON());
// event.candidate && offerCandidates.add(event.candidate.toJSON());
event.candidate && offerCandidates2.push(event.candidate.toJSON()) // database
};

// Create offer
Expand All @@ -84,42 +105,70 @@ callButton.onclick = async () => {
type: offerDescription.type,
};

await callDoc.set({ offer });
// await callDoc.set({ offer });
await callRef.child('protocols').set({ offer }); // setting in database

// Listen for remote answer
callDoc.onSnapshot((snapshot) => {
const data = snapshot.data();
if (!pc.currentRemoteDescription && data?.answer) {
const answerDescription = new RTCSessionDescription(data.answer);
// callDoc.onSnapshot((snapshot) => {
// const data = snapshot.data();
// if (!pc.currentRemoteDescription && data?.answer) {
// const answerDescription = new RTCSessionDescription(data.answer);
// pc.setRemoteDescription(answerDescription);
// }
// });

// database implemented
callRef.child('protocols').on('child_added', (snapshot) => {
const snapData = snapshot.val()
if (!pc.currentRemoteDescription && snapData.type === 'answer') {
const answerDescription = new RTCSessionDescription(snapData);
pc.setRemoteDescription(answerDescription);
}
});

// When answered, add candidate to peer connection
answerCandidates.onSnapshot((snapshot) => {
snapshot.docChanges().forEach((change) => {
if (change.type === 'added') {
const candidate = new RTCIceCandidate(change.doc.data());
pc.addIceCandidate(candidate);
}
});
});
// answerCandidates.onSnapshot((snapshot) => {
// snapshot.docChanges().forEach((change) => {
// if (change.type === 'added') {
// console.log(change.doc.data());
// const candidate = new RTCIceCandidate(change.doc.data());
// pc.addIceCandidate(candidate);
// }
// });
// });

// database implemented
answerCandidates2.on('child_added', (snapshot) => {
const candidate = new RTCIceCandidate(snapshot.val());
pc.addIceCandidate(candidate);
})

hangupButton.disabled = false;
};

// 3. Answer the call with the unique ID
answerButton.onclick = async () => {
const callId = callInput.value;
const callDoc = firestore.collection('calls').doc(callId);
const answerCandidates = callDoc.collection('answerCandidates');
const offerCandidates = callDoc.collection('offerCandidates');
// const callId = callInput.value;
// const callDoc = firestore.collection('calls').doc(callId);
// const answerCandidates = callDoc.collection('answerCandidates');
// const offerCandidates = callDoc.collection('offerCandidates');

// database variables below
const callIdDatabase = databaseID.value
const callRef = database.ref('calls').child(callIdDatabase);
const answerCandidates2 = callRef.child('answerCandidates');
const offerCandidates2 = callRef.child('offerCandidates');
// end database variables

pc.onicecandidate = (event) => {
event.candidate && answerCandidates.add(event.candidate.toJSON());
// event.candidate && answerCandidates.add(event.candidate.toJSON());
event.candidate && answerCandidates2.push(event.candidate.toJSON());
};

const callData = (await callDoc.get()).data();
// const callData = (await callDoc.get()).data();

// database
const callData = (await callRef.child('protocols').get()).val();

const offerDescription = callData.offer;
await pc.setRemoteDescription(new RTCSessionDescription(offerDescription));
Expand All @@ -132,15 +181,24 @@ answerButton.onclick = async () => {
sdp: answerDescription.sdp,
};

await callDoc.update({ answer });
// await callDoc.update({ answer });
await callRef.child('protocols').update({ answer }); // setting in database

// offerCandidates.onSnapshot((snapshot) => {
// snapshot.docChanges().forEach((change) => {
// console.log(change);
// if (change.type === 'added') {
// let data = change.doc.data();
// // console.log(data)
// pc.addIceCandidate(new RTCIceCandidate(data));
// }
// });
// });

offerCandidates2.on('child_added', (snapshot) => {
pc.addIceCandidate(new RTCIceCandidate(snapshot.val()));
console.log("ICE candidate added")
})


offerCandidates.onSnapshot((snapshot) => {
snapshot.docChanges().forEach((change) => {
console.log(change);
if (change.type === 'added') {
let data = change.doc.data();
pc.addIceCandidate(new RTCIceCandidate(data));
}
});
});
};
Loading