WHEP Video Widget

Widget Type: rc-whep-video

Configuration

Connects to a stream from the media server and displays the video via WebRTC WHEP. See WHIP Sender for more information on how to configure the robot agent to publish streams to the media server.

Supported configs:

• title: Title to appear on the top left
• stream: identifier of the stream to connect to
• subscribe: subscribes to the source stream on the agent to allow the agent to start/stop publishing to the media server (requires whip-sender component)
• connect: 'auto' | 'manual' | 'always' - auto will connect to the video topic on load, manual will require the user to click the connect button, always will always try to connect to the video topic when it disconnects
• coordinatesCfg: Allows you to configure clickable zones for camera control, see example below
• toolbar: Allows you to configure the toolbar such as hide it, see Toolbar Configuration below
• debug: true | false - enables debug logging for the WHEP connection
• displayOptions: Allows setting 360 pan/zoom viewer, rendering the streaming video texture in 360 - defaults to displayOptions.mode = 'flat'
• demandTopic: Allows you to configure the demand topic to subscribe to, defaults to /whip-sender/demand. For DJI Dock use /dji/cameras/streams/demand.
• crosshair: Allows you to display a crosshair in the center of the video, see Crosshair Configuration below

Note: Audio is not currently supported for WHEP videos.

Toolbar Configuration

• hide: true | false - hides the toolbar completely
• connect: true | false - hides the connect button
• title: true | false - hides the title
• fullscreen: true | false - hides the fullscreen button
• fps: true | false - hides the fps counter

Display Options Configuration

Display Options for flat

{
  "displayOptions": {
    "mode": "flat",
    "rotation": "none | rotate90cw | rotate180 | rotate90ccw"
  }
}

Display Options for 360

{
  "displayOptions": {
    "mode": "360",
    "flipTexture": false,
    "zoomSpeed": -0.28,
    "dampingFactor": 0.25,
    "exposure": 0.6,
    "toneMapped": true
  }
}

• mode: 'flat' | '360' - enable 360 3D renderer or typical video element - 'flat' by default.
• flipTexture: true | false - inverts the video
• zoomSpeed: float number mouse wheel zoom step magnitude
• dampingFactor: float number smoothing to pan and zoom features, will allow for delay overshoot in pan calculation, larger numbers > 1.0 not advisable
• exposure: float number - Controls the overall exposure (brightness) of the rendered scene (default: 0.6)
• toneMapped: true | false - Enables/disables tone mapping for the video material to handle high dynamic range (default: true)

Crosshair Configuration

• enabled: true | false - shows the crosshair
• width: number - the width of the crosshair (default: 40)
• height: number - the height of the crosshair (default: 40)

{
  "crosshair": {
    "enabled": true,
    "width": 40,
    "height": 40
  }
}

Example

{
  "title": "SpotCAM",
  "stream": "spot/spotcam/streams/video",
  "connect": "auto",
  "subscribe": true,
  "toolbar": {
    "hide": false,
    "fps": true
  },
  "coordinatesCfg": [
    {
      "id": "panTilt",
      "label": "Pan/Tilt",
      "type": "point",
      "expression": "(args) => {\n          return {\n            \"hfovPercentage\": (args[0].x - .5) * 100,\n            \"vfovPercentage\": -(args[0].y - .5) * 100,\n          }\n        }",
      "action": "/spot/spotcam/ptz/movePositionByFoVPercentage"
    },
    {
      "id": "zoom",
      "label": "Zoom",
      "type": "rect",
      "expression": "(args) => {\n          const zoomLevel = 30 - Math.round(Math.abs(args[0].x - args[1].x) * 30);\n          return {\n            \"zoom\": {\n              \"value\": zoomLevel,\n            },\n          };\n        }",
      "action": "/spot/spotcam/ptz/setPosition"
    }
  ]
}