An animation playing method, device, computer device and storage medium

Abstract

The present application provides an animation playing method, apparatus, computer device and storage medium. The target video requested to be played by the animation playing request is determined, a video tag and a canvas tag are created in a browser engine, and then the pulling, loading and hidden playing of the low-definition video stream of the target video are realized based on the video tag. And based on the canvas tag, the video frames hidden and played in the current video tag are drawn into the shader in the webGL interface. The GPU is called through the interface of the shader to perform sharpening and matte processing on the video frames in the shader to obtain the target video frames, and the target video frames are rendered to a specified position (the specified position is related to the page displayed in response to the animation playing request). The present application not only realizes the purpose of playing high-definition animations based on low-definition videos depending on the GPU, but also reduces the impact of animation playing on the CPU performance of electronic devices and improves the smoothness of animation playing.

Description

Technical Field

[0001] The present invention relates to the technical field of animation playback, and more specifically, to an animation playback method, device, computer device, and storage medium. Background Art

[0002] With the rapid development of animation technology, the application of chroma key technology is becoming more and more widespread. Chroma key technology usually shoots an object on a background of the same color, and differentiates the foreground and the background through the special hue information of the background color, so as to achieve the purpose of automatically removing the background and retaining the foreground.

[0003] When implementing animation playback, the existing animation playback technology usually sets the transparency of the pixel blocks of the background in each video frame to 0 in the CPU mode canvas on the web side, so as to achieve the purpose of removing the background in the video frame and retaining the foreground for animation playback.

[0004] This animation playback technology needs to rely on the CPU of the electronic device to draw and render the video frame, which will not only affect the performance of the CPU of the electronic device, but even cause the electronic device to run in a stuck state. Especially when playing high-definition animations, the stuck frequency of the electronic device is further increased, and the animation playback is not smooth. Summary of the Invention

[0005] In view of this, in order to solve the above problems, the present invention provides an animation playback method, device, electronic device, and storage medium to reduce the impact of animation playback on the CPU performance of the electronic device and improve the smoothness of animation playback on the basis of realizing high-definition animation playback. The technical solutions are as follows:

[0006] An animation playback method includes:

[0007] Receiving an animation playback request and determining a target video requested to be played by the animation playback request;

[0008] Creating a video tag and a canvas tag in the browser engine;

[0009] Invoking the video tag to pull, load, and hide the playback of the low-definition video stream of the target video;

[0010] Based on the canvas tag, drawing the video frame hidden and played in the current video tag to a shader in the webGL interface;

[0011] Calling the GPU through the interface of the shader to perform sharpening and matte processing on the video frame in the shader to obtain a target video frame, and rendering the target video frame to a specified position; the specified position is related to the page displayed in response to the animation playback request.

[0012] An animation playback device, comprising:

[0013] A target video determination unit, configured to receive an animation playback request and determine a target video requested to be played by the animation playback request;

[0014] A label creation unit, configured to create a video label and a canvas label in a browser engine;

[0015] A first playback unit, configured to call the video label to pull, load and hide the playback of a low-definition video stream of the target video;

[0016] A drawing unit, configured to draw a video frame currently hidden and played in the video label to a shader in a webGL interface based on the canvas label;

[0017] A second playback unit, configured to call a GPU through an interface of the shader to perform sharpening and matte extraction processing on the video frame in the shader to obtain a target video frame, and render the target video frame to a specified position; the specified position is related to a page for responding to the animation playback request and displaying.

[0018] A computer device, comprising: a processor and a memory, the processor and the memory are connected through a communication bus; wherein, the processor is configured to call and execute a program stored in the memory; the memory is configured to store a program, and the program is used to implement the animation playback method.

[0019] A computer-readable storage medium, on which a computer program is stored, and the computer program is loaded and executed by a processor to implement the steps of the animation playback method.

[0020] This application provides an animation playback method, device, computer device and storage medium, which determine a target video requested to be played by an animation playback request, create a video label and a canvas label in a browser engine, and further implement pulling, loading and hiding playback of a low-definition video stream of the target video based on the video label, and draw a video frame currently hidden and played in the video label to a shader in a webGL interface based on the canvas label, call a GPU through an interface of the shader to perform sharpening and matte extraction processing on the video frame in the shader to obtain a target video frame, and render the target video frame to a specified position.

[0021] This application relies on the GPU to implement the rendering of the target video, reducing the impact of animation playback on the CPU performance and improving the smoothness of animation playback. Moreover, based on the GPU, the low-resolution video frames of the target video are sharpened and matte processed to obtain the high-definition and matte target video frames. In this way, not only is it unnecessary to pull the high-definition video stream of the target video, but also the high-definition playback of the target video can be achieved, further reducing the impact of animation playback on the CPU and improving the smoothness of animation playback. BRIEF DESCRIPTION OF THE DRAWINGS

[0022] To more clearly illustrate the technical solutions in the embodiments of the present invention or the prior art, the following will briefly introduce the drawings required for use in the description of the embodiments or the prior art. Obviously, the drawings in the following description are only the embodiments of the present invention. For those of ordinary skill in the art, without creative efforts, other drawings can also be obtained based on the provided drawings.

