import JellyfishArchitecture from "./_jellyfish-architecture.mdx"; import StartingJellyfishBackend from "./_starting-jellyfish-backend.mdx"; import StartingJellyfishDashboard from "./_starting-dashboard.mdx";
Jellyfish Dashboard is a web application that allows you to manage your Jellyfish backend. It is a React application that uses the Jellyfish React Client API to communicate with the backend.
It was created to help Jellyfish developers in testing but was later extended and adapted to as a tool for tutorials and demos. Here we present a short introduction to the dashboard and its features.
Since we have Dashboard and Jellyfish backend up and running, we can dive into the features.
We started the dashboard and the backend separately, so we need to connect them.
- Open the dashboard in your browser. Open the side menu and fill in the parameters:
- Server token - a token necessary to authenticate the dashboard with the backend. For now, it's simply
development, but it is meant to authenticate the dashboard to the backend, so the good practice is to use a token that is hard to guess. - WS/WSS - whether to use a secure or insecure connection. , it's
ws, but if the backend uses secure WebSocket, usewss. - HTTP/HTTPS - whether to use a secure or insecure connection. By default, it's
http, but if the backend uses secure HTTP, usehttps. - Server URL - URL of the backend server. Here,
localhost:5002would be a local build, but it can be any URL that points to the backend. - Socket Path - path to the WebSocket endpoint. The default value is
/socket/peer/websocket.
- Click Connect to server. If everything is correct, a server will appear in the list of connected servers:
There are plenty of settings that You can adjust in a room:
- vp8 or h264 - video codec used in the room. If you want to use
HLSstreaming, you need to useh264. - Max Peers - maximum number of peers that can join to the room.
When you select the settings, click the Add room button. If everything is correct, a room will appear in the list of rooms:
Using the Create peer button, you can create a peer that will be ready to connect to the room.
The peer has its ID and Token. The ID is used to identify the peer in the backend, and the Token is used to authenticate the peer with the backend.
Dashboard has an option to copy both of those values to the clipboard. You can also create a QR code with the peer's Token to make connecting to Jellyfish with a mobile device easier.
To connect the peer to the room, you can either press the Connect button in the peer's row, or scan the QR code with your mobile app, and connect there.
When the peer connects to the room, you will see the track menu. It allows you to send tracks to the room.
You can select the audio or video tracks You want to send to the room. Apart from your camera/microphone, there is an option to pick one from a list of mock tracks that we prepared.
You can also select the resolution of the video track or if you want, send the video as a simulcast stream.
There is also an option to add custom metadata (in JSON format) to the track. The peer will send metadata with the track to the room. Each recipient will be able to see it.
When you select the track, click the Add track button. If everything is correct, client will send the track to the room and other peers will be able to see and hear you.
When the peer connects to the room, it will automatically receive tracks from other peers.
Congrats! The basic utils of the dashboard are now covered. Next, we will dive into useful features that will help you with testing.
On the side menu, you can set up the dashboard to show the server logs in the console.
Logs are great for debugging purposes and present the variety of communication that takes place between the dashboard and the backend.
You can also register your callbacks in your Jellyfish projects.
Each server, room, and client has its state. You can see the state of each of them in the dashboard by clicking appropriate buttons.
Apart from the state, you can also see the events that occur on the server. You can see them after clicking the Show Server Events button.
The dashboard allows adding HLS and RTSP streams in the room. You can set up the streams and see them in the room. It will look like this:
Jellyfish Server supports loadbalancing. It means that you can run multiple instances of the server and use them simultanoesly to minimise the load on each of them. The dashboard reflects this feature. Provided you run multiple-in-one Jellyfish instance (docker does that by default), connect one server to the dashboard. When the room you created was moved to another server, the dashboard will open this server for you. When server will open a room in the different instance, the dashboard will automatically connect to it and show the room.
Congrats on finishing the tutorial! You should now be able to use the dashboard to its full potential.
But this was just the beginning. Jellyfish Client API is a powerful tool that allows you to create your own web or mobile multimedia application. Check out the other tutorials to learn more about the Jellyfish Client API and how to use it in your projects.
You can also take a look at our fully featured Videoroom Demo example:
It's written in React Native, but it uses the same Jellyfish Client API as the dashboard, so you can learn a lot from it.