DocsICP FilingConsole
官方文档
首页

RTMP video stream player

更新时间：
复制 MD 格式
产品详情
我的收藏

Configure the RTMP video stream player widget, including the video stream URL, stream type, and mute settings.

Important

The RTMP video stream player widget does not currently support video playback in Google Chrome. The Real-Time Messaging Protocol (RTMP) relies on Flash, and Google Chrome does not support Flash.

Chart style

A media widget that plays video streams over the RTMP protocol. Add it to a data dashboard and specify a custom video URL and stream type.image.png

Style panelimage.png

  • Search Configuration: Click the Style icon image in the upper right corner of the panel to enter the name of the configuration item you wish to locate in the search field. The system supports fuzzy matching. For more information, see Search configuration item.

    • Size: The width and height of the component in pixels (px).

    • Position: The component's x-coordinate and y-coordinate in pixels (px). The x-coordinate is the horizontal distance from the page's left edge to the component's top-left corner. The y-coordinate is the vertical distance from the page's top edge to the component's top-left corner.

    • Rotation: The rotation of the component around its center point, in degrees (°).

      • Enter an angle value to control the component's rotation.

      • Click the image icon to flip the component horizontally.

      • Click the image icon to flip the component vertically.

    • Opacity: The value ranges from 0 to 1. A value of 0 is completely transparent, while a value of 1 is fully opaque. The default is 1.

    • Interaction passthrough: When enabled, mouse interactions pass through this component, preventing it from blocking interactions with other components layered underneath it on a dashboard.

    • Alignment: The alignment of the component within the editor.

  • Video Stream URL: The URL of the video stream.

    Important

    • Only video streams that use the RTMP protocol are supported.

    • You can configure the video stream URL and type on the Style and Data Source panels. DataV prioritizes the configuration on the Data Source panel.

  • Video Stream Type: The format of the video stream. Options are rtmp/mp4 and rtmp/flv.

  • Mute: Mutes the video on both the preview and published pages. When disabled, the video plays with sound.

Data Source panelimage.png

Field

Description

source

(Optional) The video stream URL. Serves the same function as the Video Stream URL configuration item. If both are configured, the source field value takes precedence.

type

(Optional) The video stream type. Serves the same function as the Video Stream Type configuration item. If both are configured, the type field value takes precedence.

Data Item Configuration

Description

Data Source

The component's data source displays the data fields contained within the component using code editing or visual editor. You can also modify the data type to flexibly configure the component's data.

Data Mapping

When you need to customize chart field configurations, you can set different field mappings in the Data Mapping module to map these fields to the corresponding fields of the component. This allows for real-time data matching without altering the data source fields. Additionally, click the image icon to configure field styles individually.

Filter

Open the Filter to select an existing data filter or create a new one, and configure the data filter script to achieve data filtering capabilities. For more information, see manage data filters.

Data Response Result

This feature displays the component's data in real-time. When the component's data source changes, the data response result will display the latest data accordingly. In case of a delayed system response, you can click the image icon on the right to check the current data response result, or click the image icon on the right to obtain the most recent data for the component. You can also click to view examples to see sample response results for the current component.

Disable Loading State

Check the check box to hide the loading content during component updates and data dashboard previews. Unchecking will display the loading content. The default setting is unchecked.

Controlled Mode

Check the check box to prevent data requests upon the component's initialization. Data requests will only be initiated through global variables or methods configured in the blueprint editor. Unchecking allows for automatic update requests. The default setting is unchecked.

Automatic Update Request

Check the check box to manually set the polling frequency for dynamic polling. Clearing this option disables automatic updates, requiring manual page refreshes or data request triggers through the blueprint editor and global variable events for updates.

Advanced panel

This widget has no interaction events.

Blueprint interaction

  1. Click the image icon in the upper-left corner of the page to go to the Blueprint page.

  2. On the Layer Node tab, add the current widget to the main canvas.

  3. View the Blueprint configuration parameters.image.png

    • Events

      Event

      Description

      When the Data Interface Request Completes

      Triggered after the data API request returns and is processed by the filter. The processed JSON data is also returned. For a data example, see the Data Response section on the Data Source tab of the widget's configuration panel in the canvas editor.

    • Actions

      Action

      Description

      Request data API

      Sends a new request for server-side data, using data passed from an input data processing node or layer node as a parameter. For example, if a Real-Time Messaging Protocol (RTMP) video stream player has its API data source set to https://api.test, and the data passed to the Request data API action is { id: '1'}, the final API request is https://api.test?id=1.

      Import data API

      Processes data in the component's drawing format and imports it to redraw the component without requesting new data from the server. For a data example, see the Data Response area on the Data Source tab in the component configuration panel in the canvas editor.

      Move

      Moves the component to a specified position. See the data example.

          {
      // The movement method. Absolute positioning: to. Relative positioning: by. Default value: to.
        "positionType": "to",
      // The specified position. The x and y coordinates.
      "attr": {
        "x": 0,
        "y": 0
      },
      // The animation method.
      "animation": {
        "enable": false,
        // The animation delay.
        "animationDuration": 1000,
        // The animation curve. Optional values: linear, easeInOutQuad, or easeInOutExpo.
        "animationEasing": "linear"
      }
    }

      Toggle visibility

      Toggles the component's visibility. No parameters are required.

      Show

      Shows the component. See the data example.

      {
  "animationType": "",// The animation method. Optional value: fade. If left blank, there is no animation.
  "animationDuration": 1000,// The animation delay in ms.
  "animationEasing": ""// The animation curve.
}

      Hide

      Hides the component. See the data example.

      {
  "animationType": "",// The animation method. Optional value: fade. If left blank, there is no animation.
  "animationDuration": 1000,// The animation delay in ms.
  "animationEasing": ""// The animation curve.
}

      Update component configuration

      Dynamically updates the component's style configuration. In the Style panel, click Copy configuration to clipboard to obtain the configuration data. Then modify the corresponding style field values in the data processing node on the blueprint editor's configuration page.
Previous：AudioNext：decoration-bar