Skip to content

Revise README #22

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
HaidynPeterson wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Revise README #22

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
123 changes: 19 additions & 104 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,21 +17,20 @@ In window 2:

```console
~ $ cd RoverGUI/react-app
~/RoverGUI/backend $ npm run start --host
~/RoverGUI/react-app $ pnpm start --host
```

From your laptop, **open the GUI in a web browser with its URL**: (i.e., open this link in Firefox/Chrome: [http://192.168.1.68:3000](http://192.168.1.68:3000), where `192.168.1.68` is the Rover's IP address, and `3000` is the port from the frontend window above; the port might be something different, so please look carefully). You should then be presented with a page with a dropdown list of available cameras. Select a camera -- then, a live stream should be visible!
From your laptop, **open the GUI in a web browser with its URL**: (i.e., open this link in Firefox/Chrome: http://192.168.1.68:5173, where `192.168.1.68` is the Rover's IP address, and `5173` is the port from the frontend window above; the port might be something different, so please look carefully). You should then be presented with a page with a dropdown list of available cameras. Select a camera -- then, a live stream should be visible!

## Dependencies

You **must** download and install the following dependencies:

- `Node.js`: [Download Node.js](https://nodejs.org/en/download)
- `npm`: [Downloading and installing Node.js and `npm`](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)
- note: `npm` is usually included with Node.js.
- Rust (`cargo`): [An installer for the systems programming language Rust](https://rustup.rs/)
- `Node.js`: https://nodejs.org/en/download
- `pnpm`: https://pnpm.io/installation
- Rust (`cargo`): https://rustup.rs/

If you're running Linux, and you want to use the real backend (i.e., you'd like to stream real video from real cameras), you should also install `Video4Linux` on your Linux distro. See: [pkgs.org - v4l-utils](https://pkgs.org/search/?q=v4l-utils).
If you're running Linux, and you want to use the real backend (i.e., you'd like to stream real video from real cameras), you should also install `Video4Linux` on your Linux distro. See: https://pkgs.org/search/?q=v4l-utils

## Detailed Instructions

Expand All @@ -46,28 +45,7 @@ Before running the frontend, you will need to install the package's dependencies
cd react-app/

# Now install the dependencies!
npm i

# Your output should look something like this:
added 1472 packages, and audited 1473 packages in 14s

262 packages are looking for funding
run `npm fund` for details

28 vulnerabilities (6 low, 8 moderate, 13 high, 1 critical)

To address issues that do not require attention, run:
npm audit fix

To address all issues (including breaking changes), run:
npm audit fix --force

Run `npm audit` for details.
npm notice
npm notice New major version of npm available! 10.9.4 -> 11.6.2
npm notice Changelog: https://github.com/npm/cli/releases/tag/v11.6.2
npm notice To update run: npm install -g npm@11.6.2
npm notice
pnpm install

# Done!
```
Expand All @@ -76,7 +54,7 @@ npm notice

```bash
# To start the frontend, simply run the following command in the frontend's folder.
npm run start --host
pnpm start --host

# Your output should look like this:
VITE v7.3.1 ready in 96 ms
Expand All @@ -86,18 +64,10 @@ VITE v7.3.1 ready in 96 ms
➜ press h + enter to show help
```

The URLs that are outputted by this command (i.e. http://localhost:3000) are the same URLs that you use to see the GUI from your web browser. You may hold ctrl and then click on the links to view them or simply copy & paste them into your browser.
The URLs that are outputted by this command (i.e. http://localhost:5173) are the same URLs that you use to see the GUI from your web browser. You may hold ctrl and then click on the links to view them or simply copy & paste them into your browser.

> [!TIP]
> If the `npm run start` command fails, it may be because something else (like another instance of the frontend) is running on the frontend's same port (`3000` in this case). See the code block below for an example of this!

```bash
? Something is already running on port 3000. Probably:
/home/mizael/.nvm/versions/node/v22.21.0/bin/node /home/mizael/RoverGUI/react-app/node_modules/react-scripts/scripts/start.js (pid 67442)
in /home/mizael/RoverGUI/react-app

Would you like to run the app on another port instead? › (Y/n)
```
> If the `pnpm start` command fails, it may be because something else (like another instance of the frontend) is running on the same port (`5173` in this case). Vite may prompt you to use a different port or automatically switch ports.

#### Stopping the frontend

Expand All @@ -107,44 +77,15 @@ In the same terminal in which you are running the frontend, press `Ctrl+C` to se

#### Building the backend crate and its Cargo dependencies

Before running the backend, you will need to build the frontend along with all of its dependencies.
Before running the backend, you will need to build the backend along with all of its dependencies.

```bash
# First make sure that you are in the backend's folder (/backend)
cd backend/

# Cargo makes the process of building the crate really easy! Simply run the following command which will fetch and compile all of the dependencies along with building the backend package!
# Build the backend and dependencies
cargo build

# The output should look something like this:
Compiling fastrand v2.3.0
Compiling spin v0.9.8
Compiling mime v0.3.17
Compiling async-stream v0.3.6
Compiling tempfile v3.23.0
Compiling webrtc-data v0.9.0
Compiling webrtc-ice v0.11.0
Compiling rocket_codegen v0.5.1
Compiling webrtc-dtls v0.10.0
Compiling sdp v0.6.2
Compiling rayon v1.11.0
Compiling interceptor v0.12.0
Compiling wide v0.7.33
Compiling webrtc-media v0.8.0
Compiling tokio-stream v0.1.17
Compiling smol_str v0.2.2
Compiling ubyte v0.10.4
Compiling num_cpus v1.17.0
Compiling atomic v0.5.3
Compiling binascii v0.1.4
Compiling hex v0.4.3
Compiling jpeg-decoder v0.3.2
Compiling v4l v0.14.0
Compiling webrtc v0.11.0
Compiling openh264 v0.6.6
Compiling backend-rs v0.1.0 (/home/mizael/RoverGUI/backend)
Finished `dev` profile [unoptimized + debuginfo] target(s) in 49.80s

# Done!
```

Expand All @@ -154,38 +95,6 @@ cargo build
# Simply run:
cargo run

# Your output should look like this:
arget(s) in 0.24s
Running `target/debug/backend-rs`
🔧 Configured for debug.
>> address: 127.0.0.1
>> port: 3600
>> workers: 12
>> max blocking threads: 512
>> ident: Rocket
>> IP header: X-Real-IP
>> limits: bytes = 8KiB, data-form = 2MiB, file = 1MiB, form = 32KiB, json = 1MiB, msgpack = 1MiB, string = 8KiB
>> temp dir: /tmp
>> http/2: true
>> keep-alive: 5s
>> tls: disabled
>> shutdown: ctrlc = true, force = true, signals = [SIGTERM], grace = 2s, mercy = 3s
>> log level: normal
>> cli colors: true
📬 Routes:
>> (get_available_cameras) GET /stream/cameras
>> (get_camera_feed) POST /stream/cameras/<camera_path>/start
>> (get_camera_modes) GET /stream/cameras/<camera_path>/modes
>> (get_camera_mode) GET /stream/cameras/<camera_path>/modes/current
>> (get_camera_mode_set) GET /stream/cameras/<camera_path>/modes/set/<mode_id>
📡 Fairings:
>> Shield (liftoff, response, singleton)
🛡️ Shield:
>> X-Content-Type-Options: nosniff
>> X-Frame-Options: SAMEORIGIN
>> Permissions-Policy: interest-cohort=()
🚀 Rocket has launched from http://127.0.0.1:3600

# Done!
```

Expand All @@ -197,7 +106,13 @@ In the same terminal in which you are running the backend, simply do `Ctrl+C` to

### The "fake" backend

There's a `fake_backend` binary you can use to test the frontend on a non-Linux computer (i.e., macOS or Windows). To use it, just type: `NUM_CAMERAS=1 cargo run --bin fake_backend $NUM_CAMERAS`. You can set `NUM_CAMERAS` to any value you'd like.
There's a `fake_backend` binary you can use to test the frontend on a non-Linux computer (i.e., macOS or Windows). To use it, just type:

```bash
NUM_CAMERAS=1 cargo run --bin fake_backend $NUM_CAMERAS
```

You can set `NUM_CAMERAS` to any value you'd like.

Then, open up the frontend as described above. It'll connect successfully!

Expand Down