海康威视 vue3 rstp webrtc-streamer typescript

### 集成海康威视摄像头视频流至基于 Vue3 和 WebRTC-Streamer 的 TypeScript 项目 #### 安装依赖库 为了使项目能够支持 WebRTC 并处理 RTSP 流，需安装必要的 npm 包。通过命令行工具执行如下操作来引入 `webrtc-streamer` 及其相关依赖项： ```bash npm install webrtc-streamer ws ``` 此过程会下载并配置好所需的 JavaScript 库以便后续开发工作[^1]。 #### 创建 WebSocket 连接 建立与服务器之间的 WebSocket 实例用于传输数据包，在组件内部定义连接逻辑： ```typescript import { ref, onMounted } from 'vue'; import * as WebSocket from 'ws'; const streamUrl = ref<string>(''); let socket: WebSocket; onMounted(() => { const url = new URL('wss://your-server-address'); url.searchParams.append('url', 'rtsp://admin:@192.168.x.xx/Streaming/channels/0'); socket = new WebSocket(url.toString()); socket.onmessage = (event) => { console.log(`Received message ${event.data}`); // 处理收到的消息... }; socket.onerror = function(error) { console.error(`WebSocket error observed:${error}`); }; }); ``` 上述代码片段展示了如何创建一个 WebSocket 对象，并设置消息接收回调函数以及错误监听器。 #### 初始化 WebRTC Streamer 接下来初始化 WebRTC Streamer 来获取来自摄像机的实时媒体流并将之附加到 HTML 页面中的 `<video>` 元素上显示出来： ```html <template> <div id="app"> <video autoplay playsinline></video> </div> </template> <script lang="ts"> import { defineComponent, onMounted } from "vue"; import WebrtcStreamer from "webrtc-streamer"; export default defineComponent({ name: "App", setup() { let videoElement = document.querySelector("video"); onMounted(async () => { try { await navigator.mediaDevices.getUserMedia({ audio: false, video: true }); var wsURL = "wss://your-server-url?offer=sdp&sdp="; var ws = new WebSocket(wsURL); var config = {}; var streamer = new WebrtcStreamer(videoElement!, ws, config); window.addEventListener("beforeunload", function(event){ streamer.close(); }); streamer.start().then(function(){ console.log("Started"); }).catch(function(err){ console.error("Failed to start:", err); }); } catch (err) { console.error("Error accessing media devices.", err); } }); return {}; }, }); </script> ``` 这段脚本实现了当页面加载完成后自动尝试访问用户的摄像头权限（这里仅作为示例），并通过指定地址向远程服务器发起请求以启动视频流播放服务；最后调用 `WebrtcStreamer` 类的方法完成实际的数据交换流程。