[0023] Figure 1 An image schematic diagram provided by an embodiment of this application;

[0024] Figure 2 A schematic diagram of the structure of an animation playback system provided by an embodiment of this application;

[0025] Figure 3 A flowchart of an animation playback method provided by an embodiment of this application;

[0026] Figure 4 A flowchart of a method in which the GPU sharpens and mattes the video frames in the shader to obtain the target video frames and renders the target video frames to the specified position provided by an embodiment of this application;

[0027] Figures 5(a)-(b) are a comparison schematic diagram of a low-resolution video frame and a high-definition video frame provided by an embodiment of this application;

[0028] Figures 6(a)-(b) are a schematic diagram of the principle of convolutional digital image processing technology provided by an embodiment of this application;

[0029] Figure 6(c) is a schematic diagram of an edge sharpening convolution template provided by an embodiment of this application;

[0030] Figure 6(d) is a schematic diagram of a convolution kernel provided by an embodiment of this application;

[0031] Figure 7 Another flowchart of an animation playback method provided by an embodiment of this application;

[0032] Figure 8 A schematic diagram of an animation playback method provided by an embodiment of this application;

[0033] Figure 9Schematic diagram for transmitting video frames of a target video to a fragment shader provided by an embodiment of this application;

[0034] Figure 10 Schematic structural diagram of an animation playback device provided by an embodiment of this application;

[0035] Figure 11 Hardware structure block diagram of a computer device applicable to an animation playback method provided by an embodiment of this application. Detailed implementation manners

[0036] Next, the technical solutions in the embodiments of the present invention will be clearly and completely described in conjunction with the accompanying drawings in the embodiments of the present invention. Obviously, the described embodiments are only a part of the embodiments of the present invention, rather than all the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those of ordinary skill in the art without creative efforts shall fall within the protection scope of the present invention.

[0037] For the convenience of understanding an animation playback method provided by an embodiment of this application, technical terms involved in the animation playback method are first explained as follows:

[0038] Canvas: The element is part of HTML5 and allows scripting languages to dynamically render bitmaps.

[0039] Webgl: It is a 3D drawing standard that allows combining JavaScript and OpenGL ES 2.0. It is JavaScript operating some OpenGL interfaces. WebGL can provide hardware 3D accelerated rendering for HTML5 Canvas.

[0040] Shader: A shader (English: shader) is a computer program originally used for image shading processing (calculating lighting, brightness, color, etc. in an image). Recently, it has also been used to complete many different fields of work, such as processing CG special effects and performing post-processing of videos unrelated to shading processing. There is a high degree of freedom in calculating rendering effects on the device. Although not a hard requirement, currently most shaders are developed for GPUs. The programmable graphics pipeline of GPUs has completely replaced the traditional fixed pipeline, and it can be programmed using shader languages. The pixels, vertices, and textures that make up the final image, as well as their positions, hues, saturations, brightnesses, and contrasts, can all be dynamically adjusted using the algorithms defined in the shader.

[0041] Chroma Key chroma keying: Chroma keying, also known as chroma key, is a keying technology based on the RGB mode. It removes the background from the picture and replaces it by the color difference between the foreground and the background.

[0042] Convolution operation: A digital image is a two-dimensional discrete signal. The convolution operation on a digital image is actually to use the convolution kernel (convolution template) to slide on the image, multiply the pixel grayscale value at the image point with the corresponding value on the convolution kernel, and then add all the multiplied values as the grayscale value of the pixel on the image corresponding to the middle pixel of the convolution kernel, and finally slide all the images.

[0043] Template: Matrix block, its mathematical meaning is a convolution operation.

[0044] Convolution kernel: The weights used in convolution are represented by a matrix, which is a weight matrix.

[0045] Convolution example: Convolution operation of 3*3 pixel area R and convolution kernel G:

[0046] R5 (center pixel) = R1G1 + R2G2 + R3G3 + R4G4 + R5G5 + R6G6 + R7G7 + R8G8 + R9G9.

[0047] With the rapid development of animation technology, the application of blue screen technology is becoming more and more widespread. Blue screen technology is also called chroma key technology. Simply put, it is to shoot objects on the background of the same color, and distinguish the foreground and background through the special hue information of the background color, so as to achieve the purpose of automatically removing the background and retaining the foreground.

[0048] Blue screen technology does not necessarily require the use of a blue screen as the background. In principle, it is sufficient to choose a background color that does not exist in the foreground subject. For example, blue screen (blue screen) and green screen (green screen) are both background screens for shooting stunt shots. Actors perform in front of blue screens and green screens, which are captured by cameras. The images are processed in computers, and the blue or green background is removed to superimpose the resulting images on various online scenes.

[0049] When implementing animation playback, the existing animation playback technology usually uses the CPU mode canvas on the web side to set the transparency of the background pixel block in each video frame to 0, so as to remove the background in the video frame and retain the foreground for animation playback. The specific implementation method of using the CPU mode canvas on the web side to set the transparency of the background pixel block in each video frame to 0 is as follows:

