Skip to main content

Web RTC Video Widget

Widget Type: rc-webrtc-video

Web RTC Video Widget

Configuration​

Subscribes to an RTP topic and converts the RTP stream to a video stream via WebRTC. The video stream is then rendered to a video element, if there is also an audio stream it will be added to the video element also.

The videos supported are only h264 encoded videos and the audio is only opus encoded audio.

Supported configs:​

  • title: Title to appear on the top left
  • topic: URI to video topic
  • audioTopic: URI to audio topic
  • logLevel: error | warn | trace - allows you to debug the telemetry being retrieved on the service (see rtp-webrtc service for implementation details)
  • connect: 'auto' | 'manual' - auto will connect to the video topic on load, manual will require the user to click the connect button
  • button: A button that calls a service
  • 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
  • mimeType: Allows you to specify the mime types for the video and audio streams, defaults to 'video/h264' and 'audio/opus'
  • displayOptions: Allows setting 360 pan/zoom viewer, rendering the streaming video texture in 360 - defaults to displayOptions.mode = 'flat'

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​

{
  "displayOptions": {
    "mode": "flat | 360",
    "flipTexture": false,
    "zoomSpeed": 8,
    "dampingFactor": 0.2,
  },
}
  • 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

Example​

{
  "title": "SpotCAM",
  "topic": "spot/spotcam/streams/video",
  "audioTopic": "spot/spotcam/streams/audio",
  "logLevel": "error",
  "connect": "auto",
  "toolbar": {
    "hide": false
  },
  "mimeType": {
    "video": "video/h264",
    "audio": "audio/opus"
  },
  "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"
    }
  ]
}