A large-scale monitoring platform needs to integrate H3C's video monitoring system, and the way of integration is through static pages. H3C provides a page control, which can be called directly on the page through JS script. You need to pass a camera number to this control. After passing, the control on the page will display the video of the camera. It is convenient to call, but the problem is that the video of the camera needs to be displayed on a separate page. When the user needs to watch the video, he can select the corresponding camera from the main page to open this page, and pass the number of the corresponding camera. At that time, the system interface was all static HTML pages, so how to pass different camera numbers between two static HTML pages to achieve dynamic switching of video, and let the user not perceive it (the user did not want the URL of the page to have any change, so I can't make a fuss about the URL)?
One of the methods is shared as follows:
On the main system page, add a text bar to display (here you can also think of it as storing) the camera number clicked by the user
<INPUT TYPE="text" VALUE="" id=CamIDText>
On the main system interface, for each camera icon, when the user clicks, a JS method is called, which sets a value in the text box in step 1, the value is the camera number, and then opens the camera video page.
The following is the specific method implementation in JS:
document.getElementById('CamIDText').value = carmaid;
var url = "jingji_shipin.html";
var nw = window.open(url, null, "height=600,width=700,left=100,top=80,status=yes,toolbar=no,menubar=no,location=no");
nw.document.title = carmaid+"Camera Video";
if(nw && nw.open && !nw.closed)
nw.focus();
On the camera video page, use window.opener.document.getElementById('CamIDText').value to get the corresponding camera ID, and then pass it to the video control.
Hide the dialog box in step 1, otherwise it will make our users feel strange to have such a dialog box in the main interface.