Monitoring and guiding system based on linkage of Web-end three-dimensional scene model and dome camera and construction method of monitoring and guiding system

Abstract

The invention discloses a monitoring guide system based on linkage of a Web-end three-dimensional scene model and a dome camera and a construction method of the monitoring guide system, and belongs to the technical field of video monitoring and three-dimensional visualization. The method comprises the steps of 1, building a WEB internet front-end framework; step 2, performing 3D scene construction based on the framework in the step 1 and Babylon.js; 3, adding a user interaction module, a space calculation module, a PTZ control module and a linkage feedback module into the framework in the step 1; and step 4, based on each module in the step 3, finally playing a real-time video picture by using a playing module. The problems that in a traditional monitoring system, camera operation is not visual, positioning efficiency is low, response is not timely and the like are solved, a user clicks any coordinate point in a three-dimensional scene, the system automatically calculates space coordinates of a target point and controls a ball machine camera in a corresponding area to rotate (PTZ control) so that a camera picture can be aligned with the point, and the user experience is improved. Therefore, the monitoring efficiency and the intelligent level are improved.

Description

Technical Field

[0001] The present invention belongs to the technical field of video surveillance and three-dimensional visualization, and specifically relates to a monitoring and guidance system based on the linkage between a Web-side three-dimensional scene model and a dome camera, and a construction method thereof. Background Art

[0002] In traditional video surveillance systems, monitoring personnel manually control the pan / tilt (PTZ) angle of a dome camera to observe the target area through the video feed. This leads to problems such as unclear viewing angles and low positioning efficiency. With the development of WebGL technology, web-based 3D visualization scenes have been widely used in industrial, industrial park, and smart city scenarios. While they offer excellent visualization, they lack data linkage with actual monitoring equipment, making it difficult to achieve an intuitive transition from the 3D scene to the actual monitoring image. In this invention, users can control the camera to rotate to the corresponding position by clicking anywhere in the 3D scene. Pre-configured points can also be created within the 3D scene to conveniently and intuitively control the dome camera's rotation to the corresponding position. Automatic inspections can even be set for different points. This system integrates the creation of a 3D scene, the camera's perspective, and the camera's actual video stream, allowing for intuitive observation of the video content.

[0003] In existing technologies, operators often need to manually adjust the camera's pan / tilt (PTZ) angle to observe the target area. This not only relies on the operator's experience, but is also prone to errors leading to blind spots in monitoring. Summary of the Invention

[0004] The present invention provides a monitoring and guidance system based on the linkage of a Web-side three-dimensional scene model and a dome camera, and a construction method thereof, to solve the problems existing in traditional monitoring systems, such as non-intuitive camera operation, low positioning efficiency, and untimely response.

[0005] The present invention is achieved through the following technical solutions: A method for constructing a monitoring and guidance system based on the linkage between a web-based three-dimensional scene model and a dome camera, the method comprising the following steps: Step 1: Build the WEB Internet front-end framework; Step 2: Build a 3D scene based on the framework in step 1 and Babylon.js; Step 3: Add the user interaction module, spatial calculation module, PTZ control module, and linkage feedback module to the framework of step 1; Step 4: Based on the modules in step 3, the playback module is used to play the video in real time.

[0006] Furthermore, the step 2 specifically includes using Vue.js as a development framework, combining it with Babylon.js to implement WebGL scene construction, load the factory area, park or building model, and calibrate the installation position and direction of the ball camera.

[0007] Furthermore, the user interaction module of step 3 supports the user to obtain the three-dimensional coordinates of any position in the scene by clicking on the scene on the web page.

[0008] Furthermore, the spatial calculation module of step 3 calculates the required PT and Z angles according to the position of the ball camera and the coordinates of the target point, and converts them into the control parameters required by the ball camera through a spatial geometry algorithm.

[0009] Furthermore, the required pan and tilt angles of the camera are determined based on the spatial geometry: Step 3.1: Get the current coordinates of the ball camera S1 (x1, y1, z1) and the target point coordinates S2 (x2, y2, z2); Step 3.2: Calculate the target direction vector dir1 by vector difference: dir1 = S1.subtract(S2).normalize(); Step 3.3: After normalizing the direction vector, use inverse trigonometric functions to calculate the corresponding rotation angle of the direction vector in three-dimensional space; panRad = Math.atan2(dir.x, dir.z); tiltRad = Math.asin(dir.y).

