Front-end video playing page picture frame method based on Vue framework

Abstract

The embodiment of the invention relates to the technical field of video annotation, and discloses a front-end video playing page picture frame method based on a Vue framework. According to the video playing page diversified picture frame technology based on interaction of the Vue frame, the U I frame and the picture frame plug-in, the picture frame is performed on the video to be played in the U I frame, so that accurate picture frame in the video page is realized. Besides, through a method of acquiring historical echo data of the camera, an area needing a picture frame can be selected more conveniently and quickly, selection and searching time is reduced, correctness and availability of the historical echo data to the current label are further determined through correctness judgment of the echo data, picture frame time and resource occupation are saved, and the method is suitable for popularization and application. And the picture frame can work more quickly and accurately.

Description

Technical Field

[0001] The present invention relates to the technical field of video annotation, and in particular to a method for drawing a frame of a front-end video playback page based on a Vue framework. Background Art

[0002] This section is intended to provide a background or context to the embodiments of the invention recited in the claims. No admission is made that the description herein is prior art by inclusion in this section.

[0003] Video data provides a more intuitive and comprehensive record of information for people's life, study and work. In order to facilitate people to pay attention to the information of certain key areas of the video more quickly, it is necessary to annotate the video. The current technology of video playback frame based on Vue page mainly uses algorithms and streaming media calculations to frame from the source of the video. The technology is not very mature. Therefore, the existing technology needs to be improved. Summary of the invention

[0004] In order to solve the problem of the maturity of current video framing technology, the present invention proposes a front-end video playback page framing method based on the Vue framework to achieve precise framing.

[0005] In order to achieve the above object, the present invention adopts the following technical solution.

[0006] First of all, on the one hand, the present invention provides a method for drawing frames on a front-end video playback page based on a Vue framework, including initialization: starting a UI framework, selecting a video that needs to be framed, and generating a control initialization page; drawing frames: on a page where the video is played, drawing frames on the video area that needs to be marked; selecting frame parameters: popping up frame parameters, and selecting frame parameters; frame echoing: displaying the drawn frame on the inclined surface of the video.

[0007] The present invention is a diversified frame technology for video playback pages based on the interaction of a Vue framework, a UI framework and a frame plug-in. By framing the video being played in the UI framework, accurate framing is achieved in the video page.

[0008] In some implementations, after generating the control initialization page, the process also includes obtaining historical frame data of the camera of the video that needs a frame from the back end and echoing it; determining whether there is echo data, and if so, selecting whether the frame type is a rectangle or a polygon, and if not, starting to draw the frame.

[0009] In some implementations, after determining that there is echo data, it is also determined whether the echo data is correct. If so, the frame type is selected to be a rectangle or a polygon. If not, it is determined that the coordinates are abnormal and the frame drawing begins.

[0010] By obtaining the historical echo data of the camera, the area that needs to be framed can be selected more conveniently and quickly, reducing the time for selection and searching. Further, by judging the correctness of the echo data, the correctness and availability of the historical echo data for the current annotation can be determined, saving framing time and resource usage, making the framing work faster and more accurate.

[0011] In some implementations, the picture frame echo further includes dragging, enlarging, deleting, setting the picture frame line color and / or setting the picture frame background color of the picture frame to meet the diverse needs of users and improve user experience.

[0012] In some implementations, the method further includes: transmitting back: transmitting the data of the drawn frame to a background for displaying it back the next time the video of the camera is played.

[0013] In some implementations, the picture frame parameters include at least inside the circle / outside the circle.

[0014] In some implementations, the preset position of the camera for the video that needs a frame is single, and the single preset position can ensure that the background of the video acquired and played by the same camera is basically uniform, which facilitates rapid positioning of the video content and reduces interference and resource consumption caused by inconsistent backgrounds.

[0015] On the other hand, the present invention also provides an electronic device, comprising: a memory for storing a computer software program; a processor for reading and executing the computer software program, thereby implementing the above-mentioned method of front-end video playback page frame based on the Vue framework.

[0016] Finally, the present invention also provides a non-transitory computer-readable storage medium, in which a computer software program is stored. When the computer software program is executed by a processor, the method of drawing a front-end video playback page frame based on the Vue framework is implemented. BRIEF DESCRIPTION OF THE DRAWINGS

