Add the working Video capabilities developed by Itai

README.md

@@ -1,3 +1,15 @@
 # embeddable-react
 
 This is the starting point to [this article](https://observiq.com/blog/embed-react-in-golang/)
+
+# Starting a video chat using Agora
+1. Create an account and log in here: https://sso2.agora.io/en/login
+2. Create project 
+3. Replace the app ID in the file `ui/src/video/Call.js` with the app ID of the project you created 
+(or use an existing app ID) 
+4. On Agora.io go to the project configuration
+5. Under "Security" enable "Primary Certificate", and delete the "No Certificate".
+6. Scroll down to "Features" and generate a temp RTC token. Use Channel "AParlament_1". 
+7. Replace the token in the aforementioned file with that token
+8. Navigate to https://webdemo.agora.io/basicVideoCall/index.html and fill in the correct details.
+9. Run the project, and then join the call from the page you just visited on the web browser

ui/package.json

@@ -2,10 +2,12 @@
   "name": "todos",
   "version": "0.1.0",
   "private": true,
-  "proxy": "http://localhost:4000",
   "dependencies": {
+    "agora-react-uikit": "^1.2.0",
+    "http-proxy-middleware": "^2.0.6",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
+    "react-router-dom": "^6.9.0",
     "react-scripts": "5.0.0"
   },
   "scripts": {

ui/src/App.js

@@ -1,11 +1,11 @@
-import { Todos } from "./components/Todos";
+import {Link} from "react-router-dom"
 
-function App() {
-  return (
-    <div className="container">
-      <Todos />
-    </div>
-  );
+const App = () => {
+    return (
+        <div className="container">
+            <Link to="/call"> Click here to start chat </Link>
+        </div>
+    );
 }
 
 export default App;

ui/src/index.js

@@ -2,10 +2,18 @@ import React from "react";
 import ReactDOM from "react-dom";
 import "./index.css";
 import App from "./App";
+import {BrowserRouter as Router, Route, Routes} from "react-router-dom";
+import Call from "./video/";
 
 ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById("root")
-);
+    <React.StrictMode>
+        <Router>
+            <Routes>
+                <Route path="/" element={<App/>}/>
+                <Route path="/call" element={<Call/>}/>
+            </Routes>
+        </Router>
+    </React.StrictMode>
+    ,
+    document.getElementById("root")
+)

ui/src/setupProxy.js

@@ -0,0 +1,11 @@
+const { createProxyMiddleware } = require('http-proxy-middleware');
+
+module.exports = function(app) {
+    app.use(
+        '/api',
+        createProxyMiddleware({
+            target: 'http://localhost:4000',
+            changeOrigin: true,
+        })
+    );
+};

ui/src/video/Call.js

@@ -0,0 +1,23 @@
+import React, {useState} from 'react';
+import AgoraUIKit from 'agora-react-uikit';
+
+function VideoCall() {
+    const [videoCall, setVideoCall] = useState(true);
+    const rtcProps = {
+        appId: "b4f9c74a159343f3bc503363c76c98c5",
+        channel: 'AParlament_1',
+        token: "007eJxTYMj8mbXtRdmmMy9r1dbLRU8P8zOLi7H/WrjOQeZm/S2zOBYFhiSTNMtkc5NEQ1NLYxPjNOOkZFMDY2Mz42Rzs2RLi2TTxa8VUxoCGRnWvGZgZWSAQBCfh8ExILEoJzE3Na8k3pCBAQB0zSI6"
+    };
+    const callbacks = {
+        EndCall: () => setVideoCall(false),
+    };
+    return videoCall ? (
+        <div style={{display: 'flex', width: '100vw', height: '100vh'}}>
+            <AgoraUIKit rtcProps={rtcProps} callbacks={callbacks}/>
+        </div>
+    ) : (
+        <h3 onClick={() => setVideoCall(true)}>Start Call</h3>
+    );
+}
+
+export default VideoCall

ui/src/video/index.js

@@ -0,0 +1,26 @@
+import VideoCall from './Call';
+import React from "react";
+
+function MessageBox() {
+    return (
+        <div className='absolute z-20 bottom-32'>
+            <div className="card a-96 bg-base-100 shadow-xl ">
+                <div className="card-body">
+                    <h1 className='text-center justify-center'>header</h1>
+                    <p className='text-center'>question</p>
+                    <div className="card-actions justify-center">
+                        {/*<button className="badge badge-outline mt-1">סיימתי</button>*/}
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+export default function Call()  {
+    return (
+        <main style={{display: 'flex', flex: 1}}>
+            <VideoCall/>
+            <MessageBox />
+        </main>
+    )
+}