[0010] Furthermore, the PTZ control module in step 3 converts the calculated PTZ from radians to degrees, and uses the converted PTZ parameters in degrees to be sent to the corresponding dome camera through the network interface to realize the rotation of the camera and aim at the target point.

[0011] Further, convert radians to degrees panDeg = BABYLON.Angle.FromRadians(panRad).degrees(); tiltDeg = BABYLON.Angle.FromRadians(tiltRad).degrees().

[0012] Furthermore, the linkage feedback module of step 3 is to obtain the real-time video stream of the camera, display the image on the web interface, and create a small scene of the camera's perspective in the three-dimensional scene to compare the consistency between the real-time camera image and the three-dimensional scene. After the camera is guided, the corresponding spherical camera in the scene is rotated, and the three-dimensional linkage is more intuitive to assist the user in confirming the accuracy of the target perspective.

[0013] A monitoring and guidance system based on the linkage between a web-based 3D scene model and a dome camera is constructed using the above-mentioned method for constructing a monitoring and guidance system based on the linkage between a web-based 3D scene model and a dome camera, the system comprising: 3D scene construction module: Using Vue.js as the development framework, combined with Babylon.js to implement WebGL scene construction, load factory area, park or building models, and calibrate the installation position and orientation of the ball camera.

[0014] The user interaction module supports users to obtain the three-dimensional coordinates of any location in the world coordinate system by clicking on the scene on the web page; The spatial calculation module calculates the required PT and Z angles based on the camera's location and the target point coordinates, and converts them into the control parameters required by the camera through spatial geometry algorithms, enabling the camera to accurately align with the target point clicked by the user. The PTZ control module converts the calculated PTZ from radians to degrees and sends the converted PTZ parameters to the corresponding dome camera through the network interface to enable the camera to rotate and aim at the target point. The linkage feedback module is used to compare the consistency of the camera's real-time image with the 3D scene. After the camera is guided, the corresponding spherical camera in the scene is rotated, providing a more intuitive 3D linkage and helping users confirm the accuracy of the target perspective. The playback module is used to play real-time video images.

[0015] A computer device includes a memory, a processor, and a computer program stored in the memory and executable on the processor. When the processor executes the computer program, the method described above is implemented.

[0016] A computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the method described above is implemented.

[0017] The beneficial effects of the present invention are: In this invention, when the user clicks on any coordinate point in a three-dimensional scene, the system automatically calculates the spatial coordinates of the target point and controls the rotation of the dome camera in the corresponding area (PTZ control) to align the camera image with the point, thereby improving monitoring efficiency and intelligence level.

[0018] The present invention replaces traditional remote control operations with a graphical three-dimensional interface, lowering the threshold for use. The system automatically calculates spatial orientation, avoiding manual judgment errors.

[0019] This invention utilizes web-based 3D modeling technology combined with the PTZ control capabilities of dome cameras to construct a remote monitoring and guidance system that integrates visualization with real-world scenes, enabling precise switching of monitoring perspectives based on clicks within the 3D scene. The system offers intuitive interaction, high-precision positioning, and real-time control capabilities. It is flexible, cost-effective, and highly adaptable, supporting cross-platform remote access and multi-device connectivity, significantly improving the efficiency and intelligence of monitoring inspections. Furthermore, the system integrates actual geographic information with camera data to achieve a closed-loop linkage between spatial scenes and video surveillance, demonstrating its promising practical value and potential for widespread adoption. BRIEF DESCRIPTION OF THE DRAWINGS

[0020] Figure 1 It is a flow chart of the method of the present invention.

[0021] Figure 2 It is a scene creation and camera program diagram of the present invention.

[0022] Figure 3 This is the program diagram of the introduction scene model of the present invention.

[0023] Figure 4 It is a registration click event program diagram of the present invention.

[0024] Figure 5 This is a program diagram for obtaining the initial position of the dome camera and setting the initial PTZ direction of the camera.

[0025] Figure 6 This is a program diagram of the present invention for calculating the PTZ value of the camera looking at the clicked position after obtaining the clicked position.

