OpenVidu Surveillance (9). Last details.

The application is almost complete, at code level there are just some details to finish and the implementation of a basic Spring Security authentication.

These past days I noticed there were some things that needed to be better done, mostly to be friendlier with the user :

  • A better alert/notification system, not just the classic browser alert.
    There were some errors thrown in the console lacking information.
  • The settings button has the same icon when you’re in the settings screen, which is not very intuitive since in order to go back you have to click in the same icon.
  • When cameras were loading there was just an empty space, nothing to let the user know that the cameras are actually loading.
  • As with the last two issues, the first time you get in a session there are no cameras so, the user can get easily lost, because there is no help whatsoever with where to start.

Alert system.

Alert that lets you know you are connected to the session.

This is definitely prettier and it’ll let you know faster and easier if there was an error. I modified it a little to adapt it to my application and since the code was well done, it was very simple.

Error that displays when you try to add demo cameras to a session with demo cameras on already.

Errors in the console.

Usability.

From the main screen to the settings screen.

Next there was the loading cameras with an empty space problem, the cameras were there, loading, but you wouldn’t know. So I found this page called loading.io where you can make a custom loading gif/image/animation for free.

Custom loading gif.

I made this one using the color palette of my application in coolors and then downloaded different sizes of it, as the main camera has a bigger screen and it was showing in a very low quality.

Different sizes for different video screens.

The last issue is for people that access to the app for the first time, just a simple empty screen and not a clue of what to do.

Alert that gets displayed when you enter a session with no cameras.

When the user system is done there may be a better way to do this, but for now you get this message where you can click on the icon displayed on the alert or search for it on the screen. From there, you’ll know what to do when you see an “Add camera” button.

I’m a software engineer student at URJC from Madrid, currently in my last year. I like cats and metal.