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青犀视频官方网站。
转载:https://blog.csdn.net/EasyGBS/article/details/111572994
查看评论