Skip to main content

Step 3: Deploy the Video Player

Overview​

Video Player is a powerful web application designed to seamlessly display video streams delivered via MQTT in Base64 format. By simply accessing a local webpage on port 5080, users can effortlessly visualize and analyze their video content.

Video Player in the usecase workflow

Video Player in the solution workflow

tip

To select the specific video stream you want to visualize, simply modify the deviceDisplayName parameter in the appconfig file.

Add the Video Player App to your library​

Video Player in Barbara Marketplace

Video Player in Barbara Marketplace

Go to Barbara Marketplace, search for Video Player and add it to your Panel's library.

note

You will find the Video Player in this link of the Barbara Marketplace.

Once added you will find it in your Barbara Panel App Library. Let's deploy it to your Edge Node.

Video Simulator in Panel's library

Video Simulator in Panel's library

Install the Video Player App​

  1. Head to your Node's details view and click the + Add Card button.

Add New Card

Add New Card

  1. Select the Application option in the dropdown menu.

Select Application

Select Application

  1. Select Application and Version: Select the Video Player app from the application dropdown list and pick the latest existing version from the version dropdown list. Then click Next to proceed with the next step.

Select Video Simulator

Select Video Simulator

  1. Add App Secrets Review the default configuration for app secrets and leave it as-is. Technical notes explain each variable on the Read me link below the form. Once finish, just click Next.

Add App Secrets

Add App Secrets

  1. Add your app Config: This step allows you to make some additional configuration through a JSON-format text.
{
  "video_player": {
    "system": {
      "debugLevel": "info"
    },
    "video": {
      "deviceDisplayName": "video_simulator_01"
    }
  }
}

A crucial configuration parameter to consider is the deviceDisplayName. This unique identifier pinpoints your specific video stream within the MQTT Broker.

To ensure seamless integration with the Video Player, it's essential to align the deviceDisplayName with the video stream name specified in the Video Simulator configuration. In the previous step, this name was set to video_simulator_01. By matching these two names, you'll guarantee that the correct video stream is displayed in the Video Player.

Configure Application

Configure Application

Verifying the Video Player​

Head back to your Node's details view. Within a few seconds, a new card should appear displaying the installed Video Player app. Look for the status label on the card - if it reads STARTED then your Video Player is up and running!

Video player installed

Video player installed

Now let's check the Video Player web interface to visualize the video sent by Video Simulator. Open a new tab in your browser and navigate to the following URL: [IP_OF_YOUR_NODE]:5080. You should now see a video stream displaying the iconic streets of New York City. This is the default video provided by the Video Simulator.

warning

Remember that if your laptop is not connected to the same LAN as your edge node, you must activate your VPN and use its VPN's IP to access this web interface. You can check this IP on the Network card.

Video Player Web Interface

Video Player Web Interface

Congratulations! You've successfully set up your Video Player and are now visualizing video frames transmitted from the Video Simulator via the MQTT Broker.