Skip to content

Latest commit

 

History

History
77 lines (65 loc) · 2.51 KB

README.md

File metadata and controls

77 lines (65 loc) · 2.51 KB
Raw

Networked-AFrame Firebase Adapter

Network adapter for networked-aframe that uses Firebase as a backend.

Running the Example

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.

Setting Up Firebase

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:

  1. Sign up for a Firebase account
  2. Create a new Firebase project
  3. Go to Database -> Realtime Database -> Rules and change them to the following (warning: not safe for production, just developing)
    {
      "rules": {
        ".read": true,
        ".write": true
      }
    }
  1. Click publish
  2. Go back to the project overview
  3. Click "Add Firebase to your web app"
  4. Copy the credentials into your HTML page

Use in an existing project

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>