[0026] Figure 7 This is a diagram of a PTZ program that calls a camera to look at a specified direction through an http interface of the present invention.

[0027] Figure 8 It is a program diagram for playing camera real-time images of the present invention.

[0028] Figure 9 It is a program diagram of the viewing angle of the Camera in the small scene according to PTZ rotation of the present invention.

[0029] Figure 10It is a program diagram of a camera model in a PTZ rotation scene according to the present invention. DETAILED DESCRIPTION

[0030] In the following description, specific details such as specific system structures and technologies are provided for illustration rather than limitation to facilitate a thorough understanding of the embodiments of the present application. However, it should be clear to those skilled in the art that the present application may be implemented in other embodiments without these specific details. In other cases, detailed descriptions of well-known systems, devices, circuits, and methods are omitted to avoid obstructing the description of the present application with unnecessary details.

[0031] It will be understood that when used in this specification and the appended claims, the term "comprising" indicates the presence of described features, integers, steps, operations, elements and / or components, but does not preclude the presence or addition of one or more other features, integers, steps, operations, elements, components and / or groups thereof.

[0032] It should also be understood that the terms used in this specification are only for the purpose of describing specific embodiments and are not intended to limit the present application. As used in this specification and the appended claims, the singular forms "a," "an," and "the" are intended to include the plural forms unless the context clearly indicates otherwise.

[0033] The following is a clear and complete description of the technical solutions in the embodiments of this application in conjunction with the drawings in the specification of this application. Obviously, the embodiments described are only part of the embodiments of this application, not all of the embodiments. Based on the embodiments in this application, all other embodiments obtained by ordinary technicians in this field without making creative efforts are within the scope of protection of this application.

[0034] In the following description, many specific details are set forth to facilitate a full understanding of the present application. However, the present application may also be implemented in other ways different from those described herein. Those skilled in the art may make similar generalizations without violating the connotation of the present application. Therefore, the present application is not limited to the specific embodiments disclosed below.

[0035] Implementation Method 1 This embodiment provides a method for constructing a monitoring and guidance system based on the linkage between a three-dimensional scene model on a web side and a dome camera, the method comprising the following steps: Step 1: Build the WEB Internet front-end framework; Step 2: Build a 3D scene based on the framework in step 1 and Babylon.js; Step 3: Add the user interaction module, spatial calculation module, PTZ control module, and linkage feedback module to the framework of step 1; Step 4: Based on the modules in step 3, the playback module is used to play the video in real time.

[0036] Furthermore, step 2 specifically includes using Vue.js as the development framework and combining it with Babylon.js to implement WebGL scene construction, load factory area, park or building models, and calibrate the installation position and orientation of the dome camera; the platform supports multi-module component development, facilitates business separation and logic reuse, and improves system scalability and maintainability.

[0037] Furthermore, the user interaction module of step 3 supports the user to obtain the three-dimensional coordinates (world coordinate system) of any position in the scene by clicking on the web page.

[0038] Furthermore, the spatial calculation module of step 3 calculates the required PT (horizontal) and Z (pitch) angles according to the position of the ball camera and the coordinates of the target point, and converts them into the control parameters required by the ball camera through a spatial geometry algorithm (direction vector to angle).

[0039] like Figure 2-10 As shown, the following program description: Furthermore, in order to achieve accurate alignment of the camera to the user's clicked target point, the present invention determines the required horizontal angle pan and pitch angle tilt of the camera based on spatial geometry: Step 3.1: Get the current coordinates of the ball camera S1 (x1, y1, z1) and the target point coordinates S2 (x2, y2, z2); Step 3.2: Calculate the target direction vector dir1 by vector difference: dir1 = S1.subtract(S2).normalize(); Step 3.3: After normalizing the direction vector, use inverse trigonometric functions (atan2 and asin) to calculate the corresponding rotation angle of the direction vector in three-dimensional space. panRad = Math.atan2(dir.x, dir.z); tiltRad = Math.asin(dir.y).

[0040] Furthermore, the PTZ control module in step 3 converts the calculated PTZ from radians to degrees, and uses the converted PTZ parameters in degrees to be sent to the corresponding dome camera through a network interface (HTTP API) to enable the camera to rotate and aim at the target point.