[0050]

[0051] This animation playback technology relies on the CPU on the electronic device to draw and render the video frames, which not only affects the CPU performance of the electronic device, but also causes the electronic device to freeze. Especially when playing high-definition animations, the frequency of electronic device freezes is further increased, and the animation playback is not smooth.

[0052] Moreover, this animation playback technology cannot accurately identify the background pixel blocks in the video frames, especially for the background pixel blocks in the semi-transparent edge regions of the video frames, so there are often problems such as incomplete removal of the background in the semi-transparent edge regions of the video frames and blurred and unsatisfactory video frame processing results. For example, refer to Figure 1 As shown in a schematic diagram of an image, the existing such animation playback technology has unsatisfactory matte extraction effects on the smoke semi-transparent light effects, light and shadow, etc. on the image as shown in Figure 1 the figure.

[0053] The embodiments of the present application provide an animation playback method, device, computer device and storage medium. By rendering the target video into WebGL and calling the GPU for acceleration through the shader API, efficient parallel processing of pixels is performed, including image convolution operation to sharpen and enhance the frame image effect and Chroma Key algorithm for advanced accurate and adjustable matte extraction processing. Each video frame in the target video is restored, enhanced, high-definition, and the background is removed while retaining the foreground to obtain the target video frame, so that the target video frame can be transparently superimposed on various online scenarios.

[0054] To make the above objects, features, and advantages of the present invention more obvious and understandable, the present invention will be further described in detail below with reference to the accompanying drawings and specific embodiments.

[0055] An animation playback method provided by the embodiments of the present application is applied to an animation playback system. Refer to Figure 2 An animation playback system usually consists of a terminal and a server. Users can install a client on the terminal, and the server is used to provide technical support for the client installed on the terminal.

[0056] Exemplarily, the client can be an application client or a web version client. The client can be an application that provides animation playback functions. The client supports a browser engine, and the application can respond to the received animation playback request and implement corresponding animation playback based on the browser engine.

[0057] The terminal can be any electronic product that can perform human-computer interaction with the user through one or more ways such as a keyboard, touchpad, touch screen, remote control, voice interaction, or handwriting device. Exemplarily, the terminal can be a mobile phone, tablet computer, laptop computer, handheld computer, personal computer, smart speaker, wearable device, smart TV, smart watch, etc., but is not limited thereto. It should be noted that Figure 2 only two examples of the terminal are shown in the figure. Regarding the specific manifestation forms of the terminal, those skilled in the art can set them according to their own needs and are not limited here.

[0058] The server is used to provide technical support for the application. The server can be an independent physical server, a server cluster or a distributed system composed of multiple physical servers, or a cloud server that provides basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communications, middleware services, domain name services, security services, CDN, and big data and artificial intelligence platforms. The terminal and the server can be directly or indirectly connected through wired or wireless communication methods to provide the animation playback service, and this application does not limit this here.

[0059] An animation playback method provided by an embodiment of this application can be applied to a computer device, and the computer device can be a terminal installed with an application. The following will detail an animation playback method provided by an embodiment of this application from the perspective of the terminal. For details, please refer to Figure 3 .

[0060] As Figure 3 shown, the method includes:

[0061] S301. Receive an animation playback request and determine the target video requested to be played by the animation playback request;

[0062] In an embodiment of this application, the user installs an application that supports a browser engine on the terminal, and the application provides an animation playback function based on an animation playback method provided by an embodiment of this application. Correspondingly, the user sends a video playback request to the application through the terminal, and the application can determine the target video requested to be played by the animation playback request. It should be noted that the target video is a video with a single background color. For example, the target video can be a video obtained by shooting an object on a background of the same color. In actual shooting, if the background is a single-color curtain, the target video obtained by shooting the object with the curtain as the background of the object can be considered a video with the curtain color as the background. The background (video bottom) of the target video is automatically removed using matting technology, and the foreground (animation pixels) is retained to obtain the video animation in the target video.

[0063] Exemplarily, the target video can be a green screen video, a blue screen video, etc., and no limitation is made here.

[0064] S302. Create a video tag and a canvas tag in the browser engine;

[0065] In an embodiment of this application, the application receives and responds to the animation playback request. It can not only determine the target video requested to be played by the animation playback request, but also create a video tag and a canvas tag in the browser engine it supports.

[0066] Exemplarily, the video tag is used to pull the video stream of the target video from the server, load and play the video stream. It should be noted that for an animation playing method provided in an embodiment of the present application, when the video tag loads and plays the video stream, the application on the terminal does not display the corresponding video content. Therefore, what the video tag in the embodiment of the present application realizes when loading and playing the video stream is the hidden playing of the target video.

[0067] Exemplarily, the video stream of the target video is composed of a video frame sequence, and the video frame sequence can be considered as multiple video frames arranged in sequence according to the playing order. The canvas tag is used to draw the video frames loaded and hidden-played in the current video tag to the shader in the webGL interface in real time.

