Live Video Graphic Drawing With an Interactive Canvas Layer
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Existing browser technologies based on HTML5 cannot perform graphic drawing on live video streams, leading to inefficient data processing and lack of interactive processing capabilities for drawn graphics.
Innovation Solution
A graphic drawing method and apparatus that deploys a canvas on an upper layer of the video stream display window, using structured feature data of basic graphics to render and draw target graphics in real-time, reducing data processing demands and enhancing efficiency.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Adaptability or versatility
If HTML5 video and canvas tags are used to implement graphic drawing, then graphic drawing capability is achieved, but data processing amount increases and processing efficiency decreases
Solution Approach 1:
The patent introduces a canvas element as an intermediary layer between the video stream and the graphic drawing. The canvas is deployed on the upper layer of the video stream display window, allowing graphic drawing to be performed on the canvas rather than directly processing video data. This mediator approach separates the video playback from the graphic drawing operations, significantly reducing the data processing amount and improving processing efficiency while maintaining graphic drawing capability.
2Adaptability or versatility
If complex graphics drawing is implemented through video and canvas tags, then graphic drawing function is achieved, but interactive processing capability is lost
Solution Approach 1:
The patent implements dynamic interaction by allowing the canvas to respond to user operations in real-time. The canvas element maintains interactivity by enabling users to select, modify, and manipulate drawn graphics through mouse or touch events. This dynamic interaction capability is preserved because the canvas operates as an independent interactive layer on top of the video stream, allowing users to perform selection and other interactive processing on the drawn graphics without affecting video playback.
3Productivity
If graphic drawing is performed on live video, then real-time annotation is achieved, but data processing amount increases
Solution Approach 1:
The patent segments the display system into two independent layers: the video stream layer and the canvas layer. The canvas is deployed on the upper layer of the video stream display window, allowing graphic drawing to be performed separately on the canvas rather than processing the entire video stream. This segmentation approach enables real-time annotation capability while significantly reducing the data processing amount, as only the canvas elements need to be updated rather than the entire video data.
Data Source
Figure 1~2
Figure 3~4
Figure 5~6
AI summary
Provided are a graphic drawing method applied to a terminal device. The terminal device includes a canvas deployed on an upper layer of a video stream display window and structured feature data of at least one basic graphic matching the canvas. The method includes: monitoring in real time a target graphic drawing event that is performed by a paintbrush based on a selected basic graphic; upon monitoring the target graphic drawing event, acquiring, for each time point in which each frame of image in a video stream is displayed, a drawing coordinate of the paintbrush at each time point; and rendering and drawing on the canvas a target graphic corresponding to an image displayed at each time point according to structured feature data of the selected basic graphic and the drawing coordinate. Further provided are a graphic drawing apparatus, a device, and a storage medium.