Articles in this section

See more

How to install HTML5 Graphics Renderer for Dual Inputs on LiveEdge® Max

  • Updated
Follow

THIS ARTICLE IS NO LONGER VISIBLE TO CUSTOMERS - VIDEON INTERNAL ONLY FOR REFERENCE... This feature should be discouraged in light of the development of the Dynamic Graphic Overlay feature for LiveEdge Max devices

In order to enable your workflows that utilize graphic insertion by means of an overlay, we have provided an example of how to install Videon's HTML5 graphics renderer Docker container on the LiveEdge Max below. We will install the Docker image and containers for two inputs via the Containers tab on the device configuration page in LiveEdge Cloud.

 

Table of Contents:

  1. Pull Image

  2. Configure Containers

  3. Configure HTML5 URL

Pull Image

  1. Navigate to the desired device (https://videoncloud.com/devices/[device_guid] )

  2. Click on the Containers tab of your device

  3. Click "+ Pull Image" and enter the following:

    1. Enter the image repository

      videonlabs/html5-graphics-renderer

      • Videon tests and supports both Docker hub and Amazon ECR repositories

    2. Enter the image tag

      0.5.3

    3. Click the orange "Pull Image" button

    4. Wait until the image appears in the "Available Images" section

      • This may take a few minutes, especially with large containers on slow networks

      • Once it is loaded, you have successfully pulled your Docker image!

Configure Containers

  1. Click "+ Create Container" and enter the following:

    1. Enter a container name (DO NOT use spaces in the name or special characters) 
      html5ch0
    2. Select an available image 
      videonlabs/html5-graphics-renderer:0.5.3
    3. Select "Apply Restart Policy" 
      always
      • See --restart here for more information
    4. Select "ADD PORT MAPPING" to map any ports needed:
      • Host Port 
        1323
      • Container Port 
        1323
      • See --publish here for more information
    5. Select "ADD VARIABLE" to set environment variables
      • Key: 
        VIDEO_CHANNEL
      • Value: 
        0
      • See --env here for more information
    6. Select "ADD VOLUME" to map any volumes needed
      • Host path 
        /data/local/vl-html-file-overlay-ch0
      • Container path 
        /app/persist
      • Access mode: 
        rw
      • See --volume here for more information
    7. Under Advanced, select the desired Network Mode 
      bridge
      • See --network here for more information
    8. Click the orange “CREATE CONTAINER” button
    9. To configure a second container for your second input, Click "+ Create Container" and enter:
    10. Enter a container name (DO NOT use spaces in the name or special characters)
      html5ch1
    11. Select an available image 
      videonlabs/html5-graphics-renderer:0.5.3
    12. Select "Apply Restart Policy" 
      always
        • See --restart here for more information
    13. Select "ADD PORT MAPPING" to map any ports needed:
      • Host Port 
        1324
      • Container Port 
        1323
      • See --publish here for more information
    14. Select "ADD VARIABLE" to set environment variables
      • Key: 
        VIDEO_CHANNEL
      • Value: 
        1
      • See --env here for more information
    15. Select "ADD VOLUME" to map any volumes needed
      • Host path 
        /data/local/vl-html-file-overlay-ch1
      • Container path 
        /app/persist
      • Access mode: 
        rw
      • See --volume here for more information
    16. Under Advanced, select the desired Network Mode 
      bridge
      • See --network here for more information
    17. Press play on both containers to get them to the "running" state

Configure HTML5 URL

  • See this guide, step 8 on how to configure the HTML5 URL to use with the newly installed containers.
    • IMPORTANT NOTE: The second input will require the port of the commands used in these steps to be changed to port 1324 (instead of :1323) to set/change the URL on the second input channel!!!
  • Ensure the Graphic Overlay feature is turned ON to enable the HTML5 graphic to display on the encoded stream for the respective input.
  • Videon's AV Input Preview can be used from the local Web UI or LiveEdge Cloud to validate the presence of the HTML5 graphic on the encoded video. Alternatively, on LiveEdge Max, the front panel display Preview can be used as well.

Related articles