[0068] S303. Invoke the video tag to pull, load and hide-play the low-definition video stream of the target video;

[0069] In the embodiment of the present application, the video tag is invoked to pull the low-definition video stream of the target video from the server, and the pulled low-definition video stream is loaded and hidden-played in the video tag.

[0070] S304. Based on the canvas tag, draw the video frames hidden-played in the current video tag to the shader in the webGL interface;

[0071] In the embodiment of the present application, while the video tag loads and hides-play the pulled low-definition video stream of the target video, the canvas tag is invoked to draw the video frames in the target video loaded and hidden-played in the current video tag to the shader in the webGL interface in real time.

[0072] Exemplarily, the shader can be a fragment shader or a vertex shader, which is not limited herein.

[0073] S305. Invoke the GPU through the interface of the shader to perform sharpening and matte processing on the video frames in the shader to obtain the target video frames, and render the target video frames to the specified position; the specified position is related to the page for displaying the response to the animation playing request.

[0074] In the embodiment of the present application, the GPU can be invoked through the interface of the shader. The GPU performs sharpening and matte processing on the video frames in the shader to obtain the target video frames, and the GPU renders the target video frames to the specified position.

[0075] Exemplarily, the application responds to the animation playing request to display the animation playing page, and the GPU renders the target video frames to the specified playing position on the animation playing page.

[0076] To facilitate the understanding of an animation playing method provided by an embodiment of the present application, a method in which a GPU performs sharpening and matte extraction processing on a video frame in a shader to obtain a target video frame and renders the target video frame to a specified position will be described in detail below. For details, please refer to Figure 4 。

[0077] As Figure 4 shown, the method includes:

[0078] S401. The GPU performs convolutional digital image processing on the video frame in the shader to obtain a high-definition video frame;

[0079] In an embodiment of the present application, a video frame in a low-definition video stream of a target video can be regarded as a low-definition video frame. The GPU performs convolutional digital image processing on the low-definition video frame in the shader to convert the low-definition video frame into a high-definition video frame. Exemplarily, performing convolutional digital image processing on a low-definition video frame to convert the low-definition video frame into a high-definition video frame can be regarded as performing sharpening processing on the low-definition video frame to convert the low-definition video frame into a high-definition video frame. Referring to FIGS. 5(a)-(b), FIG. 5(a) is a schematic diagram of a low-definition video frame, and FIG. 5(b) is a high-definition video frame obtained by processing the low-definition video frame shown in FIG. 5(a) using convolutional digital image processing.

[0080] To facilitate the understanding of the convolutional digital image processing technology provided by an embodiment of the present application, the principle of the convolutional digital image processing technology will be briefly described below in combination with the schematic diagram of the principle of the convolutional digital image processing technology shown in FIGS. 6(a)-(d).

[0081] Combining FIGS. 6(a)-(b), it can be seen that the sharpening effect is to make the pixels on the edge of the image have a higher contrast than the surrounding pixels, and the edge sharpening effect is generated using the edge sharpening convolution template shown in FIG. 6(c).

[0082] Exemplarily, the corresponding implementation code for the GPU to perform convolutional digital image processing on the video frame in the shader to obtain a high-definition video frame can be set by those skilled in the art according to their own needs and will not be limited herein.

[0083] Moreover, different filter effects can be obtained by performing convolutional digital image processing on the video frame with different convolutional contents. Referring to FIG. 6(d), which is a schematic diagram of several common convolutional kernels provided by an embodiment of the present application.

[0084] An animation playing method provided by an embodiment of the present application can transmit parameters matching the background color of a target video to a shader through a browser engine, and the parameters matching the background color of the target video are used to perform matte extraction on video frames of the target video. Correspondingly, after the GPU sharpens the video frames in the shader to obtain high-definition video frames, it can perform matte extraction on the high-definition video frames based on the received parameters to obtain target video frames, and render the target video frames to a specified position.

[0085] Exemplarily, if the target video is a blue screen video, the parameters match the color of the blue screen of the blue screen video; if the target video is a green screen video, the parameters match the color of the green screen of the green screen video.

[0086] S402. Perform matte extraction on the high-definition video frames by using a chroma keying technology based on the RGB mode to obtain target video frames;

[0087] In an embodiment of the present application, the chroma keying technology based on the RGB mode may be the Chroma Key technology, which is not limited herein. Taking the chroma keying technology based on the RGB mode as the Chroma Key technology as an example, using the Chroma Key technology to perform matte extraction on the high-definition video frames can obtain target video frames.

[0088] The Chroma Key technology adopts the Chroma Keying algorithm. The following is a brief description of the Chroma Keying algorithm: 1. Calculate the red and blue components of the key color to form vector A. 2. Calculate the red and blue components of the target color to form vector B. 3. Calculate the distance between the two vectors (the projection of one component on the other component). When the AB vectors are close, alpha tends to 1. When the AB vectors are far apart, alpha tends to 0. 4. Use alpha as a filtering index to filter out the key color components in the rgb value of the target color, and calculate the rgb value of this point. 5. Use 1 - alpha as the transparency value of this point (a in rgba). 6. Set the pixel value of this point to the new rgba, extract components A and B, calculate the alpha value, and set the new color algorithm.

