vue 康威视web视频插件

海康威视 Web 视频插件 Vue 集成指南
一、环境准备
为了确保海康威视 H5Player 2.1.3 可以顺利运行于基于 Vue 的项目中，需先确认开发环境中已安装 Node.js 和 npm。这一步骤对于后续依赖包管理至关重要。
二、创建 Vue 项目并引入 H5Player SDK
如果尚未拥有一个现成的 Vue 工程，则可以通过 Vue CLI 创建一个新的工程实例：
vue create my-hikvision-project
cd my-hikvision-project
登录后复制
接着，在项目的根目录下执行命令来下载官方提供的 JavaScript SDK 文件，并将其放置到 public 文件夹内以便全局访问[^1]。
三、配置 webpack 加载外部资源
编辑 vue.config.js 来声明对外部 JS 库的支持，使应用能够识别来自服务器端推送过来的数据流：
module.exports = {
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
// 生产模式下的优化设置...
} else {
Object.assign(config.externals, {
hikplayer: "HIKPLAYER"
});
}
},
};
登录后复制
此操作允许开发者利用 CDN 或本地路径加载所需的播放器库文件而不必打包进最终构建产物之中。
四、编写组件实现视频显示功能
现在可以在任意单文件组件(.vue)里定义好 HTML 结构以及对应的初始化逻辑：
<template>
<div id="videoContainer"></div>
</template>

<script>
export default {
mounted() {
window.HIKPLAYER.init({
containerId: "#videoContainer",
wsUrl: "wss://your-websocket-server-address",// 替换成实际地址
});
}
};
</script>
登录后复制
上述代码片段展示了如何通过挂载钩子函数完成对指定容器节点内的视频渲染工作；同时指定了 WebSocket 连接字符串作为参数传递给 init 方法，从而建立起客户端和服务端之间的通信桥梁。