后端:
@Value("${ezviz.appKey}")
private String appKey;
@Value("${ezviz.appSecret}")
private String appSecret;
@Value("${ezviz.accessTokenUrl}")
private String accessTokenUrl;
@Value("${ezviz.liveUrl}")
private String liveUrl;
public List<CameraInfo> viewCamera(CameraInfo cameraInfo) {
List<CameraInfo> list = new ArrayList<CameraInfo>();
Map<String, String> map = new HashMap<String, String>();
map.put("appKey", appKey);
map.put("appSecret", appSecret);
String ys_accessToken = redisCache.getCacheObject("ys_accessToken");
if (StringUtils.isEmpty(ys_accessToken)) {
String s = HttpUtils.sendPost(accessTokenUrl, map);
JSONObject jsonObject = JSONObject.parseObject(s);
if ("200".equals(jsonObject.getString("code"))) {
String data = jsonObject.getString("data");
JSONObject json = JSONObject.parseObject(data);
ys_accessToken = json.getString("accessToken");
Long expireTime = json.getLong("expireTime");
Long time = new Date().getTime();
Long yxtime = (expireTime - time) / 1000;
redisCache.setCacheObject("ys_accessToken", ys_accessToken, yxtime.intValue(), TimeUnit.SECONDS);
}
}
if (StringUtils.isEmpty(cameraInfo.getDeviceSerial())) {
List<CameraInfo> cameraInfos = cameraInfoMapper.selectCameraInfoList(cameraInfo);
if (StringUtils.isNotEmpty(cameraInfos)) {
for (CameraInfo info : cameraInfos) {
CameraInfo camera = getUrl(map, ys_accessToken, info);
list.add(camera);
}
}
} else {
CameraInfo info = getUrl(map, ys_accessToken, cameraInfo);
list.add(info);
}
return list;
}
private CameraInfo getUrl(Map<String, String> map, String ys_accessToken, CameraInfo info) {
CameraInfo camera = new CameraInfo();
map.put("accessToken", ys_accessToken);
map.put("deviceSerial", info.getDeviceSerial());
int maxRetry = 3;
JSONObject jsonObject = new JSONObject();
while (maxRetry-- > 0) {
String s = HttpUtils.sendPost(liveUrl, map);
jsonObject = JSONObject.parseObject(s);
camera.setAccessToken(ys_accessToken);
if ("200".equals(jsonObject.getString("code"))) {
break;
}
}
if ("200".equals(jsonObject.getString("code"))) {
String data = jsonObject.getString("data");
JSONObject json = JSONObject.parseObject(data);
String url = json.getString("url");
camera.setUrl(url);
} else {
// camera.setAccessToken("ra.d6hje2wj0vfi1yo6dwlaxeglbvjf9r34-1vy9qqrz0q-0p6m9yn-lis3d7lmm");
camera.setUrl("ezopen://open.ys7.com/" + info.getDeviceSerial() + "/1.hd.live");
}
return camera;
}
private CameraInfo getUrlByList(Map<String, String> map, String ys_accessToken, List<CameraInfo> cameraInfos) {
CameraInfo camera = new CameraInfo();
StringBuilder url = new StringBuilder();
map.put("accessToken", ys_accessToken);
cameraInfos.forEach(e -> {
map.put("deviceSerial", e.getDeviceSerial());
int maxRetry = 3;
JSONObject jsonObject = new JSONObject();
while (maxRetry-- > 0) {
String s = HttpUtils.sendPost(liveUrl, map);
jsonObject = JSONObject.parseObject(s);
camera.setAccessToken(ys_accessToken);
if ("200".equals(jsonObject.getString("code"))) {
break;
}
}
int curIndex = cameraInfos.indexOf(e);
if ("200".equals(jsonObject.getString("code"))) {
String data = jsonObject.getString("data");
JSONObject json = JSONObject.parseObject(data);
if(curIndex > 0){
url.append("," + json.getString("url"));
}else {
url.append(json.getString("url"));
}
}else {
String zUrl = "ezopen://open.ys7.com/" + e.getDeviceSerial() + "/1.hd.live";
if(curIndex > 0){
url.append("," + zUrl);
}else {
url.append(zUrl);
}
}
});
camera.setUrl(url.toString());
return camera;
}
前端:
<!-- 视频监控 -->
<template>
<div>
<el-row>
<el-col :span="12" v-for="(camera, index) in cameraList" style="margin-bottom: 20px">
<div id="video-container"></div>
</el-col>
</el-row>
</div>
</template>
<script setup>
const props = defineProps({
// 油罐编号
cameraList: {
type: Array,
default: null,
},
})
import {ref, onBeforeUnmount} from 'vue'
import EZUIKit from "ezuikit-js";
const player = ref(null)
defineExpose({
// handleAfterClose,
autoVideoOne
})
// 销毁组件时断开连接
onBeforeUnmount(() => {
console.log("销毁萤石时关闭播放流")
player.value.stop()
})
function autoVideoOne() {
let arr = props.cameraList;
arr.forEach((el, index) => {
if(el.accessToken != null){
let width = 800;
let height = 450;
player.value = new EZUIKit.EZUIKitPlayer({
autoplay: true, // 默认播放
//视频播放包裹元素
id: "video-container",
//萤石token
accessToken: el.accessToken || '',
// ezopen://open.ys7.com/${设备序列号}/{通道号}.live
url: el.url || '', // 播放地址
template: "pcLive", // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版;
width: width,
height: height
})
}
})
}
</script>
<style lang="scss" scoped>
.video {
width: 100%;
height: 80%;
.video-item {
display: flex;
padding: 1%;
.item {
flex: 1;
height: 40vh;
margin: 0 1%;
.home {
width: 100%;
height: 100%;
}
}
}
}
</style>