[0089] S403. Render the target video frames to a specified position in the page displayed in response to the animation playing request.

[0090] Exemplarily, the application receives an animation playing request and displays a corresponding page in response to the animation playing request (this page can be called an animation playing page). The GPU can render the target video in the shader to a specified position in the animation playing page (this specified position can be called the specified playing position in the animation playing page).

[0091] An animation playing method provided by an embodiment of the present application mainly makes full use of webgl shader GPU acceleration to sharpen each frame of the video at the pixel level, solves problems such as low bit rate, blurred video, and low definition caused by bandwidth limitations in online videos, and greatly saves bandwidth while ensuring the video effect. By using the matte extraction technology to remove the video background and retain the real video animation pixels, the transparency, such as smoke and hair, can be perfectly restored, so that the video animation of the video frames in a target video can be perfectly used in various different scenarios.

[0092] Figure 7 It is a flowchart of another animation playing method provided by an embodiment of the present application.

[0093] As Figure 7 shown, the method includes:

[0094] S701. Receive an animation playing request, and determine the target video and the environmental background image requested to be played by the animation playing request;

[0095] In an embodiment of the present application, when a user sends an animation playing request to an application, the user can not only indicate the target video requested to be played, but also indicate the environmental background image that needs to be overlaid with a transparent background when playing the target video.

[0096] Exemplarily, the application can provide one or more environmental background images. When sending an animation playing request, the user can select a target environmental background image that matches the currently selected target video to be played from the one or more environmental background images, and then send an animation playing request to the application. The animation playing request indicates the selected target video and the target environmental background image.

[0097] Exemplarily, after the user determines the target video requested to be played in the application, the application can automatically determine the pre-set environmental background image associated with the target video, and send an animation playing request to the application based on the target video and the environmental background image associated with the target video. The animation playing request indicates the target video and the environmental background image associated with the target video.

[0098] Exemplarily, the user clicks on a certain video link in the application to trigger sending an animation playing request to the application. The video link indicates a video animation with a video background and an environmental background image. Correspondingly, the target video indicated by the animation playing request is the video animation with a video background indicated by the video link, and the environmental background image indicated by the animation playing request is the environmental background image indicated by the video link.

[0099] The above are only several online scenarios provided by the embodiments of the present application. Regarding the specific setting methods of online scenarios, those skilled in the art can set them according to their own needs, which are not limited herein.

[0100] Exemplarily, the environmental background image is an environmental background video stream or a single environmental background image.

[0101] S702, creating a video tag and a canvas tag in the browser engine;

[0102] S703, using the video tag to pull, load and hide the low-definition video stream of the target video;

[0103] S704, based on the canvas tag, drawing the hidden playing video frame in the current video tag to the shader in the webGL interface;

[0104] S705, calling the GPU through the interface of the shader to sharpen and cut out the video frame in the shader to obtain a target video frame, and rendering the target video frame to a specified position; the specified position is related to the page displayed in response to the animation playback request;

[0105] The execution method of steps S702-S705 provided in the embodiment of the present application is similar to that provided in the above embodiment. Figure 2 The execution method of steps S202-S205 shown is the same. For the specific execution method of steps S702-S705, please refer to the detailed description of steps S202-S205 in the above embodiment, which will not be repeated here.

[0106] S706: Create a target container and load an environment background image into the target container, and render the environment background image in the target container to a specified position.

[0107] In the embodiment of the present application, two containers can be created, one container is a canvas tag, and the other container is a target container. The environment background image is loaded in the target container, and the environment background image in the target container is rendered to the animation playback position of the animation playback page to achieve transparent overlay display with the target video frame. That is, the video bottom in the target video is removed to obtain the video animation, and the video animation with the environment background image as the background is displayed.

[0108] Furthermore, an animation playback method provided in an embodiment of the present application can also monitor the interface of the video tag corresponding to the target video to determine the playback time point of the current target video; if the playback time point meets a pre-set playback control condition, the playback of the target video is controlled based on a pre-set control method that matches the playback control condition.

[0109] For example, the current playback time point of the target video is the video content currently playing to the 5th second of the target video, the video content currently playing to the 3rd minute of the target video, and so on.

[0110] Taking the playback control condition that the current playback reaches the video content at the 3rd second in the target video as an example, by listening to the interface of the video tag corresponding to the target video, the playback time point of the current target video is determined; if the playback time point meets the preset playback control condition, the method of controlling the playback of the target video based on the control method matching the preset playback control condition can be: listening to the interface of the video tag corresponding to the target video, determining the playback time point of the current target video, if the playback time point of the current target video is the video content at the 3rd second in the target video that is currently being played, it is determined that the playback time point of the current target video meets the preset playback control condition, and then the playback of the target video is controlled based on the control method matching the preset playback control condition.

