springboot集成萤石摄像头

最新推荐文章于 2024-07-29 17:13:09 发布

wengelovelian

最新推荐文章于 2024-07-29 17:13:09 发布

阅读量603

点赞数 9

文章标签： spring boot windows microsoft

本文链接：https://blog.csdn.net/lianyunpeng/article/details/135858312

版权

本文介绍了如何在后端使用EzvizSDK进行API调用，获取accesstoken并用于实时视频监控。代码展示了如何获取摄像头列表、处理访问令牌以及在前端显示视频监控的功能。

摘要由CSDN通过智能技术生成

后端：

@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>