Web调用海康威视摄像头

Bertha 。 2022-10-14 12:53 525阅读 0赞

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXFpYW5nOTE1_size_16_color_FFFFFF_t_70][]

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

![20210521160352290.png][]开启如下界面：![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXFpYW5nOTE1_size_16_color_FFFFFF_t_70 1][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXFpYW5nOTE1_size_16_color_FFFFFF_t_70 2][]

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>
    
    
    
    <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>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXFpYW5nOTE1_size_16_color_FFFFFF_t_70 3][]

注意：

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

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

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXFpYW5nOTE1_size_16_color_FFFFFF_t_70]: /images/20221014/9d8b0dcf853d4fdeb78123c86be75c97.png
[20210521160352290.png]: https://img-blog.csdnimg.cn/20210521160352290.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXFpYW5nOTE1_size_16_color_FFFFFF_t_70 1]: /images/20221014/36fe9bb269a44db0b376730c06cee183.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXFpYW5nOTE1_size_16_color_FFFFFF_t_70 2]: /images/20221014/bb238a65674d4cd2b6d369a04cd45cf2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXFpYW5nOTE1_size_16_color_FFFFFF_t_70 3]: /images/20221014/17bedcceb5ca4b54b119e1a64affff6c.png