[0041] Further, convert radians to degrees panDeg = BABYLON.Angle.FromRadians(panRad).degrees(); tiltDeg = BABYLON.Angle.FromRadians(tiltRad).degrees().

[0042] Furthermore, the linkage feedback module of step 3 is to obtain the real-time video stream of the camera, display the image on the web interface, and create a small scene of the camera's perspective in the three-dimensional scene to compare the consistency between the real-time camera image and the three-dimensional scene. After the camera is guided, the corresponding spherical camera in the scene is rotated, and the three-dimensional linkage is more intuitive to assist the user in confirming the accuracy of the target perspective.

[0043] More specifically: 1. Initialization of 3D scene and camera creation The system initializes the 3D visualization scene through Babylon.js to build the scene and arrange the camera: Create a new 3D scene instance using BABYLON.Scene; Load the environment texture (sky_2k.env) in .env format and use it as the physical rendering environment light source; Configure the skybox to enhance the user's immersive perception; Set environmentIntensity = 1 to control the global ambient light brightness; Create a VRDeviceOrientationGamepadCamera type camera and set its initial position to (0, 5.5, -5). Point the camera's observation target to the center of the scene (0, 3.5, 0) and set control properties (such as minimum viewing distance minZ = 0.5 and speed to 0.25); Finally, the initialized 3D scene object is returned.

[0044] 2. Loading and importing 3D models To build the 3D environment required by the monitoring system, the system imports multiple building / facility models in .glb format through the following methods: Define a model name array, such as ['Factory 2 Branch 4', 'Factory 2 Branch 5', 'Ground', 'Fence', 'Wall', 'Explosion-proof Line']; Use BABYLON.SceneLoader.ImportMesh to load the model; After loading, scale the model (scaling = new Vector3(-100, 100, 100)) and rotate it 180° around the Y axis. Align the model correctly in 3D space to fit the scene coordinate system.

[0045] 3. User click events and target point selection The system allows users to click anywhere in the Web 3D scene to select a target point and trigger camera control operations: Register click events on the Canvas; Use scene.pick(pointerX, pointerY) to get the picking result of the mouse click; If pickResult.hit is true, it means the user clicked a model or the ground in the scene; Get the spatial coordinates of the click point pickedPoint; Call lookAtTargetPosition(WebcamMesh, pickedPoint) to calculate the PTZ value corresponding to the target point and control the camera to focus on that point.

[0046] 4. Camera Model Construction and Initial Orientation Setting The system uses a spherical model to represent the actual physical camera (dome camera) in the 3D scene and establishes a direction indicator line: Use MeshBuilder.CreateSphere to create a spherical camera model WebcamMesh; Set the camera position to WebcamMeshPosition (configurable); Create a red ray segment rayLine to indicate the direction the camera is facing. The default value is (0,0,50). Attach the line segment as a child node to the camera model so that it rotates with the camera; Use setCameraRotationByPT(WebcamMesh, defaultPTZ.P, defaultPTZ.T) to set the initial heading angle.

[0047] 5. Target point to PTZ angle algorithm When the user clicks a target point in the 3D scene, the system calculates the required PTZ control angle based on the camera position and the target point: Get the camera position cameraPos; Calculate the direction vector dir = targetPoint.subtract(cameraPos).normalize() Calculate the horizontal angle (pan): pan = Math.atan2(dir.x, dir.z) Calculate the vertical angle (tilt): tilt = Math.atan2(dir.y, Math.sqrt(dir.x ** 2 + dir.z ** 2)) Convert radians to degrees: panDeg = BABYLON.Angle.FromRadians(pan).degrees() tiltDeg = BABYLON.Angle.FromRadians(tilt).degrees() Record and print out the calculated PT value for subsequent control: Adjust the orientation of the 3D camera model: camMesh.rotation = new BABYLON.Vector3(-tilt, pan, 0) At the same time, the observation camera smallFreeCamera in the small scene is set to point to the target point to assist the user in confirmation.

