Merge branch 'main' into jose/vertical-waveform

README.md

@@ -6,11 +6,16 @@ Reflector is a React application that uses WebRTC to stream audio from the brows
 
 - [Reflector React App](#reflector-react-app)
   - [Table of Contents](#table-of-contents)
+  - [Project Architecture](#project-architecture)
   - [Installation](#installation)
   - [Run the Application](#run-the-application)
   - [WebRTC Integration](#webrtc-integration)
   - [Contribution Guidelines](#contribution-guidelines)
 
+## Project Architecture
+
+![Project Architecture](ProjectArchitecture.jpg)
+
 ## Installation
 
 To install the application, run:

app/components/webrtc.js

@@ -1,6 +1,8 @@
 import { useEffect, useState } from "react";
 import Peer from "simple-peer";
 
+const WebRTC_SERVER_URL = "http://127.0.0.1:1250/offer";
+
 const useWebRTC = (stream) => {
   const [data, setData] = useState(null);
 
@@ -11,7 +13,27 @@ const useWebRTC = (stream) => {
       // This is where you'd send the signal data to the server.
       // The server would then send it back to other peers who would then
       // use `peer.signal()` method to continue the connection negotiation.
-      console.log("signal", data);
+      if ("sdp" in data) {
+        fetch(WebRTC_SERVER_URL, {
+          body: JSON.stringify({
+            sdp: data.sdp,
+            type: data.type,
+          }),
+          headers: {
+            "Content-Type": "application/json",
+          },
+          method: "POST",
+        })
+          .then(function (response) {
+            return response.json();
+          })
+          .then(function (answer) {
+            return peer.signal(answer);
+          })
+          .catch(function (e) {
+            alert(e);
+          });
+      }
     });
 
     peer.on("connect", () => {
@@ -20,6 +42,7 @@ const useWebRTC = (stream) => {
 
     peer.on("data", (data) => {
       // Received data from the server.
+      console.log(data.toString());
       const serverData = JSON.parse(data.toString());
       setData(serverData);
     });

package-lock.json

@@ -7,6 +7,7 @@
     "": {
       "name": "reflector-ui",
       "version": "0.1.0",
+      "license": "MIT",
       "dependencies": {
         "autoprefixer": "10.4.14",
         "next": "^13.4.9",
@@ -16,6 +17,9 @@
         "simple-peer": "^9.11.1",
         "supports-color": "^9.4.0",
         "tailwindcss": "^3.3.2"
+      },
+      "devDependencies": {
+        "prettier": "^3.0.0"
       }
     },
     "node_modules/@alloc/quick-lru": {
@@ -1170,6 +1174,21 @@
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
     },
+    "node_modules/prettier": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.0.0.tgz",
+      "integrity": "sha512-zBf5eHpwHOGPC47h0zrPyNn+eAEIdEzfywMoYn2XPi0P44Zp0tSq64rq0xAREh4auw2cJZHo9QUob+NqCQky4g==",
+      "dev": true,
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",