diff --git a/README.md b/README.md
index 700b469..d1e8aa0 100644
--- a/README.md
+++ b/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
diff --git a/ui/package-lock.json b/ui/package-lock.json
index d38b6d5..2ba2888 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -8,8 +8,11 @@
"name": "todos",
"version": "0.1.0",
"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"
}
},
@@ -2813,6 +2816,14 @@
"node": ">= 8"
}
},
+ "node_modules/@remix-run/router": {
+ "version": "1.4.0",
+ "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.4.0.tgz",
+ "integrity": "sha512-BJ9SxXux8zAg991UmT8slpwpsd31K1dHHbD3Ba4VzD+liLQ4WAMSxQp2d2ZPRPfN0jN2NPRowcSSoM7lCaF08Q==",
+ "engines": {
+ "node": ">=14"
+ }
+ },
"node_modules/@rollup/plugin-babel": {
"version": "5.3.1",
"resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -3892,6 +3903,67 @@
"node": ">= 6.0.0"
}
},
+ "node_modules/agora-react-uikit": {
+ "version": "1.2.0",
+ "resolved": "https://registry.npmjs.org/agora-react-uikit/-/agora-react-uikit-1.2.0.tgz",
+ "integrity": "sha512-+bqYsktLs3CV0OFQyD+uIxqlEMPMLprw446MnOQA4BWr+EFJBO3zA+J1ogXHOgJ+dSRegbD+SA8Ehe2et6K/ew==",
+ "dependencies": {
+ "agora-rtc-react": "^1.1.3",
+ "agora-rtm-react": "^1.1.2"
+ },
+ "engines": {
+ "node": ">=10"
+ },
+ "peerDependencies": {
+ "react": "^16.0.0 || ^17.0.0 || ^18.0.0"
+ }
+ },
+ "node_modules/agora-rtc-react": {
+ "version": "1.1.3",
+ "resolved": "https://registry.npmjs.org/agora-rtc-react/-/agora-rtc-react-1.1.3.tgz",
+ "integrity": "sha512-AgmDoeLoL3xC7u60lTehHi1GvHsP8l09CX3bn+NyHx6E0Dmbbxdtqkn+YrlakWa4IYOAn0d/9oKvuGrNtUiOpA==",
+ "dependencies": {
+ "agora-rtc-sdk-ng": "^4.3.0"
+ },
+ "engines": {
+ "node": ">=10"
+ },
+ "peerDependencies": {
+ "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+ }
+ },
+ "node_modules/agora-rtc-sdk-ng": {
+ "version": "4.17.0",
+ "resolved": "https://registry.npmjs.org/agora-rtc-sdk-ng/-/agora-rtc-sdk-ng-4.17.0.tgz",
+ "integrity": "sha512-TmqnvWr7J9cVm62KzE3jhBjVcQpcvxj0GoSMHUylce5GWZrN6rkDLgcPNvhNmPPK5Slqwsx/d70FrWM7T3ngQw==",
+ "dependencies": {
+ "agora-rte-extension": "^1.2.3"
+ }
+ },
+ "node_modules/agora-rte-extension": {
+ "version": "1.2.3",
+ "resolved": "https://registry.npmjs.org/agora-rte-extension/-/agora-rte-extension-1.2.3.tgz",
+ "integrity": "sha512-k3yNrYVyzJRoQJjaJUktKUI1XRtf8J1XsW8OzYKFqGlS8WQRMsES1+Phj2rfuEriiLObfuyuCimG6KHQCt5tiw=="
+ },
+ "node_modules/agora-rtm-react": {
+ "version": "1.1.2",
+ "resolved": "https://registry.npmjs.org/agora-rtm-react/-/agora-rtm-react-1.1.2.tgz",
+ "integrity": "sha512-iNIU48khfevojXn0beJU94+HO9zvHZgpO42YJXqaEYEjdVWhZVijZw3bZWC8hTsEMuew5XB0Gk2tNJI0biRPQg==",
+ "dependencies": {
+ "agora-rtm-sdk": "1.4.3-203"
+ },
+ "engines": {
+ "node": ">=10"
+ },
+ "peerDependencies": {
+ "react": "^16.0.0 || ^17 || ^18"
+ }
+ },
+ "node_modules/agora-rtm-sdk": {
+ "version": "1.4.3-203",
+ "resolved": "https://registry.npmjs.org/agora-rtm-sdk/-/agora-rtm-sdk-1.4.3-203.tgz",
+ "integrity": "sha512-uQh9zqRtELAblxt7nXSv20pH7oQfTDj7gC2NI2cDIe9dcKBlQpEVf2wBM68so6sZ767ZLcW+z/FCd5QVCt9RvA=="
+ },
"node_modules/ajv": {
"version": "6.12.6",
"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
@@ -12838,6 +12910,36 @@
"node": ">=0.10.0"
}
},
+ "node_modules/react-router": {
+ "version": "6.9.0",
+ "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.9.0.tgz",
+ "integrity": "sha512-51lKevGNUHrt6kLuX3e/ihrXoXCa9ixY/nVWRLlob4r/l0f45x3SzBvYJe3ctleLUQQ5fVa4RGgJOTH7D9Umhw==",
+ "dependencies": {
+ "@remix-run/router": "1.4.0"
+ },
+ "engines": {
+ "node": ">=14"
+ },
+ "peerDependencies": {
+ "react": ">=16.8"
+ }
+ },
+ "node_modules/react-router-dom": {
+ "version": "6.9.0",
+ "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.9.0.tgz",
+ "integrity": "sha512-/seUAPY01VAuwkGyVBPCn1OXfVbaWGGu4QN9uj0kCPcTyNYgL1ldZpxZUpRU7BLheKQI4Twtl/OW2nHRF1u26Q==",
+ "dependencies": {
+ "@remix-run/router": "1.4.0",
+ "react-router": "6.9.0"
+ },
+ "engines": {
+ "node": ">=14"
+ },
+ "peerDependencies": {
+ "react": ">=16.8",
+ "react-dom": ">=16.8"
+ }
+ },
"node_modules/react-scripts": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.0.tgz",
@@ -17470,6 +17572,11 @@
}
}
},
+ "@remix-run/router": {
+ "version": "1.4.0",
+ "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.4.0.tgz",
+ "integrity": "sha512-BJ9SxXux8zAg991UmT8slpwpsd31K1dHHbD3Ba4VzD+liLQ4WAMSxQp2d2ZPRPfN0jN2NPRowcSSoM7lCaF08Q=="
+ },
"@rollup/plugin-babel": {
"version": "5.3.1",
"resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -18283,6 +18390,49 @@
"debug": "4"
}
},
+ "agora-react-uikit": {
+ "version": "1.2.0",
+ "resolved": "https://registry.npmjs.org/agora-react-uikit/-/agora-react-uikit-1.2.0.tgz",
+ "integrity": "sha512-+bqYsktLs3CV0OFQyD+uIxqlEMPMLprw446MnOQA4BWr+EFJBO3zA+J1ogXHOgJ+dSRegbD+SA8Ehe2et6K/ew==",
+ "requires": {
+ "agora-rtc-react": "^1.1.3",
+ "agora-rtm-react": "^1.1.2"
+ }
+ },
+ "agora-rtc-react": {
+ "version": "1.1.3",
+ "resolved": "https://registry.npmjs.org/agora-rtc-react/-/agora-rtc-react-1.1.3.tgz",
+ "integrity": "sha512-AgmDoeLoL3xC7u60lTehHi1GvHsP8l09CX3bn+NyHx6E0Dmbbxdtqkn+YrlakWa4IYOAn0d/9oKvuGrNtUiOpA==",
+ "requires": {
+ "agora-rtc-sdk-ng": "^4.3.0"
+ }
+ },
+ "agora-rtc-sdk-ng": {
+ "version": "4.17.0",
+ "resolved": "https://registry.npmjs.org/agora-rtc-sdk-ng/-/agora-rtc-sdk-ng-4.17.0.tgz",
+ "integrity": "sha512-TmqnvWr7J9cVm62KzE3jhBjVcQpcvxj0GoSMHUylce5GWZrN6rkDLgcPNvhNmPPK5Slqwsx/d70FrWM7T3ngQw==",
+ "requires": {
+ "agora-rte-extension": "^1.2.3"
+ }
+ },
+ "agora-rte-extension": {
+ "version": "1.2.3",
+ "resolved": "https://registry.npmjs.org/agora-rte-extension/-/agora-rte-extension-1.2.3.tgz",
+ "integrity": "sha512-k3yNrYVyzJRoQJjaJUktKUI1XRtf8J1XsW8OzYKFqGlS8WQRMsES1+Phj2rfuEriiLObfuyuCimG6KHQCt5tiw=="
+ },
+ "agora-rtm-react": {
+ "version": "1.1.2",
+ "resolved": "https://registry.npmjs.org/agora-rtm-react/-/agora-rtm-react-1.1.2.tgz",
+ "integrity": "sha512-iNIU48khfevojXn0beJU94+HO9zvHZgpO42YJXqaEYEjdVWhZVijZw3bZWC8hTsEMuew5XB0Gk2tNJI0biRPQg==",
+ "requires": {
+ "agora-rtm-sdk": "1.4.3-203"
+ }
+ },
+ "agora-rtm-sdk": {
+ "version": "1.4.3-203",
+ "resolved": "https://registry.npmjs.org/agora-rtm-sdk/-/agora-rtm-sdk-1.4.3-203.tgz",
+ "integrity": "sha512-uQh9zqRtELAblxt7nXSv20pH7oQfTDj7gC2NI2cDIe9dcKBlQpEVf2wBM68so6sZ767ZLcW+z/FCd5QVCt9RvA=="
+ },
"ajv": {
"version": "6.12.6",
"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
@@ -24607,6 +24757,23 @@
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
"integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A=="
},
+ "react-router": {
+ "version": "6.9.0",
+ "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.9.0.tgz",
+ "integrity": "sha512-51lKevGNUHrt6kLuX3e/ihrXoXCa9ixY/nVWRLlob4r/l0f45x3SzBvYJe3ctleLUQQ5fVa4RGgJOTH7D9Umhw==",
+ "requires": {
+ "@remix-run/router": "1.4.0"
+ }
+ },
+ "react-router-dom": {
+ "version": "6.9.0",
+ "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.9.0.tgz",
+ "integrity": "sha512-/seUAPY01VAuwkGyVBPCn1OXfVbaWGGu4QN9uj0kCPcTyNYgL1ldZpxZUpRU7BLheKQI4Twtl/OW2nHRF1u26Q==",
+ "requires": {
+ "@remix-run/router": "1.4.0",
+ "react-router": "6.9.0"
+ }
+ },
"react-scripts": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.0.tgz",
diff --git a/ui/package.json b/ui/package.json
index 7924ee2..3532eec 100644
--- a/ui/package.json
+++ b/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": {
diff --git a/ui/src/App.js b/ui/src/App.js
index bd677f4..8e6732f 100644
--- a/ui/src/App.js
+++ b/ui/src/App.js
@@ -1,11 +1,11 @@
-import { Todos } from "./components/Todos";
+import {Link} from "react-router-dom"
-function App() {
- return (
-
-
-
- );
+const App = () => {
+ return (
+
+ Click here to start chat
+
+ );
}
export default App;
diff --git a/ui/src/index.js b/ui/src/index.js
index 846ed2c..b56c957 100644
--- a/ui/src/index.js
+++ b/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(
-
-
- ,
- document.getElementById("root")
-);
+
+
+
+ }/>
+ }/>
+
+
+
+ ,
+ document.getElementById("root")
+)
\ No newline at end of file
diff --git a/ui/src/setupProxy.js b/ui/src/setupProxy.js
new file mode 100644
index 0000000..a197e66
--- /dev/null
+++ b/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,
+ })
+ );
+};
\ No newline at end of file
diff --git a/ui/src/video/Call.js b/ui/src/video/Call.js
new file mode 100644
index 0000000..5b34cf1
--- /dev/null
+++ b/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 ? (
+
+ ) : (
+ setVideoCall(true)}>Start Call
+ );
+}
+
+export default VideoCall
\ No newline at end of file
diff --git a/ui/src/video/index.js b/ui/src/video/index.js
new file mode 100644
index 0000000..dac53f4
--- /dev/null
+++ b/ui/src/video/index.js
@@ -0,0 +1,26 @@
+import VideoCall from './Call';
+import React from "react";
+
+function MessageBox() {
+ return (
+
+
+
+
header
+
question
+
+ {/**/}
+
+
+
+