[0048] 6. Call the backend interface to set the real camera PTZ After obtaining the target angle, the system calls the actual dome camera control system through the HTTP interface: setPTZ({ pan: panDeg,tilt: tiltDeg}).then(res =>{}) This step realizes the automatic linkage from "clicking the 3D point" to "the ball camera control system executing the rotation".

[0049] 7. Small scene camera perspective synchronous rotation The system supports synchronous mapping of the actual camera PTZ value to the free camera in the small scene to achieve visual observation direction: Receive panDeg and tiltDeg; Convert it to a direction vector: dir = new Vector3( sin(pan) * cos(tilt), sin(tilt), cos(pan) * cos(tilt) ) Set Target(position + dir) for all cameras in the small scene so that their sight lines are consistent with the camera.

[0050] 8. 3D model camera rotation control function In order to ensure that the camera model in the 3D scene is consistent with the actual PTZ state, the system provides a dedicated function: setCameraRotationByPT(cameraMesh, panDeg, tiltDeg) { const pan = BABYLON.Angle.FromDegrees(panDeg).radians() const tilt = BABYLON.Angle.FromDegrees(tiltDeg).radians() cameraMesh.rotation = new BABYLON.Vector3(-tilt, pan, 0) } This function adjusts the rotation property of the camera model to accurately align it with the target position in the scene.

[0051] 9. Real-time video playback module pass <webrtcplayer / > Component, which renders the camera video in real time in the user interface: Parameters such as playerIndex, windowPosition, chanelData, etc. are used to control the window layout; Combined with the rotation of the camera model direction, users can intuitively observe the monitoring results after the viewing angle changes.

[0052] Implementation Method 2 This embodiment provides a monitoring and guidance system based on the linkage between a web-based 3D scene model and a dome camera. The system is constructed using the method for constructing a monitoring and guidance system based on the linkage between a web-based 3D scene model and a dome camera as described in Embodiment 1. The system includes: 3D scene construction module: Using Vue.js as the development framework, combined with Babylon.js to implement WebGL scene construction, load factory areas, campuses, or building models, and calibrate the installation position and orientation of dome cameras; the platform supports multi-module component development, facilitating business separation and logic reuse, and improving system scalability and maintainability.

[0053] The user interaction module supports users to obtain the three-dimensional coordinates of any location in the world coordinate system by clicking on the scene on the web page; The spatial calculation module calculates the required PT (horizontal) and Z (pitch) angles based on the camera's location and the target point's coordinates. It then converts these into the control parameters required by the camera through a spatial geometry algorithm (direction vector to angle conversion), enabling the camera to accurately align with the target point clicked by the user. The PTZ control module converts the calculated PTZ from radians to degrees and sends the converted PTZ parameters in degrees to the corresponding dome camera through the network interface (HTTP API), enabling the camera to rotate and align with the target point. The linkage feedback module is used to compare the consistency of the camera's real-time image with the 3D scene. After the camera is guided, the corresponding spherical camera in the scene is rotated, providing a more intuitive 3D linkage and helping users confirm the accuracy of the target perspective. The playback module is used to play real-time video images.

[0054] Implementation Method 3 An embodiment of the present invention provides an electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor. The memory is used to store software programs and modules, and the processor executes various functional applications and data processing by executing the software programs and modules stored in the memory. The memory and processor are connected via a bus. Specifically, the processor implements any step of the first embodiment described above by executing the computer program stored in the memory.

[0055] It should be understood that in the embodiments of the present invention, the processor referred to may be a central processing unit (CPU), and the processor may also be other general-purpose processors, digital signal processors (DSP), application-specific integrated circuits (ASIC), field-programmable gate arrays (FPGA) or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc. The general-purpose processor may be a microprocessor or any conventional processor, etc.

[0056] The memory may include a read-only memory, a flash memory, and a random access memory, and provides instructions and data to the processor. A portion or all of the memory may also include a non-volatile random access memory.

[0057] In the embodiments provided by the present invention, it should be understood that the disclosed apparatus / terminal equipment and methods can be implemented in other ways. For example, the apparatus / device embodiments described above are merely illustrative. For example, the division of the modules or units described above is merely a logical functional division. In actual implementation, other division methods may be used. For example, multiple units or components may be combined or integrated into another system, or some features may be ignored or not implemented.

