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前端可直接加載