视频上云/安防视频融合平台/安防视频云服务EasyCVR通道播放界面出现样式重叠如何修正?

时间:2022-07-25
本文章向大家介绍视频上云/安防视频融合平台/安防视频云服务EasyCVR通道播放界面出现样式重叠如何修正?,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

EasyCVR是TSINGSEE青犀视频研发安防视频融合平台,设备端有公网IP,可通过海康SDK、Onvif/RTSP、GB28181、ehome协议接入到EasyCVR中;设备端无公网IP,可通过GB28181、ehome协议接入到EasyCVR中,也可在内网安装EasyNTS设备,与公网建立传输通道,这样即可通过海康SDK、Onvif/RTSP接到EasyCVR中。

近期我们的前端研发人员在优化EasyCVR播放界面时,发现播放单通道时,界面出现了样式重叠,遮挡了角落镜头,如下图:

随后研发人员重启了项目,项目在本机显示正常。然后经过排查发现只有在电脑屏幕分辨率为125%和播放H265视频的时候才会出现重叠效果。根据这个前提,我们可以进行以下修正排查:

1>监听设备是否为125%。

const state = {
  pixel: window.devicePixelRatio === 1.25,
  isIE: !!window.ActiveXObject || "ActiveXObject" in window,
  siderlist: [],
  favoriteslist: []
};

2>找到显示播放器的样式添加样式

.sereen-player-box1 {
  padding-bottom: 47%;
}
.sereen-player-box2 {
  padding-bottom: 44%;
}
.sereen-player-box3 {
  padding-bottom: 56%;
}

3>根据监听的屏幕是为125%显示对应的样式

:class="[
      { 'sereen-player-box1': !isPlayer && aspects == 47 },
      { 'sereen-player-box2': !isPlayer && aspects == 44 },
      { 'sereen-player-box3': !isPlayer && aspects == 56 }
]"

修正之后的界面显示如下图: