前端vue對接海康攝像頭流程

1、拆包攝像頭、插電源

2、下載SADP(設備網絡搜索),連接設備,獲取ip地址

下載地址:https://partners.hikvision.com/tools
找到自己的設備類型DS開頭
在這里插入圖片描述

3、攝像頭鏈接wifi、網線

登錄設備預覽配置網頁-配置網絡-可預覽等

4、查看預覽視頻流取消下載瀏覽器插件安裝(LocalServiceComponents好像是)

5、獲取前端視頻流(地址: https://knowbot.hikvision.com/webchatbot-pc/#/sharingPath?params=369061&sysNum=1693447044565&flowItemId=5085&type=0)

6、獲取rtsp地址方法:

https://knowbot.hikvision.com/webchatbot-pc/#/sharingPath?params=369061&sysNum=1693447044565&flowItemId=5085&type=0
示例:rtsp://admin:hik12345@10.16.4.25:554/Streaming/Channels/101

7、后端將rtsp地址轉成hls格式,前端才能加載

交給后端

8、前端加載hls視頻

(1)如果后端給的是m3u8需要使用插件hls才能加載
yarn add hls.js

<video class="video-box" muted ref="videoPlayer"></video>const video: any = videoPlayer.value;let url: string = "";if (Hls.isSupported()) {// 檢查瀏覽器是否支持HLStry {hls.loadSource(http:XXX.m3u8); // 加載m3u8源文件hls.attachMedia(video); // 將HLS與<video>元素關聯起來hls.on(Hls.Events.MANIFEST_PARSED, () => {// 監聽manifest解析完成事件,可以開始播放了video.play(); // 開始播放視頻});} catch (error) {// 捕獲并處理錯誤,例如網絡問題等。console.error(error);}} else if (video.canPlayType("application/vnd.apple.mpegurl")) {// 對于不支持HLS的瀏覽器,嘗試使用原生HTML5播放M3U8(不推薦,因為沒有HLS優化)video.src = "/api/hls/wtg.m3u8"; // 直接設置視頻源,但不推薦,因為不支持HLS的特性。} else {// 對于不支持HLS的瀏覽器,提供一個備選方案或提示信息。console.error("Your browser does not support HLS"); // 打印錯誤信息或顯示錯誤提示。}

(2)如果是mp3前端可直接加載

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/web/88977.shtml
繁體地址,請注明出處:http://hk.pswp.cn/web/88977.shtml
英文地址,請注明出處:http://en.pswp.cn/web/88977.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

org.casic.javafx.control.PaginationPicker用法

org.casic.javafx.control.PaginationPicker 是 CASIC&#xff08;或某位作者&#xff09;基于 JavaFX 自制的分頁控件&#xff0c;功能比官方 Pagination 更完整&#xff0c;支持&#xff1a;首頁 / 上一頁 / 下一頁 / 尾頁按鈕頁碼快速跳轉每頁條數自定義總數據量、當前頁碼、…

下載 | Win10 2021精簡版,預裝應用極少!(7月更新、Win 10 IoT LTSC 2021版、適合老電腦安裝)

? 【資源A047】Win10 IoT LTSC 2021精簡版 &#x1f536;Windows 10 IoT 企業版 LTSC 2021 正式版更新中。LTSC是長期服務渠道版本&#xff0c;網友俗稱“老壇酸菜版”&#xff0c;相當于精簡版Win10&#xff0c;精簡了很多預裝應用&#xff0c;同時更新頻率也更低&#xff0c…

Web3:Foundry使用指南

Foundry目錄1. 前言2. 什么是Foundry3. 安裝與環境配置1. 安裝工具2. 重新加載 .bashrc3. 檢查環境變量 PATH4. 手動運行 foundryup4. Foundry的基本使用1.創建一個新的Foundry項目2. 編寫智能合約3. 編譯智能合約4. foundry.toml 主要作用5.部署智能合約5. Cli參考1. forge2. …

uniapp+unipush推送配置

APP推送記錄 一、使用框架 Uniappunipush推送插件 二、需要提前準備的 1.準備自有證書 可以用這個網站—香蕉云編&#xff08;用于安卓 ios證書生成&#xff09;https://www.yunedit.com/update/androidzhengshu/list 安卓證書生成后&#xff0c;下載證書&#xff0c;除了原文…

CentOS系統哪些版本?分別適用于那些業務或網站類型?

CentOS&#xff08;Community ENTerprise Operating System&#xff09;是一款開源的企業級 Linux 操作系統&#xff0c;因其穩定性、安全性和長期支持周期&#xff0c;廣泛應用于服務器環境。以下是 CentOS 的主要版本及其適用場景的詳細介紹。1. CentOS 主要版本CentOS 的版本…

【前端】【Iconify圖標庫】【vben3】createIconifyIcon 實現圖標組件的自動封裝

&#x1f9e9; Vue 圖標管理全攻略&#xff1a;Iconify createIconifyIcon 封裝最佳實踐 在前端項目中&#xff0c;圖標無處不在。按鈕需要圖標&#xff0c;導航需要圖標&#xff0c;提示信息也少不了圖標。如何優雅、高效地使用圖標&#xff0c;是每個中大型 Vue 項目不可回…

數據可視化全流程設計指南

一、需求定義階段1. 明確核心目標回答關鍵問題&#xff1a;2. 確定數據特性import pandas as pd data pd.read_csv(your_data.csv) print(f""" 數據概覽: - 維度: {data.shape[1]}列 {data.shape[0]}行 - 類型分布: {data.dtypes.value_counts()} - 缺失值: …

Llama系列:Llama1, Llama2,Llama3內容概述

前言 參考視頻&#xff1a;大模型修煉之道(三): Llama系列講解 Llama1&#xff0c;Llama2, Llama3_嗶哩嗶哩_bilibili 本博客是基于視頻的學習筆記&#xff0c;以及相關知識點的擴充 Llama1 1. 動機 使用完全開源數據&#xff0c;性能媲美GPT3研究開源&#xff0c;禁止商用…

Docker 搭建本地Harbor私有鏡像倉庫

Docker 搭建本地Harbor私有鏡像倉庫 一、Harbor 核心價值與企業級特性解析 在容器化技術普及的背景下&#xff0c;鏡像倉庫作為容器生命周期的核心組件&#xff0c;其可靠性直接影響開發效率與生產穩定性。Docker 官方的 Registry 雖能實現基礎鏡像存儲&#xff0c;但存在明顯短…

AI 助力:如何批量提取 Word 表格字段并導出至 Excel

在日常辦公中&#xff0c;我們經常需要處理大量的 Word 文檔中的表格數據&#xff0c;如學生登記表、客戶信息表、報名表等。然而這些表格往往格式各異、字段命名不統一&#xff08;如“姓名”“名字”“Name”&#xff09;&#xff0c;甚至含有合并單元格或多余空白行&#xf…

在 Azure Linux 上安裝 RustFS

本文分享在 Azure Linux 上安裝并使用對象存儲 RustFS 的過程。 關于 RustFS RustFS 是一款用 Rust 語言編寫的分布式存儲系統&#xff0c;兼容 S3 協議&#xff0c;是 MinIO 的國產化平替。詳情可以前往 RustFS 官網。目前&#xff0c;RustFS 支持二進制、Docker 安裝方式&am…

實現在線預覽pdf功能,后臺下載PDF

<!-- PDF預覽模態框 --><n-modalv-model:show"pdfModalVisible"title"投訴統計報告預覽":closable"false":mask-closable"false"positive-click"closePdfModal"positive-text"關閉":width"900"…

華為VS格行VS中興VS波導隨身WIFI6怎么選?流量卡OR隨身WIFI,長期使用到底誰更香?

在移動互聯時代&#xff0c;流量焦慮成為現代人的通病。面對"辦流量卡還是隨身WiFi"的抉擇&#xff0c;許多人陷入兩難。本文從實際需求出發&#xff0c;用數據和場景幫你精準決策&#xff0c;尤其這五類人群建議直接選擇正規隨身WiFi。一、這五類人&#xff0c;隨身…

AI網絡搜索

作為AI應用程序開發人員在了解函數調用&#xff08;Function Calling&#xff09;特性調用本地函數時可能注意到列表型參數tools中每一個元素都攜帶有一個type值。而在大多數函數調用示例程序中&#xff0c;這個type值一直被設定為“function”&#xff0c;這意味著它還可能存在…

39.Sentinel微服務流量控制組件

雪崩問題 微服務調用鏈路中某個服務故障,引起整個鏈路中的所有微服務都不可用。 解決方案 1.超時處理:設置一個超時時間,請求超過一定時間沒有響應就返回錯誤信息,不會無休止的等待。(只能起到緩解作用,并不能從根本上解決問題) 2.艙壁模式:限定每個業務能使用的線程…

基于hadoop的競賽網站日志數據分析與可視化(下)

【基于hadoop的競賽網站日志數據分析與可視化&#xff08;上&#xff09;】講解了如何用hadoop對數據進行初步處理&#xff0c;本篇主要講解用python對結果數據進行可視化分析。 ------------------------------------------------------------------------------------------…

Python爬蟲打怪升級:數據獲取疑難全解析

一、引言 **??? 在大數據時代,數據就是價值的源泉。而 Python 爬蟲,作為數據獲取的得力助手,憑借 Python 簡潔的語法和豐富強大的庫,在眾多領域發揮著重要作用。無論是電商領域的價格監測、市場調研中的數據收集,還是學術研究里的文獻獲取,Python 爬蟲都能大顯身手。…

基于R語言的極值統計學及其在相關領域中的實踐技術應用

極值統計學就是專門研究自然界和人類社會中很少發生&#xff0c;然而發生之后有著巨大影響的極端現象的統計建模及分析方法&#xff1b;在水文、氣象、環境、生態、保險和金融等領域都有著廣泛的應用。一&#xff1a;獨立假設下的極值統計建模 1.廣義極值模型. 2.極小值的處理.…

前端面試十一之TS

TS 是 TypeScript 的縮寫&#xff0c;是一種由微軟開發的開源編程語言&#xff0c;它是 JavaScript 的一個超集&#xff0c;為 JavaScript 添加了類型系統和對 ES6 的支持。以下是關于 TypeScript 的詳細介紹&#xff1a;一、特點類型系統&#xff1a;TypeScript 引入了類型注解…

Excel快捷鍵

Excel快捷鍵可以快速提高使用Excel的效率&#xff0c;下面將Excel快捷鍵進行整理匯總以備不時之需 標注顏色的為需要經常使用并可以顯著提高效率的快捷鍵 Ctrl相關快捷鍵【Ctrl】【1】 顯示【單元格格式】設置窗口,可以設置選中的格式【Ctrl】【2】 應用或取消加粗…