vue3+vite+ts引入海康威视监控_vue3接入海康威视

最新推荐文章于 2024-12-10 23:16:23 发布

原创

最新推荐文章于 2024-12-10 23:16:23 发布 · 678 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #ecmascript

在这里插入图片描述
在vue3项目里的index.html引入

    <!--三个必要的js文件引入-->
    <script src="./public/hikvision/jquery-1.12.4.min.js"></script>
    <script src="./public/hikvision/jsencrypt.min.js"></script>
    <!-- 用于RSA加密 -->
    <script src="./public/hikvision/web-control\_1.2.5.min.js"></script>
    <!-- 用于前端与插件交互 -->

2.新建一个监控复用组件,只需要通过props传入监控编号就能使用了
在这里插入图片描述
index.vue

<!-- 海康威视组件 -->
<template>
  <div :id="state.id" class="playWnd"></div>
</template>

<script setup lang="ts">
import { reactive, onMounted, onDeactivated, watch, onActivated } from "vue";
import { useRouter } from "vue-router";
const $router = useRouter();
const WebControl = window.WebControl; //index.html引入 直接从window里面拿到sdk
const JSEncrypt = window.JSEncrypt; //index.html引入 直接从window里面拿到sdk
const props = defineProps({
  wsUrl: {
    type: String, //视频监控code
  },
});
console.log(props.wsUrl, "==