A live broadcast client multi-component free layout system and method
With its multi-component free layout system, users can freely adjust the layout of the live streaming client interface, solving the problems of fixed interface and cross-device synchronization, enabling personalized customization and layout sharing, and improving the user experience.
Patent Information
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- 章筱颖
- Filing Date
- 2026-03-30
- Publication Date
- 2026-06-23
AI Technical Summary
Existing live streaming clients have a fixed interface layout, which users cannot personalize. The display and hiding of components are limited, cross-device layout synchronization is lacking, and there is no layout sharing mechanism, which affects the user experience.
It employs a multi-source video synthesis module, a component free positioning module, a component size adjustment module, a component hierarchy management module, a component visibility control module, a layout persistence module, and a layout restoration module. It supports users to freely drag and drop, adjust the position and size of components, and supports cross-device synchronization and layout sharing.
It enables users to freely customize the interface layout, reduces information overload, improves the consistent experience across devices, supports layout sharing, and enhances user interaction and viewing experience.
Smart Images
Figure FT_1 
Figure FT_2
Abstract
Description
Technical Field
[0001] This invention relates to the field of internet live streaming technology, specifically to a system and method for freely arranging multiple components in a live streaming client. Background Technology
[0002] With the rapid development of the internet live streaming industry, live streaming platforms have become an important carrier for e-commerce sales, online education, gaming and entertainment. Existing live streaming client interfaces typically include a variety of functional components for displaying video footage, information content, and interactive functions.
[0003] However, existing technologies have the following problems.
[0004] First, the interface layout is fixed, and the position and size of each component are preset by the platform, which users cannot adjust according to their personal preferences.
[0005] Second, the limited control over the visibility of components means that users cannot close or hide unnecessary components, leading to information overload on the interface and affecting the viewing experience.
[0006] Third, there is a lack of cross-device layout synchronization. When users watch live streams on different devices such as mobile phones, tablets, and computers, their personalized interface layout preferences cannot be synchronized, and they need to readjust it every time.
[0007] Fourth, there is a lack of layout sharing mechanism, preventing users from sharing their carefully customized layout schemes with other users.
[0008] Therefore, a technical solution is needed that allows client users to freely customize the interface layout in order to enhance their personalized viewing experience. Summary of the Invention
[0009] The purpose of this invention is to provide a system and method for free layout of multiple components in a live streaming client, solving the technical problem that existing live streaming clients have fixed interface layouts and cannot be customized by users.
[0010] To achieve the above objectives, the present invention adopts the following technical solution.
[0011] A live streaming client multi-component free layout system includes a multi-source video synthesis module, a component free positioning module, a component size adjustment module, a component hierarchy management module, a component visibility control module, a layout persistence module, and a layout recovery module.
[0012] The multi-source video synthesis module is used to receive multiple video streams transmitted from the broadcaster and render them independently on the client side. Each video stream corresponds to an independently operable video component.
[0013] The component free positioning module allows client users to freely drag and drop any component on the interface to position it anywhere within the interface.
[0014] The component size adjustment module allows users to adjust the display size of any component by dragging its edges or corners.
[0015] The component hierarchy management module allows users to adjust the stacking order of components, enabling them to move components to the top or bottom.
[0016] The component display / hiding control module allows users to close, hide, or minimize any non-mandatory components, and provides a quick access point for restoring hidden components.
[0017] The layout persistence module is used to save the user's component layout configuration to local storage or a cloud server.
[0018] The layout restoration module is used to automatically restore the user's saved personalized layout when the user visits again or accesses it across devices.
[0019] Furthermore, the component free positioning module includes a drag detection unit, a position calculation unit, a boundary constraint unit, a magnetic alignment unit, and a mesh adsorption unit.
[0020] The drag detection unit is used to detect user press, move, and release events within the component area.
[0021] The location calculation unit is used to calculate the new location coordinates of the component in real time based on the user's movement trajectory.
[0022] The boundary constraint unit is used to restrict components from being dragged outside the player's visible area.
[0023] The magnetic alignment unit is used to automatically snap and align components when they approach the edge of the interface or other components.
[0024] The grid adsorption unit is used to adsorb the component position to the nearest grid intersection when the grid mode is enabled.
[0025] Furthermore, the component size adjustment module supports both proportional scaling mode and free scaling mode, and has minimum size constraint and maximum size constraint functions.
[0026] Furthermore, the component hierarchy management module supports top, bottom, move up one level, move down one level, and hierarchy locking operations.
[0027] Furthermore, the component display / concealment control module includes a shutdown function, a minimize function, a component tray, a one-click restore function, and a batch operation function.
[0028] Furthermore, the layout configuration data saved by the layout persistence module includes the position coordinates, display size, visibility status, hierarchy order index, and transparency value of each component, as well as the name, creation time, and last modification time of the layout scheme.
[0029] Furthermore, the layout recovery module supports automatic recovery, multi-scheme switching, cross-device synchronization, and conflict resolution functions.
[0030] Furthermore, it also includes a layout sharing module, a layout import module, and a layout reset module.
[0031] The layout sharing module is used to generate a sharing link or QR code from the user's layout configuration.
[0032] The layout import module is used to parse the layout configuration in the share link and apply it to the current interface.
[0033] The layout reset module is used to restore the layout to the default layout or the layout recommended by the broadcaster.
[0034] Furthermore, it also includes a broadcaster layout push module and a layout priority arbitration module.
[0035] The broadcaster layout push module is used to allow the broadcaster to push recommended component layout configurations to the client.
[0036] The layout priority arbitration module is used to determine the priority between the anchor's recommended layout and the user's personalized layout, and the user's personalized layout is used by default.
[0037] Furthermore, it also includes a forced component management module, which marks certain components as forced display components. These components cannot be closed or hidden by the user, but their position and size can be adjusted.
[0038] The present invention also provides a method for free layout of multiple components in a live streaming client, comprising the following steps.
[0039] Step S1: The client receives multiple video streams and component data transmitted from the broadcaster.
[0040] Step S2: Render multiple interactive components on the player interface.
[0041] Step S3: Detect the user's drag operation on any component and update the component's position coordinates in real time.
[0042] Step S4: Detect user's size adjustment operation on any component and update the display size of the component in real time.
[0043] Step S5: Detect user's layer adjustment operation on any component and update the stacking layer order of the components.
[0044] Step S6: Detect user actions to show or hide any component, and update the visibility state of the component.
[0045] Step S7: Save the user's layout configuration to local storage or cloud server.
[0046] Step S8: When the user visits again, read and restore the saved layout configuration.
[0047] The beneficial effects of this invention are as follows.
[0048] First, it allows users to freely drag and adjust the position and size of all components to meet the personalized viewing needs of different users.
[0049] Second, it supports turning off or hiding unnecessary components, reducing information overload on the interface and improving the viewing experience.
[0050] Third, it supports cross-device synchronization of layout preferences, ensuring a consistent personalized experience for users when watching on different devices.
[0051] Fourth, it supports layout sharing, making it convenient for users to exchange excellent layout solutions.
[0052] Fifth, the convenience and accuracy of layout adjustments are improved through magnetic alignment and grid adsorption technologies. Attached Figure Description
[0053] Figure 1 This is a schematic diagram of the system architecture provided in an embodiment of the present invention.
[0054] Figure 2 This is a schematic diagram of the client interface layout provided in an embodiment of the present invention.
[0055] Figure 1 The labels in the code are explained as follows: 101 represents the multi-source video synthesis module, 102 represents the component free positioning module, 103 represents the component size adjustment module, 104 represents the component hierarchy management module, 105 represents the component visibility control module, 106 represents the layout persistence module, 107 represents the layout restoration module, 108 represents the layout sharing module, 109 represents the anchor layout push module, 110 represents the layout priority arbitration module, 201 represents the anchor end, 202 represents the client end, and 203 represents the cloud server.
[0056] Figure 2 The labels are explained as follows: 301 represents the main video playback area, 302 represents video component A, 303 represents video component B, 304 represents functional component C, 305 represents functional component D, 306 represents the component tray area, 307 represents the drag handle, and 308 represents the size adjustment corner point. Detailed Implementation
[0057] The present invention will now be described in further detail with reference to the accompanying drawings and specific embodiments.
[0058] Example 1: System Architecture.
[0059] like Figure 1 As shown, the live streaming client multi-component free layout system of the present invention includes three parts: the broadcaster terminal 201, the client 202, and the cloud server 203.
[0060] The broadcast client 201 is responsible for acquiring and transmitting multiple video streams. The broadcast client 201 can also push recommended component layout configurations to the client through the broadcast layout push module 109.
[0061] The client 202 is the core part of the present invention, including a multi-source video synthesis module 101, a component free positioning module 102, a component size adjustment module 103, a component hierarchy management module 104, a component display / concealment control module 105, a layout persistence module 106, a layout restoration module 107, a layout sharing module 108, and a layout priority arbitration module 110.
[0062] Cloud server 203 is responsible for storing user layout configuration data and enabling cross-device synchronization.
[0063] Example 2: Client interface layout.
[0064] like Figure 2 As shown, the client interface includes the main video playback area 301 and several freely layoutable components.
[0065] The main video playback area 301 displays the main video content of the live stream, serving as the bottom layer of the interface.
[0066] Video component A (302) and video component B (303) can be the anchor's camera footage, auxiliary camera footage, or other video content. These components can be freely dragged and dropped by the user to any position on the interface, moved by dragging handle 307, and resized by adjusting corner point 308.
[0067] Functional component C (304) and functional component D (305) can be any type of functional component. These components also support free dragging, resizing, opacity adjustment, and minimization.
[0068] The component tray area 306 centrally displays all closed or minimized component icons, and users can click on the icons to quickly restore the corresponding components.
[0069] Example 3: Component drag-and-drop operation process.
[0070] The process for handling component drag-and-drop operations is as follows.
[0071] Step one: The user moves their finger or mouse to the drag handle area of the component and presses it.
[0072] Step two: The system detects the press event, enters drag mode, and records the initial position coordinates of the component.
[0073] Step 3: The user moves their finger or mouse, and the system tracks the movement trajectory and calculates the displacement increment.
[0074] Step four: The system adds the displacement increment to the current position of the component and updates the display position of the component in real time.
[0075] Step 5: The system performs boundary constraint detection. If a component is about to move out of the visible area, its position is restricted to within the boundary.
[0076] Step six: The system performs magnetic alignment detection. If the component is close to the edge of the interface or the edge of other components, it will automatically snap into alignment.
[0077] Step 7: The user releases their finger or mouse. The system detects the release event, determines the final position of the component, and exits the drag state.
[0078] Step 8: The system automatically saves the updated layout configuration.
[0079] Example 4: Layout priority arbitration.
[0080] When a user enters the live stream, the layout priority arbitration module determines which layout to use according to the following process.
[0081] First, check if the user has already saved a personalized layout.
[0082] If a personalized layout exists, the user's personalized layout will be loaded, and the process will end.
[0083] If no personalized layout exists, check if the broadcaster has pushed a recommended layout.
[0084] If a streamer recommendation layout exists, load the streamer recommendation layout, and the process ends.
[0085] If none of them exist, the system default layout will be loaded.
[0086] Users can switch layouts at any time using the reset function.
[0087] The above description is only a preferred embodiment of the present invention and is not intended to limit the scope of protection of the present invention. Any modifications, equivalent substitutions and improvements made within the spirit and principles of the present invention should be included within the scope of protection of the present invention.
Claims
1. A live client multi-component free layout system, characterized in that, include: The multi-source video synthesis module is used to receive multiple video streams transmitted from the broadcaster and render them independently on the client side. Each video stream corresponds to an independently operable video component. The component free positioning module allows client users to freely drag and drop any component on the interface, moving the component to any position within the interface; The component size adjustment module allows users to adjust the display size of any component by dragging its edges or corners; The component hierarchy management module allows users to adjust the stacking order of components, enabling them to move components to the top or bottom. The component display / hiding control module allows users to close, hide, or minimize any non-mandatory components, and provides a quick access point to restore hidden components; The layout persistence module is used to save the user's component layout configuration to local storage or a cloud server; The layout restoration module is used to automatically restore a user's saved personalized layout when the user visits again or accesses the site across devices.
2. The system of claim 1, wherein, The component free positioning module includes a drag detection unit, a position calculation unit, a boundary constraint unit, a magnetic alignment unit, and a mesh adsorption unit; the magnetic alignment unit is used to automatically adsorb and align the component when it approaches the edge of the interface or the edge of other components.
3. The system of claim 1, wherein, The layout persistence module stores layout configuration data including the position coordinates, display size, visibility status, hierarchy order index, and transparency value of each component. The position coordinates are expressed in absolute pixel values or relative percentages.
4. The system of claim 1, wherein, The layout restoration module supports automatic restoration, multi-scheme switching, and cross-device synchronization. When multiple devices modify the layout simultaneously, the latest timestamp version is used to resolve conflicts.
5. The system according to claim 1, characterized in that, It also includes a layout sharing module, which generates a sharing link or QR code for users' layout configurations, allowing other users to import and use them; and a layout reset module, which restores the current layout to the system default layout or the layout recommended by the broadcaster.
6. The system according to claim 1, characterized in that, It also includes a broadcaster layout push module and a layout priority arbitration module. The layout priority arbitration module is used to determine the priority between the recommended layout pushed by the broadcaster and the personalized layout saved by the user, and the user's personalized layout is used by default.
7. A method for freely arranging multiple components in a live streaming client, characterized in that, Includes the following steps: S1: The client receives multiple video streams and component data transmitted from the broadcaster. S2: Render multiple interactive components on the player interface; S3: Detects user drag operations on any component and updates the component's position coordinates in real time; S4: Detect user adjustments to the size of any component and update the display size of the component in real time; S5: Detect user operations that adjust the layer of any component and update the stacking order of the components; S6: Detect user actions to control the visibility of any component and update the visibility state of the component. S7: Saves the user's layout configuration to local storage or a cloud server; S8: When the user visits again, read and restore their saved layout configuration.
8. The method according to claim 7, characterized in that, The drag operation in step S3 includes detecting press events, tracking movement trajectories, performing boundary constraint detection, performing magnetic alignment detection, and detecting release events to determine the final position.
9. A computer-readable storage medium having a computer program stored thereon, characterized in that, When the program is executed by the processor, it implements the steps of the method described in claim 7 or 8.
10. An electronic device, characterized in that, It includes a processor, a memory, a display screen, and an input device, wherein the processor executes a computer program in the memory to implement the steps of the method of claim 7 or 8.