海康预览功能前端实现方式vue3

### Vue3 实现海康威视摄像头预览功能 为了实现在 Vue3 中集成并展示来自海康威视摄像机的实时视频流，通常采用 Web SDK 或者 WebSocket 接口来连接服务器端 API 来获取 RTSP 流地址或者其他形式的数据传输协议。下面是一个基于官方文档以及社区实践总结出来的解决方案[^1]。 #### 安装依赖库 首先需要安装 `hikvision-web-sdk` 这个 npm 包作为与海康设备通信的基础工具： ```bash npm install hikvision-web-sdk --save ``` #### 初始化SDK实例 创建一个新的组件用于管理整个过程中的状态变化，并初始化 HikVision 的 JS SDK 对象: ```javascript import { defineComponent, onMounted } from 'vue'; import HCNetSDK from "hikvision-web-sdk"; export default defineComponent({ name: 'CameraPreview', setup() { const sdkInstance = new HCNetSDK(); onMounted(() => { // Initialize the SDK instance here... sdkInstance.init(); }); return { sdkInstance, }; } }); ``` #### 获取媒体数据流 定义方法用来请求特定 IP 地址下的某个通道号对应的直播源 URL (RTSP): ```typescript async function getLiveStreamUrl(ipAddress:string, channelNumber:number){ try{ let result = await this.sdkInstance.GetMediaFileURL({ ip : ipAddress , port:"80", username :"admin", password :"password", streamType : 0,// Main Stream transportMode : false, // TCP Mode channelNo :channelNumber }); console.log('Got live stream url:',result); return result; }catch(error){ throw Error(`Failed to fetch live stream URL ${error}`); } } ``` #### 使用 Video Element 显示视频 最后一步是在模板部分加入 `<video>` HTML5 元素并通过 JavaScript 设置其 src 属性指向之前获得到的 RTSP 路径： ```html <template> <div class="camera-preview"> <!-- Assuming you have a method called startPlayback --> <button @click="startPlayback">Start Playback</button> <video id="liveVideo" controls autoplay></video> </div> </template> <script lang="ts"> // ... previous code ... methods:{ async startPlayback(){ const videoElement = document.getElementById("liveVideo") as HTMLVideoElement; try { const rtspUrl = await this.getLiveStreamUrl("your-camera-ip-address", 1); if (!rtspUrl) throw new Error("Invalid or empty RTSP URL"); // Set up media source and attach it to our player element. videoElement.srcObject = null; // Clear any existing sources first. // For browsers that support MSE (Media Source Extensions), use them instead of direct assignment. if ('mediaSource' in window && typeof MediaSource !== 'undefined') { var mediaSource = new MediaSource(); mediaSource.addEventListener('sourceopen', () => { var sourceBuffer = mediaSource.addSourceBuffer('video/mp4'); fetch(rtspUrl).then(response=>response.arrayBuffer()).then(buffer=>{ sourceBuffer.appendBuffer(new Uint8Array(buffer)); }).finally(()=>{ setTimeout(()=>{mediaSource.endOfStream();}, 2000); // End after some delay. }); }); videoElement.src = URL.createObjectURL(mediaSource); } else { // Fallback approach using simple attribute setting for older browser versions. videoElement.setAttribute('src', rtspUrl); } videoElement.play().catch(console.error); } catch (err) { alert(err.message || err.toString()); } }, }, </script> ``` 上述代码片段展示了如何利用现代浏览器特性如 Media Source Extension 和 Fetch API 处理更复杂的场景；对于不支持这些特性的旧版浏览器，则提供了基本的功能降级方案[^2]。