[0058] 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, those skilled in the art should understand that they can still modify the technical solutions described in the above embodiments, or make equivalent replacements for some of the technical features therein. 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 various embodiments of the present invention, and should all be included in the scope of protection of the present invention.

Claims

1. A method for constructing a monitoring and guidance system based on the linkage between a Web-based three-dimensional scene model and a dome camera, characterized in that: The method comprises the following steps: Step 1: Build the WEB Internet front-end framework; Step 2: Build a 3D scene based on the framework in step 1 and Babylon.js; Step 3: Add the user interaction module, spatial calculation module, PTZ control module, and linkage feedback module to the framework of step 1; Step 4: Based on the modules in step 3, the playback module is used to play the video in real time.

2. The method according to claim 1, characterized in that Specifically, step 2 uses Vue.js as a development framework and combines it with Babylon.js to implement WebGL scene construction, load factory area, park or building models, and calibrate the installation position and orientation of the dome camera.

3. The method according to claim 2, characterized in that The user interaction module of step 3 supports the user to obtain the three-dimensional coordinates of any position in the scene by clicking on the web page.

4. The method according to claim 3, characterized in that The spatial calculation module of step 3 is to calculate the required PT and Z angles according to the position of the ball camera and the coordinates of the target point, and convert them into the control parameters required by the ball camera through a spatial geometry algorithm.

5. The method according to claim 4, characterized in that: Determine the pan and tilt angles required by the camera based on spatial geometry: Step 3.1: Get the current coordinates of the ball camera S1 (x1, y1, z1) and the target point coordinates S2 (x2, y2, z2); Step 3.2: Calculate the target direction vector dir1 by vector difference: dir1 = S1.subtract(S2).normalize(); Step 3.3: After normalizing the direction vector, use inverse trigonometric functions to calculate the corresponding rotation angle of the direction vector in three-dimensional space; panRad = Math.atan2(dir.x, dir.z); tiltRad = Math.asin(dir.y).

6. The method according to claim 3, characterized in that: The PTZ control module in step 3 converts the calculated PTZ from radians to degrees, and uses the converted PTZ parameters in degrees to send them to the corresponding dome camera through the network interface to enable the camera to rotate and aim at the target point.

7. The method according to claim 3, characterized in that Convert radians to degrees panDeg = BABYLON.Angle.FromRadians(panRad).degrees(); tiltDeg = BABYLON.Angle.FromRadians(tiltRad).degrees().

8. The method according to claim 3, characterized in that: The linkage feedback module in step 3 is to obtain the real-time video stream of the camera, display the image on the web interface, and create a small scene of the camera's perspective in the 3D scene to compare the consistency between the real-time camera image and the 3D scene. After the camera is guided, the corresponding spherical camera in the scene is rotated, which provides a more intuitive 3D linkage and helps users confirm the accuracy of the target perspective.

9. A monitoring and guidance system based on the linkage between a three-dimensional scene model on a Web side and a dome camera, characterized in that: A system constructed using the method for constructing a monitoring and guidance system based on the linkage between a Web-side three-dimensional scene model and a dome camera as described in any one of claims 1 to 8, the system comprising: 3D scene construction module: Using Vue.js as the development framework, combined with Babylon.js to implement WebGL scene construction, load factory area, park or building models, and calibrate the installation position and orientation of the dome camera. The user interaction module supports users to obtain the three-dimensional coordinates of any location in the world coordinate system by clicking on the scene on the web page; The spatial calculation module calculates the required PT and Z angles based on the camera's location and the target point coordinates, and converts them into the control parameters required by the camera through spatial geometry algorithms, enabling the camera to accurately align with the target point clicked by the user. The PTZ control module converts the calculated PTZ from radians to degrees and sends the converted PTZ parameters to the corresponding dome camera through the network interface to enable the camera to rotate and align with the target point. The linkage feedback module is used to compare the consistency of the camera's real-time image with the 3D scene. After the camera is guided, the corresponding spherical camera in the scene is rotated, providing a more intuitive 3D linkage and helping users confirm the accuracy of the target perspective. The playback module is used to play real-time video images.

10. A computer device, characterized in that: The method comprises a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein when the processor executes the computer program, the method according to any one of claims 1 to 8 is implemented.

Images