[0111] In the embodiments of the present application, at least one playback control condition can be preset, and the playback control methods corresponding to different playback control conditions can be the same or different. Correspondingly, the interface of the video tag corresponding to the target video can be listened to, the playback time point of the current target video is determined, if there is a playback control condition satisfied by the playback time point of the current target video among the at least one preset playback control conditions, the control method matching the playback control condition satisfied by the playback time point of the current target video is determined, and the playback of the target video is controlled according to the determined control method.

[0112] Furthermore, an animation playback method provided by the embodiments of the present application can also control the playback state of the target video based on the interface of the video tag corresponding to the target video.

[0113] Exemplarily, the playback state includes any one or more of pause, play, switch, fast forward, and rewind.

[0114] The execution subject of an animation playback method provided by the embodiments of the present application can be considered as the CPU of the terminal. The terminal can not only render the target video frame to the animation playback position on the animation playback page based on the GPU, but also render the environmental background image to the animation playback position on the animation playback page based on the CPU, realizing the display of the target video frame transparently superimposed on the environmental background image, and realizing the animation display with the environmental background image as the video background and the video animation obtained by removing the background and sharpening the target video as the foreground.

[0115] Next, in combination with Figure 8 the schematic diagram of the animation playback method provided, the animation playback method provided by the embodiments of the present application will be further described in detail.

[0116] As Figure 8 shown, the content in the target box is the core of the animation playback method provided by the embodiments of the present application. As Figure 8 shown, on the left outside the target box is the expandable interaction. In combination with Figure 8It can be known that the technical implementation of an animation playing method provided by an embodiment of the present application is as follows:

[0117] 1). Create a video tag on the browser engine to play a video; this video can be called the target video, and the browser engine can also be called the web side.

[0118] 2). As Figure 9 shown, by creating a canvas tag and using the shader in the WebGL API, each frame in the video stream of the target video is input as an image to the fragment shader.

[0119] 3). The GPU performs parallel processing on the pixels of the image (which can also be called a video frame) in two steps.

[0120] a) Convolve and sharpen the image, and use an adjustable convolution kernel (matrix value) to sharpen each frame of the video image and enhance the high-definition effect to approximately reach an uncompressed large-volume high-definition video.

[0121] b) Through the use of Chroma Key chroma keying, perform advanced accurate adjustable green screen keying processing on the pixel level of the video frame image to become a transparent-bottom video frame image.

[0122] i) Accurately represent and quickly complete keying for various light effects of smoke;

[0123] ii) Adjustable, and the parameters can be passed through the web to the shader to edit the green screen color and the boundary values of the keying to produce more effects.

[0124] c) Place the final video frame image into the scene and, under timing control, present it as playing a high-definition video effect at the video frame rate, realizing the integration of the high-definition video effect and the scene.

[0125] Through practice, it is found that an animation playing method provided by an embodiment of the present application can obtain high-definition video frames based on the sharpening of video frames. By keying the high-definition video frames, not only can the video background in the high-definition video frames be removed, but also the compression of the high-definition video frames can be achieved. The playback of the target video frames obtained by keying the high-definition video frames can not only achieve a high-definition effect, but also does not require pulling the high-definition video data of the target video, saving bandwidth and improving the smoothness of video playback.

[0126] Figure 10 It is a schematic structural diagram of an animation playing device provided by an embodiment of the present application.

[0127] As Figure 10 shown, the device includes:

[0128] A target video determination unit 1001, configured to receive an animation playing request and determine the target video requested to be played by the animation playing request;

[0129] The first creation unit 1002 is used to create a video tag and a canvas tag in the browser engine;

[0130] The first playback unit 1003 is used to call the video tag to pull, load, and hide the low-definition video stream of the target video to be played;

[0131] The drawing unit 1004 is used to draw the video frame hidden and played in the current video tag to the shader in the webGL interface based on the canvas tag;

[0132] The second playback unit 1005 is used to call the GPU through the interface of the shader to perform sharpening and matte processing on the video frame in the shader to obtain the target video frame, and render the target video frame to the specified position; the specified position is related to the page displayed in response to the animation playback request.

[0133] In the embodiment of the present application, preferably, the second playback unit is specifically used to call the GPU through the interface of the shader to perform convolutional digital image processing on the video frame in the shader to obtain a high-definition video frame, use the chroma keying technology based on the RGB mode to perform matte processing on the high-definition video frame to obtain the target video frame; and render the target video frame to the specified position in the page displayed in response to the animation playback request.

[0134] In the embodiment of the present application, preferably, using the chroma keying technology based on the RGB mode to perform matte processing on the high-definition video frame to obtain the target video frame includes: using Chroma Key to perform matte processing on the high-definition video frame to obtain the target video frame.

[0135] In the embodiment of the present application, preferably, the animation playback request further indicates a playback environment background image, and an animation playback device provided in the embodiment of the present application further includes:

[0136] A second creation unit is used to create a target container and load the environment background image in the target container, and the environment background image is an environment background video stream or a single environment background image;

[0137] A third playback unit is used to render the environment background image in the target container to the specified position.

