飞道的博客

国标GB28181协议视频智能告警分析平台EasyGBS视频调阅播放界面快照设定介绍

236人阅读  评论(0)

TSINGSEE青犀视频的新用户应该知道,我们现有的EasyGBS内有了视频调阅功能,该功能是今年版本更新后才新增的,用户可以在视频调阅界面调阅至少4分屏的视频进行预览。

但是该界面目前有一点需要优化,就是如果高通道的获取流接口有问题,或者请求时间过长时,就会导致该分屏一直处于黑屏状态,用户无法立即看到该视频流,就可能与未调阅的视频通道混淆。因此我们可以效仿EasyNVR的EasyWasmPlayer播放器来做一个视频快照。(EasyWasmPlayer播放器如何优化起播时的快照功能

当我们在EasyGBS内点击某通道发送请求流地址的数据接口时,先创建EasyWasmPlayer播放器实例,同时调用该通道快照的接口,并利用播放器快照展示的函数将数据返回给播放器,将照片展示给用户,提示用户该通道正在获取流请等待。当请求流地址接口返回数据时,将快照隐藏。开始播放视频流,参考代码如下:


  
  1. // 获取通道快照
  2. getChannelSnap() {
  3. $.get( "/api/v1/device/channelsnap", {
  4. serial: this.DeviceID,
  5. code: this.ID,
  6. encode: true,
  7. }).then((res) => {
  8. let _ this = this;
  9. this.channelSnap = res;
  10. this.getNewVideoUrl();
  11. console.log( "到这里2");
  12. $.get( "/api/v1/stream/start", {
  13. serial: _ this.DeviceID,
  14. code: _ this.ID,
  15. }).then((res) => {
  16. //获取cookie
  17. this.MediaTypeDate = this.MediaType(
  18. this.baseconfig.PlayMediaTypeDefault
  19. );
  20. _ this.videoUrl = res[ this.MediaTypeDate];
  21. if (_ this.baseconfig.DefaultPlayer == "auto") {
  22. if (res.VideoCode == "H264") {
  23. console.log( "到这里3");
  24. _ this.getOldVideoUrl();
  25. _ this.NewPlay = false;
  26. _ this.oldplay = true;
  27. } else {
  28. _ this.oldplay = false;
  29. _ this.NewPlay = true;
  30. // 获取到地址之后初始化播放器
  31. _ this.new265play.play( this.videoUrl, 1);
  32. }
  33. } else if (_ this.baseconfig.DefaultPlayer == "EP") {
  34. if (res.VideoCode != "H264") {
  35. _ this.$message({
  36. type: "error",
  37. message: "H265流请切换EasyWasmPlayer播放器",
  38. });
  39. }
  40. _ this.NewPlay = false;
  41. _ this.oldplay = true;
  42. _ this.getOldVideoUrl();
  43. } else {
  44. _ this.NewPlay = true;
  45. _ this.oldplay = false;
  46. _ this.new265play.play( this.videoUrl, 1);
  47. }
  48. });
  49. _ this.touch();
  50. });
  51. },

EasyGBS的视频调阅也就相当于分屏功能,如果大家想实际测试使用,也可以联系我们获取测试版本,TSINGSEE青犀视频欢迎大家的咨询和交流。更多视频相关解决方案,可关注我们或直接访问TSINGSEE青犀视频官方网站。


转载:https://blog.csdn.net/EasyGBS/article/details/111572994
查看评论
* 以上用户言论只代表其个人观点,不代表本网站的观点或立场