UI finally connected

Procfile

@@ -0,0 +1,2 @@
+daemon: cd daemon && cargo run --color always -- -i /dev/video0 -o /dev/video2 -w 800 -h 600 -f 30 -b 4 -p
+ui: cd ui && npm start

daemon/src/server.rs

@@ -17,27 +17,28 @@ pub fn create(app: App) -> thread::JoinHandle<()> {
  })
 }
 
-fn make_cors() -> Cors {
- CorsOptions {
- allowed_origins: AllowedOrigins::some_exact(&["http://localhost:3000"]),
- allowed_methods: vec![Method::Get, Method::Post]
- .into_iter()
- .map(From::from)
- .collect(),
- ..Default::default()
- }
- .to_cors()
- .unwrap()
-}
-
 #[get("/settings")]
 fn get_settings(state: State<App>) -> String {
  state.lock().unwrap().get_settings()
 }
 
 #[post("/settings", data = "<settings>")]
 fn set_setting(settings: String, state: State<App>) -> status::Accepted<String> {
+ println!("{:?}", settings);
  state.lock().unwrap().set_settings(settings);
 
  status::Accepted(None)
 }
+
+fn make_cors() -> Cors {
+ CorsOptions {
+ allowed_origins: AllowedOrigins::some_exact(&["http://localhost:3000"]),
+ allowed_methods: vec![Method::Options, Method::Get, Method::Post]
+ .into_iter()
+ .map(From::from)
+ .collect(),
+ ..Default::default()
+ }
+ .to_cors()
+ .unwrap()
+}

package.json

@@ -0,0 +1,22 @@
+{
+ "name": "instacam",
+ "version": "1.0.0",
+ "description": "# Setup",
+ "main": "index.js",
+ "scripts": {
+ "start": "nf start"
+ },
+ "repository": {
+ "type": "git",
+ "url": "git+https://github.com/naps62/instacam.git"
+ },
+ "author": "Miguel Palhas",
+ "license": "ISC",
+ "bugs": {
+ "url": "https://github.com/naps62/instacam/issues"
+ },
+ "homepage": "https://github.com/naps62/instacam#readme",
+ "dependencies": {
+ "foreman": "^3.0.1"
+ }
+}

ui/package.json

@@ -11,6 +11,7 @@
  "@types/node": "^12.12.53",
  "@types/react": "^16.9.44",
  "@types/react-dom": "^16.9.8",
+ "axios": "^0.19.2",
  "instacam-wasm": "file:../wasm/pkg",
  "react": "^16.13.1",
  "react-dom": "^16.13.1",

ui/src/components/settings/index.tsx

@@ -1,43 +1,58 @@
 import React, { useState, useEffect } from "react";
+import axios from "axios";
 import "./style.css";
 
+const fetchSettings = async (callback: Function) => {
+ try {
+ const { data } = await axios("http:///localhost:8000/settings");
+
+ callback(data);
+ } catch (err) {
+ console.error(err);
+ }
+};
+
+const updateSettings = async (settings: String) => {
+ try {
+ await axios({
+ method: "post",
+ url: "http://localhost:8000/settings",
+ data: settings,
+ });
+ } catch (err) {
+ console.error(err);
+ }
+};
+
 const Settings: React.FC = () => {
- const [wasm, setWasm] = useState();
  const [settings, setSettings] = useState("");
 
  useEffect(() => {
- (async () => {
- const wasm = await import("instacam-wasm");
- setWasm(wasm);
- })();
- });
-
- useEffect(() => {
- if (!wasm) return;
-
- console.log(wasm.get_settings());
- }, [wasm]);
+ fetchSettings((settings: JSON) => setSettings(JSON.stringify(settings)));
+ }, []);
 
  const onSubmit = (e: any) => {
  e.preventDefault();
- wasm.set_settings(settings);
+
+ try {
+ const json = JSON.parse(settings);
+ updateSettings(json);
+ } catch (err) {
+ console.error(err);
+ }
  };
 
- if (!wasm) {
- return <div>Loading</div>;
- } else {
- return (
- <form onSubmit={onSubmit}>
- <textarea
- rows={20}
- className="Settings"
- defaultValue={settings}
- onChange={(e) => setSettings(e.target.value)}
- />
- <input type="submit" value="Save" />
- </form>
- );
- }
+ return (
+ <form onSubmit={onSubmit}>
+ <textarea
+ rows={20}
+ className="Settings"
+ defaultValue={settings}
+ onChange={(e) => setSettings(e.target.value)}
+ />
+ <input type="submit" value="Save" />
+ </form>
+ );
 };
 
 export default Settings;

ui/src/components/video/index.tsx

@@ -21,8 +21,6 @@ const Video: React.FC = () => {
  navigator.mediaDevices.enumerateDevices().then(handleDevices);
  }, [handleDevices]);
 
- console.log(deviceId);
-
  let webcam = null;
  if (deviceId !== null && deviceId !== "") {
  webcam = (