[0138] Furthermore, an animation playback device provided in the embodiment of the present application further includes a parameter transmission unit, which is used to transmit parameters matching the background color of the target video to the shader through the browser engine.

[0139] Correspondingly, the second playback unit is specifically used to call the GPU through the interface of the shader to perform sharpening processing on the video frame in the shader, perform matte processing on the sharpened high-definition video frame based on the parameters to obtain the target video frame, and render the target video frame to the specified position.

[0140] Further, an animation playing device provided by an embodiment of the present application further includes:

[0141] A monitoring unit, configured to monitor an interface of a video tag corresponding to a target video and determine a playing time point of the current target video;

[0142] A playing control unit, configured to, if the playing time point meets a preset playing control condition, control the playing of the target video based on a control manner matching the preset playing control condition.

[0143] Further, an animation playing device provided by an embodiment of the present application further includes a playing state control unit, configured to control a playing state of the target video based on an interface of a video tag corresponding to the target video, and the playing state includes any one or more of pause, play, switch, fast forward, and rewind.

[0144] As Figure 11 shown, it is a structural diagram of an implementation manner of a computer device provided by an embodiment of the present application, and the computer device includes:

[0145] A memory 1101, configured to store a program;

[0146] A processor 1102, configured to execute the program, and the program is specifically used for:

[0147] Receiving an animation playing request and determining a target video requested to be played by the animation playing request;

[0148] Creating a video tag and a canvas tag in a browser engine;

[0149] Invoking the video tag to pull, load, and hide a low-definition video stream of the playing target video;

[0150] Based on the canvas tag, drawing a video frame hidden in the current video tag to a shader in a webGL interface;

[0151] Calling a GPU through an interface of the shader to perform sharpening and matte processing on the video frame in the shader to obtain a target video frame, and rendering the target video frame to a specified position; the specified position is related to a page displayed in response to the animation playing request.

[0152] The processor 1102 may be a central processing unit CPU or a specific integrated circuit ASIC (Application Specific Integrated Circuit).

[0153] The control device may further include a communication interface 1103 and a communication bus 1104. Among them, the memory 1101, the processor 1102, and the communication interface 1103 complete mutual communication through the communication bus 1104.

[0154] The embodiment of the present application also provides a readable storage medium, on which a computer program is stored. The computer program is loaded and executed by a processor to implement the steps of the above-mentioned animation playing method. The specific implementation process can refer to the description of the corresponding part of the above embodiment, and will not be elaborated in this embodiment.

[0155] The present application also proposes a computer program product or a computer program. The computer program product or the computer program includes computer instructions, and the computer instructions are stored in a computer-readable storage medium. The processor of the computer device reads the computer instructions from the computer-readable storage medium, and the processor executes the computer instructions, so that the computer device executes the methods provided in various optional implementation manners in terms of the above-mentioned animation playing method or animation playing device. The specific implementation process can refer to the description of the corresponding embodiment above and will not be elaborated.

[0156] The present application provides an animation playing method, device, computer device and storage medium, which determine a target video requested to be played by an animation playing request, create a video tag and a canvas tag in a browser engine, and then pull, load and hide the playback of a low-definition video stream of the target video based on the video tag, and draw the video frame hidden and played in the current video tag into a shader in a webGL interface based on the canvas tag. The GPU is used through the interface of the shader to perform sharpening and matte processing on the video frame in the shader to obtain a target video frame, and the target video frame is rendered to a specified position.

[0157] The present application relies on the GPU to implement the drawing and rendering of the target video, reduces the impact of animation playback on the CPU performance, and improves the fluency of animation playback; moreover, based on the GPU, the low-definition video frames of the target video are sharpened and matte processed to obtain a high-definition and matte-processed target video frame. In this way, not only does it not need to pull the high-definition video stream of the target video, but also it can achieve the high-definition playback of the target video, further reducing the impact of animation playback on the CPU and improving the fluency of animation playback.

[0158] The above has introduced in detail an animation playing method, device, computer device and storage medium provided by the present invention. Specific examples are used in this article to elaborate on the principle and implementation manner of the present invention. The description of the above embodiments is only used to help understand the method and its core idea of the present invention; at the same time, for those of ordinary skill in the art, according to the idea of the present invention, there will be changes in the specific implementation manner and application scope. In summary, the content of this specification should not be construed as a limitation to the present invention.

[0159] It should be noted that the various embodiments in this specification are described in a progressive manner. Each embodiment focuses on the differences from other embodiments. The same or similar parts among the various embodiments can be referred to each other. For the device disclosed in the embodiment, since it corresponds to the method disclosed in the embodiment, the description is relatively simple, and the relevant parts can be referred to the description of the method part.

[0160] It also should be noted that in this article, relational terms such as first and second are only used to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Moreover, the terms "comprising", "including" or any other variant thereof are intended to cover non-exclusive inclusion, so that a process, method, article or device including a series of elements inherently includes the elements, or further includes the elements inherent to these process, method, article or device. Without more limitations, the element defined by the statement "including one..." does not exclude the existence of another identical element in the process, method, article or device including the said element.