[0017] The drawings described herein are used to provide a further understanding of the present invention and constitute a part of this application. The exemplary embodiments of the present invention and their descriptions are used to explain the present invention and do not constitute an improper limitation of the present invention. In the drawings:

[0018] Figure 1 It is a flow chart of the method for drawing a front-end video playback page frame based on the Vue framework in Example 1 of the present invention. DETAILED DESCRIPTION

[0019] Video data provides a more intuitive and comprehensive record of information for people's life, study and work. In order to facilitate people to pay attention to the information of certain key areas of the video more quickly, the video needs to be labeled. The current technology of video playback framing based on Vue pages mainly uses algorithms and streaming media calculations to frame the video source, and the technology is not very mature. The video framing of this application is to accurately frame the video page according to the required frame after the video is played. The only constant is to keep the preset position single, which is more suitable for gun cameras.

[0020] In order to make the objectives, technical solutions and advantages of the present invention more clearly understood, the present invention is further described in detail below in conjunction with embodiments and drawings. The exemplary embodiments of the present invention and their description are only used to explain the present invention and are not intended to limit the present invention.

[0021] It should be noted that, under the premise of no conflict, the various embodiments or technical features described below can be arbitrarily combined to form new embodiments, which also fall within the scope of protection of the present invention.

[0022] In the description of the present invention, the following terms need to be explained:

[0023] As for directional words, the terms "center", "lateral", "longitudinal", "length", "width", "thickness", "up", "down", "front", "back", "left", "right", "vertical", "horizontal", "top", "bottom", "inside", "outside", "clockwise", "counterclockwise" and the like indicating directions and positional relationships in the specification and claims of this application are based on the directions or positional relationships shown in the drawings and are only for the convenience of describing the present invention and simplifying the description, and do not indicate or imply that the device or element referred to must have a specific direction, be constructed and operated in a specific direction, and should not be understood as limiting the specific scope of protection of the present invention.

[0024] The terms "first", "second", etc. in the description and claims of the present application are used to distinguish similar objects and are not necessarily used to describe a particular sequence or order.

[0025] The terms "including" and "having" and any variations thereof in the specification and claims of this application are intended to cover non-exclusive inclusions. For example, a process, method, system, product or apparatus comprising a series of steps or units is not necessarily limited to those steps or units explicitly listed, but may include other steps or units not explicitly listed or inherent to these processes, methods, products or apparatuses.

[0026] When an element is referred to as being "fixed to" or "disposed on" another element, it may be directly on the other element or there may be an intermediate element. When an element is referred to as being "connected to" another element, it may be directly connected to the other element or there may be an intermediate element. When an element is referred to as being "provided with" another element, it may be provided on the surface or inside of the element.

[0027] Unless explicitly stated otherwise, throughout the specification and claims, the term "comprise" or its variations such as "include" or "comprising", etc. will be understood to include the stated elements or components but not to exclude other elements or other components.

[0028] The term "electrical connection" in the specification and claims of this application may refer to a circuit connection with physical contact or a communication connection, which may be a wired communication connection or a wireless communication connection.

[0029] Example 1

[0030] First, this embodiment provides a method for drawing a front-end video playback page frame based on the Vue framework, such as Figure 1 As shown, the following steps are included:

[0031] (1) Initialization: First, start the UI framework, select the video that needs to be framed, and generate the control initialization page; specifically, the number of devices required for playback can be obtained from UI frameworks such as element-plus and ant-des ign-vue, which can be a single device or an array of devices, and then the video that needs to be framed can be played by clicking or dragging the camera list to generate the video control initialization page that needs to be played; based on the diversified framing technology of the video playback page that interacts with the Vue framework, UI framework, and frame plug-in, accurate framing is achieved in the video page by framing the video being played in the UI framework.

[0032] Optionally, in some implementations, historical frame data of the camera of the video that needs to be framed can also be obtained from the back end and echoed; determine whether there is echo data, if so, further select whether the frame type is rectangular or polygonal, and then enter step (2) framing, if not, directly enter step (2) start framing.

[0033] Optionally, in some embodiments, in order to improve the accuracy of the picture frame, after the above judgment that there is echo data, it is possible to further judge whether the echo data is correct. If so, the picture frame type is selected as a rectangle or a polygon, and then enter step (2). If not, it is judged that the coordinates are abnormal, and the coordinate abnormality information is thrown, and directly enter step (2) to start drawing the frame.

