Live video

Usage notes

The Live Video component has the following compatibility requirements:

• Supported streaming protocol: HLS.

• Supported video codecs: H.264 and H.265.

Step 1: Add the component

1. Create a web application. For more information, see Create a web application.

2. In the web application editor, click the component icon on the far left.

3. In the search box above the component list on the left side of the canvas, enter Live Video to find the component. Then, drag the component to the canvas.

   For more information about adding components, see Add a component.

   

Step 2: Configure the data source

• Static data

  1. On the right panel, under Style, enter the HLS URL in the Source URL field.

     Important

     • If your application has network restrictions or your video data is sensitive, avoid using a video source URL from the public network to prevent data leaks.

     • The URL must start with HTTPS and support cross-origin requests.

  2. Enable the Flash plug-in and refresh the page. The component then plays the video.

     Note

     If your browser is set to Block sites from running Flash, change this setting to ask for permission before running the Flash plug-in.

• Dynamic data

  To the right of the Source URL field, click the data source configuration icon . Then, select a data source type, complete the configuration, and click OK.

  The available data source types are device, API, Application Push, and Page Variable.

  The Source URL is updated in real time based on the associated data source.

Step 3: Configure the style

1. Position the component on the page. For information about general style configurations, see Configure component styles.

2. In the upper-right corner of the page, click Save and then Preview to preview the component.

   The following figure shows the video playback interface.

Best practice

Use IoT Studio to play the live video stream of a Link Visual camera