[0161] The above description of the disclosed embodiments enables those skilled in the art to implement or use the present invention. Various modifications to these embodiments will be obvious to those skilled in the art. The general principles defined herein can be implemented in other embodiments without departing from the spirit or scope of the present invention. Therefore, the present invention will not be limited to these embodiments shown herein, but will conform to the widest scope consistent with the principles and novel features disclosed herein.

Claims

1. An animation playing method, characterized in that, Applied to an animation playback system, including: Receiving an animation playback request, determining a target video requested to be played by the animation playback request, the target video being a video with a single background color, and the animation playback request further indicating to play an environmental background image; Creating a video tag and a canvas tag in a browser engine; Invoking the video tag to pull, load, and hide the playback of a low-definition video stream of the target video; Based on the canvas tag, drawing the video frame currently hidden and played in the video tag to a shader in a webGL interface; Invoking the GPU through an interface of the shader to perform sharpening and matte extraction processing on the video frame in the shader to obtain a target video frame, and rendering the target video frame to a specified position, including: the GPU performing convolutional digital image processing on the video frame in the shader to obtain a high-definition video frame; performing matte extraction on the high-definition video frame using ChromaKey to obtain a target video frame; rendering the target video frame to a specified position in a page displayed in response to the animation playback request; the specified position being related to the page displayed in response to the animation playback request; Creating a target container and loading the environmental background image in the target container, the environmental background image being an environmental background video stream or a single environmental background image; Rendering the environmental background image in the target container to the specified position; Listening to an interface of the video tag corresponding to the target video to determine the current playback time point of the target video; If the playback time point meets a preset playback control condition, controlling the playback of the target video based on a control method preset and matching the playback control condition; Controlling the playback state of the target video based on an interface of the video tag corresponding to the target video, the playback state including any one or more of pause, play, switch, fast forward, and rewind.

2. The method according to claim 1, wherein Further including: Transmitting, through the browser engine, a parameter matching the background color of the target video to the shader; The invoking the GPU through an interface of the shader to perform sharpening and matte extraction processing on the video frame in the shader to obtain a target video frame, and rendering the target video frame to a specified position includes: Invoking the GPU through an interface of the shader to perform sharpening processing on the video frame in the shader, performing matte extraction on the sharpened high-definition video frame based on the parameter to obtain a target video frame, and rendering the target video frame to a specified position.

3. An animation playback device, characterized in that, Applied to an animation playback system, including: A target video determination unit, configured to receive an animation playback request and determine a target video requested to be played by the animation playback request, the target video being a video with a single background color, and the animation playback request further indicating to play an environmental background image; A tag creation unit, configured to create a video tag and a canvas tag in a browser engine; A first playback unit, configured to invoke the video tag to pull, load, and hide the playback of a low-definition video stream of the target video; A drawing unit for drawing the video frames hidden and played in the current video tag to a shader in a webGL interface based on the canvas tag; A second playback unit for calling the GPU through the interface of the shader to perform sharpening and matte extraction on the video frames in the shader to obtain target video frames, and rendering the target video frames to a specified position, including: the GPU performing convolutional digital image processing on the video frames in the shader to obtain high-definition video frames; using ChromaKey for matte extraction on the high-definition video frames to obtain target video frames; rendering the target video frames to a specified position in the page displayed in response to the animation playback request; the specified position being related to the page displayed in response to the animation playback request; A second creation unit for creating a target container and loading the environmental background image in the target container, the environmental background image being an environmental background video stream or a single environmental background image; A third playback unit for rendering the environmental background image in the target container to the specified position; A monitoring unit for monitoring the interface of the video tag corresponding to the target video to determine the current playback time point of the target video; A playback control unit for, if the playback time point meets a preset playback control condition, controlling the playback of the target video based on a control method preset and matching the playback control condition; A playback state control unit for controlling the playback state of the target video based on the interface of the video tag corresponding to the target video, the playback state including any one or more of pause, play, switch, fast forward, and rewind.

4. The device according to claim 3, characterized in that The device further includes: A parameter transmission unit for transmitting parameters matching the background color of the target video to the shader through the browser engine; The second playback unit is specifically configured to call the GPU through the interface of the shader to perform sharpening on the video frames in the shader, perform matte extraction on the sharpened high-definition video frames based on the parameters to obtain target video frames, and render the target video frames to the specified position.

5. A computer device, characterized in that, Including: A processor and a memory, the processor and the memory being connected by a communication bus; wherein, the processor is used to call and execute the program stored in the memory; The memory is used to store a program, and the program is used to implement the animation playback method as described in claim 1 or 2.

6. A computer-readable storage medium, characterized in that, A computer program is stored thereon, and the computer program is loaded and executed by a processor to implement the steps of the animation playback method as described in claim 1 or 2.

7. A computer program product, characterized in that, The computer program product includes computer instructions, and the processor of the computer device executes the computer instructions, causing the computer device to execute the steps of the animation playback method as described in claim 1 or 2.

Images