Client-Side Video Rendering for Real-Time Personalized Overlays
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Personalised videos rendered on servers are computationally expensive and introduce lag, making large-scale marketing campaigns costly and inefficient.
Innovation Solution
Client-side video rendering system that performs personalisation and rendering operations locally on the client device, using a web browser with a client-side renderer and cached graphical functions, synchronising overlays with video progress to ensure smooth playback.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Adaptability or versatility
If server-side rendering is used for personalised videos, then video personalisation is achieved, but computational cost becomes prohibitively expensive and rendering lag increases
Solution Approach 1:
The patent extracts the rendering operation from the server and places it on the client device. The client-side renderer receives video streams and personalised content parameters, then performs the rendering locally using WebGL or Canvas API, eliminating the need for expensive server-side rendering infrastructure while maintaining personalisation capabilities
Solution Approach 2:
The patent creates a copy of the rendering function that runs locally on the client device. Instead of relying on server rendering, the client device executes a local renderer that replicates the personalisation logic, allowing multiple videos to be rendered simultaneously without server resource constraints
2Adaptability or versatility
If server-side rendering is used for personalised videos, then video personalisation is achieved, but rendering time lag increases significantly
Solution Approach 1:
The rendering operation is extracted from the server and executed locally on the client device. This eliminates network transmission delays and server processing queues, allowing immediate rendering of personalised videos as they are requested, reducing lag from 6-11 seconds to near-instantaneous rendering
Solution Approach 2:
The client device pre-loads rendering libraries and graphical functions before video playback is needed. This preliminary preparation ensures that when a personalised video is requested, the rendering can proceed immediately without additional loading delays, further reducing perceived rendering time
3Adaptability or versatility
If third-party video rendering services are used, then video personalisation is achieved, but infrastructure complexity and cost increase
Solution Approach 1:
The patent removes the complex server-side rendering infrastructure entirely and replaces it with a client-based approach. Personalisation is achieved through URL parameters and local rendering, eliminating the need for expensive AWS servers, S3 storage, and complex video processing pipelines while maintaining the same personalisation functionality
Solution Approach 2:
The client device performs self-service rendering using built-in graphics capabilities. The browser's WebGL or Canvas API provides the rendering engine, and the client device independently handles video streaming, personalisation parameter application, and graphical overlay without requiring external server infrastructure or third-party services
Data Source
AI summary
A system and method for client-side video rendering uses a client device to render personalised content videos in real-time, thus avoiding the cost associated with server-side rendering. The process involves a client device's web browser loading a web page containing a client-side renderer, typically in the form of a JavaScript file. The browser is configured to play videos from a hosting source, while the client-side renderer overlays graphics on the video based on personalised content and a video timeline. The system may also stream videos from hosting to avoid local storage and buffering lag, and it accounts for network latency by synchronising graphics with the video progress. Additionally, the client-side renderer and video timeline configurations can be cached separately, minimising data downloads, and a URL service may be used to resolve URLs while preserving customer data privacy by hosting the web page internally.

