Skip to content

Latest commit

 

History

History
86 lines (66 loc) · 4.45 KB

0129-video-replay-envelope.md

File metadata and controls

86 lines (66 loc) · 4.45 KB
  • Start Date: 2024-02-06
  • RFC Type: feature
  • RFC PR: #129
  • RFC Status: approved

Summary

In order to capture video replays and present them to the user, we need to define/decide:

  • how to transport the video data to the server
  • how to integrate the video data into the RRWeb JSON format
  • how to combine multiple replay chunks to a single replay session

All of these influence one another and need to be considered together in a single RFC.

Note: SDK-side implementation that is currently being worked on relies on taking screenshots and encoding them to a video. This is based on an evaluation where a video has much smaller size than a sequence of images (TODO fix these: factor of X for 720p video).

Motivation

We need this to to capture replays on platforms where it's not possible/feasible to produce an HTML DOM (i.e. the native format supported by RRWeb). For example: mobile apps.

Options Considered

Using a video, with EnvelopeItem:ReplayVideo

  • From the SDK, we would send an envelope with the following items: Replay, ReplayVideo and ReplayRecording.

  • The newly introduced item type, ReplayVideo, is used to transport the video data. The envelope item payload would consist of a single header line ({"segment_id": 4}), followed by a new line character (\n), followed by the raw video data.

  • Additionally, it would be accompanied by an envelope item ReplayRecording. The payload of this item consists of a header, e.g. {"segment_id": 12}, followed by a new line and the RRWeb JSON.

  • The RRWeb JSON may start with a single event of type EventType.Meta, with viewport (screen) dimensions. The EventType.Meta event is usually present in the first segment of a replay, or whenever the view port or screen orientation changes.

    {
  "type": 4,
  "timestamp": 1681846559381,
  "data": {
    "href": "",
    "height": 1920,
    "width": 1080
  }
}

    Note: these dimensions may be different than the video dimensions in case only part of the screen is captured. In that case, the following video event will have non-zero data.payload.left & data.payload.top fields (see below).

  • The RRWeb JSON must contain a single event of type EventType.Custom, with data.tag == 'video'. This event must come at the first position in the array, or at the second position if the EventType.Meta event is present. If there's other data the UI needs, we can add it alongside the type to the data field. Because there's only a single ReplayVideo sent with a single ReplayRecording, there's a one-to-one mapping without further details necessary in the actual RRWeb JSON.

    {
  "type": 5,
  "timestamp":1681846559381,
  "data": {
    "tag": "video",
    "payload": {
      "segmentId": 4,
      "size": 3440,
      "duration": 5000,
      "encoding": "whatever",
      "container": "whatever",
      "height": 1920,
      "width": 1080,
      "frameCount": 50,
      "frameRateType": "constant|variable",
      "frameRate": 10,
      "left": 0,
      "top": 0,
    }
  }
}

    Note: The format is based on RRWeb Custom event type specification.

Other considered options

Using the existing RRWeb canvas replay format (image snapshots)

It would be easy to implement this because the SDK already captures screenshots and with RRWeb being able to show them, there's not much to do. However, this would come with significantly larger data transfer size (compared to video), which should be kept as low as reasonably possible, considering this is currently aimed at mobile apps. Additionally, these images would need to be encoded in base64 so that they can be embedded in the RRWeb JSON.