Onvif/RTSP网络安防摄像机网页无插件直播方案EasyNVR在IE浏览器下接口调用成功但页面无法显示问题解决

 

背景分析

随着互联网基础设施建设的不断完善和发展，带宽的不断提速，尤其是光纤入户、4G/5G/NB-IoT各种网络技术的大规模商用，视频随时随地可看、可控、可视频会议调度指挥、可智能预警、可智能检索回溯的诉求越来越多，尤其是移动视频应用技术和智能语音技术的普及和发展，使得视频智能分析和语音智能理解支持的需求在各行各业越来越受到青睐和重视，简简单单的视频直播、视频会议、语音播报已经越来越不符合商业规律。而在传统视频监控、视频会议行业里面，互联网思维、架构和技术完全可以成功引入，尤其是在移动互联网、物联网、深度学习、智能分析、云端组网方面的融合技术，完全能够满足新形势下的各种行业的终端智能化的需要。

EasyNVR是一种通过简单的摄像机通道配置，云平台对接配置，CDN配置等，将统一监控行业内部的高清网络摄像机IP摄像机通过通道配置来接入摄像头的，这些通道配置、通道展示等都是通过接口的调用来完成的。理论上，只要调用接口返回成功码，就表示该接口调用成功，后续操作得以进行。

EasyNVR在IE浏览器下接口调用成功但页面无法显示问题

发现问题

我们在为用户解决相关问题的时候，经常会使用远程操作来更为直观的判定问题出现的环节。也是在我们为用户远程的时候发现，当使用IE浏览器成功调用EasyNVR接口后，浏览器没有第一时间将接口返回的数据进行处理展示。

正常来说，只要rtsp地址没有问题，配置成功后，视频广场应该会出现对应的视频通道信息，如下图：

分析问题

对于这样的问题，我们第一步要排查的是数据设置是否成功。经过我们的验证证明接口设置数据并无问题。随后我们需要排查浏览器自身兼容的问题，经过验证和资料查阅发现，此问题正是IE浏览器自身问题。

ie浏览器在调用一个接口成功后，下次调用会优先获取上次接口在浏览器中的缓存数据。也就是我们调用接口获取的数据，虽然是通过该接口获得，但不一定是实时的、最新的。

解决问题

为了确保每次调用接口的不同，需要在每次调用接口时，给接口传递一个唯一、不重复的参数。

$.get(_url + "/getchannelsconfig?t="+new Date().getTime());

EasyNVR最终选择是在调用对应接口时，传递一个时间参数，可以保证他的唯一性。这样每次浏览器识别的接口一样，但是传递这个参数是不同的，就会获取到实时信息。

效果也是明显：

由于EasyNVR通过接口获取的数据相对来说是有点多的，因此每次通过接口获取数据，相对来说是有点影响加载效果的，没有在缓存中直接提取来的迅速。因此除非必须使用ie浏览器，否则不建议通过这种方式来实现此效果。