Web调用海康威视摄像头_海康威视摄像头web访问

作者：从前慢现在也慢 | 2024-03-29 19:04:42

踩

海康威视摄像头web访问

1.第三方插件下载：https://streamedian.com/#downloads

需要下载客户端源码及服务器端exe文件。（客户端源码用于二次开发，服务器端exe文件需要安装在服务器上供客户端调用）

2.exe文件安装后双击运行

开启如下界面：

在上方输入框输入海康威视的rtsp地址点击 set 按钮，即可看到摄像头的视频。

3.源码界面提供的界面比较复杂，业务中只要使用到视频即可，所以最大程度使源码简洁：

项目中引入streamedian.min.js文件（下载的源码中有）


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Streamedian RTSP player example</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
 
    <style>
        body {
            max-width: 720px;
            margin: 50px auto;
        }
 
        #test_video {
            width: 720px;
        }
 
        #test_video2 {
            width: 720px;
        }
 
        .controls {
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
 
        input.input, .form-inline .input-group > .form-control {
            width: 300px;
        }
 
        .logs {
            overflow: auto;
            width: 720px;
            height: 150px;
            padding: 5px;
            border-top: solid 1px gray;
            border-bottom: solid 1px gray;
        }
 
        button {
            margin: 5px
        }
    </style>
</head>
<body>
<div id="sourcesNode"></div>
 
<video id="test_video" controls autoplay></video>
 
<video id="test_video2" controls autoplay></video>
 
<!--<div id="pllogs" class="logs" hidden></div>-->
 
<script src="static/streamedian.min.js"></script>
<script>
    if (window.Streamedian) {
        let errHandler = function (err) {
            alert(err.message);
        };
 
        var playerOptions = {
            socket: "ws://localhost:8088/ws/",
            redirectNativeMediaErrors: true,
            bufferDuration: 30,
            errorHandler: errHandler
            // infoHandler: infHandler
        };
 
        var html5Player = document.getElementById("test_video");
        var html5Player2 = document.getElementById("test_video2");
 
        var newSource = 'rtsp://admin:123456789a@192.168.3.124:554/h264/ch1/main/av_stream'
 
        setPlayerSource('test_video', newSource, html5Player);
        setPlayerSource('test_video2', newSource, html5Player2);
 
        function setPlayerSource(element, newSource, html5Player) {
            html5Player.playbackRate = 1.0;
            html5Player.src = newSource;
            Streamedian.player(element, playerOptions);
        }
 
    }
</script>
</body>
</html>

注意：

1.此插件的windows版本不稳定。

2.最多只能维持三个摄像头的连接。

3.会占用8080端口。所以自己的tomcat需要改成其他端口。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/336927