Web调用海康威视摄像头 Bertha 。 2022-10-14 12:53 514阅读 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> <!--<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> ![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
还没有评论,来说两句吧...