Network adapter for networked-aframe that uses Firebase as a backend.
git clone https://github.com/networked-aframe/naf-firebase-adapter
cd naf-firebase-adapter
npm install # or use yarn
# Set firebase credentials in example/index.html
npm start
With the server running, browse the example at http://localhost:8080. Open another browser tab and point it to the same URL to see the other client.
Firebase is a "serverless" network solution provided by Google. In NAF's case it can be used to establish connections between clients in a peer-to-peer fashion, without having to host a signalling (connection) server.
Steps to setup Firebase:
- Sign up for a Firebase account
- Create a new Firebase project
- Go to Database -> Realtime Database -> Rules and change them to the following (warning: not safe for production, just developing)
{
"rules": {
".read": true,
".write": true
}
}- Click publish
- Go back to the project overview
- Click "Add Firebase to your web app"
- Copy the credentials into your HTML page
After setting up firebase include and configure naf-firebase-adapter.
<html>
<head>
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<script src="https://unpkg.com/networked-aframe/dist/networked-aframe.min.js"></script>
<!-- Include naf-firebase-adapter *after* networked-aframe -->
<script src="https://unpkg.com/naf-firebase-adapter/dist/naf-firebase-adapter.min.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.13.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.13.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.13.1/firebase-database.js"></script>/script>
<!-- Set the Firebase credentials -->
<script>
window.firebaseConfig = {
authType: 'none',
apiKey: 'your-api-key',
authDomain: 'xxx.firebaseapp.com',
databaseURL: 'https://xxx.firebaseio.com',
projectId: "your-projectId",
storageBucket: "your-storageBucket",
messagingSenderId: "your-messagingSenderId",
appId: "your-appId",
measurementId: "your-measurementId"
};
</script>
</head>
<body>
<!-- Set adapter to firebase -->
<a-scene networked-scene="
adapter: firebase;
">
</a-scene>
</body>
</html>