TSINGSEE青犀视频的新用户应该知道,我们现有的EasyGBS内有了视频调阅功能,该功能是今年版本更新后才新增的,用户可以在视频调阅界面调阅至少4分屏的视频进行预览。
但是该界面目前有一点需要优化,就是如果高通道的获取流接口有问题,或者请求时间过长时,就会导致该分屏一直处于黑屏状态,用户无法立即看到该视频流,就可能与未调阅的视频通道混淆。因此我们可以效仿EasyNVR的EasyWasmPlayer播放器来做一个视频快照。(EasyWasmPlayer播放器如何优化起播时的快照功能)
当我们在EasyGBS内点击某通道发送请求流地址的数据接口时,先创建EasyWasmPlayer播放器实例,同时调用该通道快照的接口,并利用播放器快照展示的函数将数据返回给播放器,将照片展示给用户,提示用户该通道正在获取流请等待。当请求流地址接口返回数据时,将快照隐藏。开始播放视频流,参考代码如下:
// 获取通道快照
getChannelSnap() {
$.get("/api/v1/device/channelsnap", {
serial: this.DeviceID,
code: this.ID,
encode: true,
}).then((res) => {
let _this = this;
this.channelSnap = res;
this.getNewVideoUrl();
console.log("到这里2");
$.get("/api/v1/stream/start", {
serial: _this.DeviceID,
code: _this.ID,
}).then((res) => {
//获取cookie
this.MediaTypeDate = this.MediaType(
this.baseconfig.PlayMediaTypeDefault
);
_this.videoUrl = res[this.MediaTypeDate];
if (_this.baseconfig.DefaultPlayer == "auto") {
if (res.VideoCode == "H264") {
console.log("到这里3");
_this.getOldVideoUrl();
_this.NewPlay = false;
_this.oldplay = true;
} else {
_this.oldplay = false;
_this.NewPlay = true;
// 获取到地址之后初始化播放器
_this.new265play.play(this.videoUrl, 1);
}
} else if (_this.baseconfig.DefaultPlayer == "EP") {
if (res.VideoCode != "H264") {
_this.$message({
type: "error",
message: "H265流请切换EasyWasmPlayer播放器",
});
}
_this.NewPlay = false;
_this.oldplay = true;
_this.getOldVideoUrl();
} else {
_this.NewPlay = true;
_this.oldplay = false;
_this.new265play.play(this.videoUrl, 1);
}
});
_this.touch();
});
},
EasyGBS的视频调阅也就相当于分屏功能,如果大家想实际测试使用,也可以联系我们获取测试版本,TSINGSEE青犀视频欢迎大家的咨询和交流。更多视频相关解决方案,可关注我们或直接访问TSINGSEE青犀视频官方网站。