H5無插件實現實時海康、大華攝像頭網頁預覽

前景概述

　　最近項目中需要用到“網頁實時預覽網絡攝像頭”功能，通過查閱海康大華等廠家的API文檔，發現這些廠家的demo均不滿足需求；要么僅支持低版本瀏覽器、要么就是需要支持websocket的攝像頭。

功能特點

• 跨平台支持（windows、linux、Unix）
• 網頁后台管理（內置管理平台）
• 無延遲
• 支持新版瀏覽器
• 開銷低
• 支持HTTP接口管理

效果

話不多說，直接上圖！！！

 

 

 

 

http接口管理

流列表接口

/api/stream/list

{
    "code": 0,
    "data": {
        "Total": 2,
        "Data": [
            {
                "ID": "1A97516B-48A8-1D69-CAE9-7BEF4E93E036",
                "Name": "抓拍機",
                "DevType": "0",
                "RTSP": "rtsp://10.202.2.60:8556/h264",
                "PlayType": "1",
                "UpdateTime": "2021-10-25T13:53:47.6553697+08:00"
            },
            {
                "ID": "92A74D53-FD12-FA1D-9D99-597681B9CBEC",
                "Name": "海康攝像頭",
                "DevType": "1",
                "RTSP": "rtsp://admin:123456@10.202.2.170/Streaming/Channels/202",
                "PlayType": "1",
                "UpdateTime": "2021-10-25T13:54:04.8912719+08:00"
            }
        ]
    },
    "msg": "獲取成功"
}

 

實現過程

• 在這套視頻插件的過程中，踩了很多坑，也浪費了不少時間。
• 想必在你看到我這篇文章的時候，自己也嘗試過使用ffmpeg、obs、nms、websocket了，結果不是很理想，要么開銷大、要么延遲高。
• 我嘗試過使用nms服務器用ffmpeg推流，最完美可以達到1秒的延遲。但是這相對於實時監控來講，延遲太高了。
• 文中這套方案采用的是webrtc方式，使用rtsp插件直接拉流，將視頻流通過webrtc發到前端。
• 如果您有這類的需求，可通過本站發送私信與我進行聯系交流