[0034] (2) Frame: On the video playing page, draw a frame around the video area that needs to be marked. Specifically, select the frame type (rectangular or polygonal) through the frame button on the page initialization, then click the Start Frame button, then move the mouse to the video playing page, select the desired frame position, and accurately draw the video related area that needs to be marked.

[0035] (3) Select frame parameters: After drawing, the page will pop up some parameters such as whether to draw inside or outside the circle. You can also add some other frame judgment parameters and click OK;

[0036] (4) Frame echo: After the frame parameters are determined, the rectangle or polygon just drawn will appear on the video page. After drawing the frame, you can also drag the position, zoom in, delete, and perform a series of operations. The line color and background color of the frame can also be changed according to specific needs to meet the diverse needs of users and improve the user experience.

[0037] Furthermore, the above method also includes:

[0038] (5) Return: The data of the drawn frame is transmitted to the background, and it is used for echoing when the video of the camera is played next time. The data of the drawn frame is transmitted to the background, and the frame is echoed when the camera is played next time. It can also be deleted or reset.

[0039] Optionally, in this embodiment, the preset position of the camera for the video that needs a frame is single. The single preset position can ensure that the background of the video acquired and played by the same camera is basically unified, which facilitates the rapid positioning of the video content and reduces the interference and resource consumption caused by the inconsistent background.

[0040] On the other hand, this embodiment also provides an electronic device, including: a memory for storing a computer software program; a processor for reading and executing the computer software program, thereby implementing the above-mentioned method of front-end video playback page frame based on the Vue framework.

[0041] Finally, this embodiment also provides a non-transitory computer-readable storage medium, in which a computer software program is stored. When the computer software program is executed by a processor, the method of drawing a front-end video playback page frame based on the Vue framework is implemented.

[0042] Finally, it should be pointed out that the above embodiments are only used to illustrate the technical solutions of the present invention, rather than to limit them. Although the present invention has been described in detail with reference to the above embodiments, a person skilled in the art should understand that the technical solutions described in the above embodiments can still be modified, or some of the technical features can be replaced by equivalents, and these modifications or replacements do not deviate the essence of the corresponding technical solutions from the spirit and scope of the technical solutions of the embodiments of the present invention.

Claims

1. A method for drawing a front-end video playback page frame based on a Vue framework, characterized in that: include: Initialization: Start the UI framework, select the video that needs to be framed, and generate the control initialization page; Frame: On the video playing page, frame the video area that needs to be marked; Select the picture frame parameters: The picture frame parameters pop up and select the picture frame parameters; Frame Echo: Display the drawn frame on the video bevel.

2. The method for drawing a front-end video playback page frame based on the Vue framework according to claim 1, characterized in that: After generating the control initialization page, it also includes, Obtain the historical frame data of the camera of the video that needs frame from the backend and echo it; Determine whether there is echo data. If so, select the frame type, whether it is a rectangle or a polygon. If not, start drawing the frame.

3. The method for drawing a front-end video playback page frame based on the Vue framework according to claim 2 is characterized in that: After determining that there is echo data, it is also determined whether the echo data is correct. If so, the frame type is selected to be a rectangle or a polygon. If not, it is determined that the coordinates are abnormal and the frame drawing begins.

4. The method for drawing a front-end video playback page frame based on a Vue framework according to claim 1 or 3, characterized in that: The picture frame echo also includes dragging, enlarging, deleting, setting the picture frame line color and / or setting the picture frame background color.

5. The method for drawing a front-end video playback page frame based on the Vue framework according to claim 4 is characterized in that: The method further comprises: transmitting back: transmitting the data of the drawn frame to the background.

6. The method for drawing a front-end video playback page frame based on the Vue framework according to claim 5 is characterized in that: The picture frame parameters at least include inside / outside the circle.

7. The method for drawing a front-end video playback page frame based on the Vue framework according to claim 6 is characterized in that: The preset position of the camera of the video requiring a frame is single.

8. An electronic device, characterized in that: include: Memory for storing computer software programs; A processor is used to read and execute the computer software program, thereby implementing the method of drawing a front-end video playback page frame based on the Vue framework as described in any one of claims 1-7.

9. A non-transitory computer-readable storage medium, characterized in that: The storage medium stores a computer software program, and when the computer software program is executed by the processor, the method for drawing a front-end video playback page frame based on the Vue framework as described in any one of claims 1 to 7 is implemented.

Images