An Overview of Web Screen Recording Techniques and Implementation

The rapid development of internet technologies has made web screen‑recording mature, enabling use cases such as remote exam proctoring, bug reproduction, and live streaming. The article introduces two categories of screen recording: perceptual (user‑aware) and non‑perceptual (user‑unaware), and explains their implementation principles.

Perceptual screen recording typically relies on WebRTC. The browser API navigator.mediaDevices.getDisplayMedia prompts the user for permission and returns a media stream that can be recorded with MediaRecorder . The article provides the core initialization code:

const tracks = []; // media data
const options = {
  mimeType: "video/webm; codecs=vp8" // media format
};
let mediaRecorder;
// request user permission and start recording
navigator.mediaDevices.getDisplayMedia(constraints).then((stream) => {
  startFunc(stream);
});
function start(stream) {
  mediaRecorder = new MediaRecorder(stream, options);
  mediaRecorder.ondataavailable = event => {
    if (event?.data?.size > 0) {
      tracks.push(event.data); // store media data
    }
  };
  mediaRecorder.start();
  console.log("************开始录制************");
}
function stop() {
  mediaRecorder.stop();
  console.log("************录制结束************");
}
interface constraints {
  audio: boolean | MediaTrackConstraints;
  video: boolean | MediaTrackConstraints;
}

Playback is achieved by converting the stored tracks into a Blob and assigning its URL to a video element:

function replay() {
  const video = document.getElementById("video");
  const blob = new Blob(tracks, { type: "video/webm" });
  video.src = window.URL.createObjectURL(blob);
  video.srcObject = null;
  video.controls = true;
  video.play();
}

Because the media data is generated in real time, it can also be used for live streaming by setting video.srcObject = window.stream :

function live() {
  const video = document.getElementById("video");
  video.srcObject = window.stream;
  video.controls = true;
  video.play();
}

The article notes browser compatibility considerations for the WebRTC approach.

Non‑perceptual screen recording records user actions without explicit consent, typically by capturing DOM changes. Two methods are discussed:

Canvas‑based screenshot stitching (disfavoured due to high bandwidth consumption).

rrweb, an open‑source library that snapshots the DOM and records incremental changes as JSON.

rrweb consists of three parts: rrweb‑snapshot , rrweb , and rrweb‑play . rrweb‑snapshot provides snapshot (full DOM serialization) and rebuild (DOM reconstruction) APIs. The article shows how to deep‑clone the document and replace it during replay:

// Deep clone document element
const docEl = document.documentElement.cloneNode(true);
// Re‑attach during replay
document.replaceChild(docEl, document.documentElement);

During snapshot creation, relative URLs are converted to absolute, styles are inlined, scripts are disabled (e.g., converting <script> to <noscript> ), and form values are captured.

rrweb records incremental changes (Oplog) using a record API. Each entry contains a type, data (adds, removes, attribute changes, etc.), and a timestamp. Example type definitions are provided in the article.

let Oplog: OplogObject[];
interface OplogObject {
  /** type values: 0‑DomContentLoaded, 1‑Load, 2‑FullSnapshot, 3‑IncrementalSnapshot, ... */
  type: Number,
  data: {
    adds: [],
    attributes: [],
    removes: [],
    source: Number, // incremental type (e.g., Mutation, MouseMove, ...)
    text: String | undefined,
  },
  timestamp: Number,
}

Replay is performed by loading the initial snapshot, then applying each incremental operation in timestamp order, typically using requestAnimationFrame for smooth playback. The rrweb‑player UI adds controls for pause, seek, and speed adjustment.

In the conclusion, the article compares the two approaches: perceptual recording suits real‑time interactive scenarios (online exams, live streaming), while non‑perceptual recording is better for audit trails, bug reproduction, and product analytics. The author notes that, due to data‑privacy concerns, their team prefers perceptual recording for pilot projects.

References include the rrweb GitHub repository and a Chinese tutorial on implementing page recording and replay.