Begin Developing with Shinobi

This is a quick start guide for developing on Shinobi CCTV software. In this article we'll talk about the kind of software and hardware you will need to get going. We'll briefly go over the main directory file structure of Shinobi. And discuss enhancing Shinobi to fit your visual and functional needs.

We'll go over the following :

• Tools and Preparation
• Repository File Structure
• RESTful API
• Custom Auto Load Modules
• Detector Plugins
• White-Labelling

Tools

Preparing Tools

Begin by installing the necessary programs to your workstation. The Code Editor, SSH Client, and SFTP Client. I personally go with Atom, Putty, and FileZilla because my workstation is a windows machine.

• Atom : https://github.com/atom/atom/releases
  • Warning : This app is EOL but is open source on Github. It still works fine, just don't expect any fixes for any bugs you may encounter. Windows seems to operate fine, macOS has issues. I suggest Brackets for non-Windows.
• Putty : https://www.chiark.greenend.org.uk/~sgtatham/putty/latest.html
• FileZilla : https://filezilla-project.org/
  • Warning : there may be sponsored ads in the installer. Be sure to uncheck them. Do the install process slowly for this application.

Now that you have those, prepare your Test Server by installing an Operating System. We recommend Alma Linux 9.2 for a CPU only experience or Ubuntu 20.04 for servers with NVIDIA GPUs capable of doing Object Detection.

• Alma Linux : https://almalinux.org/blog/almalinux-92-now-available/
• Ubuntu 20.04 Focal Fossa : https://releases.ubuntu.com/focal/

Now that you have an Operating System installed attempt connect over SSH to run the Shinobi Ninja Installer.

Alma Linux installations can select the Rocky 9 installer if Alma Linux is not listed. For Ubuntu you may need to specifically say Yes to installing OpenSSH during the Operating System installation. This will allow SSH connectivity. Learn about using Putty for SSH on Windows at ssh.com.

Essentially get your OS installed and get the IP of the machine, put the IP into Putty and attempt connection. Provide the username and password set during OS installation then run the Ninja Installer.

• Ninja Installer : https://docs.shinobi.video/installation/ninja-way

Once you're all setup, you're ready to dive into the files.

Repository File Structure

RESTful API

Everything the Shinobi dashboard does is through the API. You can make your own Shinobi client with all the same features and more... or less. However you prefer. Learn about using the Shinobi API here.

API : https://docs.shinobi.video/api

Custom Auto Load Modules

customAutoLoad Modules are scripts you can use to modify Shinobi's internal operation without modifying the source files themselves. Run custom scripts in Shinobi. Here is an in-depth explanation.

• Documents : https://docs.shinobi.video/configure/custom-auto-load-modules
• Sample Modules : https://gitlab.com/Shinobi-Systems/customautoload-samples

In short, there is a folder found at libs/customAutoLoad. This is where you will put your custom js file or folder that will run automatically on Shinobi start. The aspects you can change are simply written below.

• EJS Template Replacement, Frontend Render Templates. Learn more here.
• Loading custom front end JS and CSS. As easy as placing them in a folder within your module's directory. See below for more information.
• Making changes to the conf.json without editing the file. See below for an example.
• Running custom functions on internal actions like on Monitor Start or System Ready. You can see all handlers available here. See the samples to learn more about using them.
• Replacing entire functions to do a custom action instead. This is only possible with some functions, specifically all starting with the s. prefix.

For custom front end JS and CSS you can place them in these folders. Depending on their prefix they will be loaded in the Superuser panel or the Dashboard. Prefix super. for Superuser panel and dash. for Dashboard. More on this in White-Labelling.

• JS : SHINOBI_FOLDER/libs/customAutoLoad/YOURMODULE/web/libs/js/dash.customTab.js
• CSS : SHINOBI_FOLDER/libs/customAutoLoad/YOURMODULE/web/libs/css/dash.customTab.css

For loading custom EJS blocks you can place them in this folder. More on this in White-Labelling.

• EJS : SHINOBI_FOLDER/libs/customAutoLoad/YOURMODULE/web/pages/blocks/customTab.ejs

You can modify the loaded configuration by setting parameters in your custom module's initiator file.

module.exports = function(s,config,lang,app,io){
    config.myNewParamter = true;
}

Detector Plugins

Shinobi comes with a few different plugins bundled together, like TensorFlow, DeepStack, and Yolo. However you can easily make your own by following this guide. This assumes you already have a working detector in either Node.js or Python.

Download plugins by logging into your Superuser panel or following the README provided with the plugin.

• Documents : https://docs.shinobi.video/create/detector-plugin
• Plugins : https://gitlab.com/Shinobi-Systems/shinobi-plugins/-/tree/master/plugins

White-Labelling

This is only allowed under certain license purchases and/or agreements. We may make exceptions depending on your use case.

Now that you've made it to this part of the article you should know about Custom Auto Load Modules. This is the method we will use to guide you in making a module that will convert your stock Shinobi to a custom version of Shinobi.

We've gone ahead and created a sample module.

• Rebrander : https://gitlab.com/Shinobi-Systems/customautoload-samples/-/tree/master/samples/Rebrander

If loaded as-is into your Shinobi customAutoLoad folder it will :

• Modify some text and links appearing on the login screen.
• Modify the main page title "Shinobi" to "Shinobi Customized"
• Setting which tabs will be loaded.
• Adding a Custom Tab with dummy fields including specified js and css files.
• Create a new account in your Superuser panel on start. Search for "config.staticUsers" in the index.js of the module.

You will notice there are a lot of things commented out or left as default values. Some of those are as follows :

• Modifying the Icon of the web dashboard.
• Displaying the landing page selector.
• Changing the login screen background and css associated to the element.
• Dark or Light base setting.
• Changing Monitor Options dropdown class
• Making Monitor Settings sections hidden by default.
• Removing ShinobiHub tab.
• Removing theme selection in Account Settings.

You'll notice a lot of this is modifying the s.definitions parameters, the framework for this can be seen in definitions/base.js.