Web Browser Session Recording and Editing via JSON Segmentation
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Conventional methods cannot capture, edit, and playback web browser sessions with the desired level of detail and interaction, failing to preserve hypertext links and allow for modification of recorded elements or interactions, which limits their use for entertainment, instructional purposes, and detailed analysis of user interactions.
Innovation Solution
A method and system that uses a web browser's native API to record and store web pages and user interactions in a unique data format, enabling editing and playback, with a core engine implemented in JavaScript and server configurations for playback, allowing for the creation of entertaining or instructional narratives.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Loss of information
If conventional video screen recording is used, then recording of web browser sessions is achieved, but editing capability and preservation of interactive elements are lost
Solution Approach 1:
The patent segments the web browser session into discrete, editable components including individual DOM elements, user interactions, and page states. Each element is captured as a separate data object with its own properties and metadata, allowing selective editing of specific interactions or elements without affecting the entire recording. This segmentation enables precise control over which elements are preserved and how they can be modified during editing.
Solution Approach 2:
The patent introduces an intermediary data structure that bridges the gap between raw browser session data and editable recording content. This intermediary layer processes and transforms the captured browser events into a standardized format that preserves hypertext links and interactive elements while making them amenable to editing. The intermediary acts as a mediator that maintains the fidelity of original interactions while enabling subsequent modification.
2Loss of information
If detailed recording of all elements and interactions is implemented, then complete capture of user session is achieved, but data complexity and processing requirements increase
Solution Approach 1:
The patent divides the comprehensive browser session data into manageable segments organized by DOM element, interaction type, and temporal sequence. Each segment contains only the relevant data for that specific element or interaction, reducing overall complexity while maintaining completeness. The segmented structure allows efficient processing and storage of detailed recording data without overwhelming system resources.
Solution Approach 2:
The patent applies local quality by capturing different levels of detail for different elements based on their importance and interactivity. High-priority elements such as clickable links, form inputs, and navigation elements are recorded with maximum detail including full metadata and interaction properties. Less critical elements are recorded with reduced detail, optimizing the balance between completeness and data complexity management.
3Adaptability or versatility
If video screen recording is used, then recording functionality is achieved, but ability to modify and personalize content during playback is lost
Solution Approach 1:
The patent implements dynamic content by storing recording data in a flexible, modifiable structure that allows real-time changes during playback. The recorded elements are not fixed but can be dynamically replaced, customized, or personalized based on viewer preferences or contextual factors. This dynamic approach enables content modification while preserving the original editable elements for future adjustments.
Solution Approach 2:
The patent enables parameter changes by storing detailed metadata and properties for each recorded element that can be modified independently. Users can change parameters such as element visibility, interaction timing, content text, and playback conditions without reconstructing the entire recording. This parameter-based approach provides versatile content personalization while maintaining the integrity of the original recorded session data.
Data Source
Figure 1
Figure 2
Figure 3
AI summary
A method and system for recording, editing, and playback of user computer sessions, which captures a series of events during the session, including the initial state of desktop and all user interactions with the application(s). The events are recorded and stored on the server as a set of JSON objects, and the frames representing the session are editable, including insertion of different text, audio, video and images, into the recording. The recorder application comprises a core engine implemented in JavaScript and various server configurations available, either local or remote, for editing and playback.