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需要改成其他端口。

Web调用海康威视摄像头相关推荐

WIN10下OpenCV3.4.10安装+opencv-python调用海康威视摄像头
1.WIN10下OpenCV3.4.10安装: 参考(直接看参考的这两篇博客就好): https://blog.csdn.net/flushest/article/details/89746971(参 ...
java开发调用海康威视摄像头的web端页面开发心得
最近在开发过程中需要用到海康威视的摄像头在web端展示在各种百度之后发现网上很难找到一个简便,可靠的教程在摸索着完成项目之后 ,决定写一篇攻略造福有需求的小伙伴言归正传首先需 ...
matlab调用海康威视摄像头_招聘|海康威视招聘一批算法、图像等AI工程师
原标题:招聘|海康威视招聘一批算法.图像等AI工程师全球人工智能文章参考:海康威视算法工程师工作地点:杭州薪资:18-35k 经验:不限学历:硕士及以上职位描述: 1. 负责公司视觉最新视 ...
Web调用浏览器摄像头
var canvas = document.getElementById('canvas');var context = canvas.getContext('2d'); //getContext唯一 ...
python利用OpenCV调用海康威视摄像头--利用wifi路由器提供网
部署环境由于实验室只有无线网没有有线网,在这里依靠wifi路由器做出一个有线网. wifi路由器根据wifi配置有线网 ip 192.168.113.17 掩码 255.255.255.0 网关19 ...
通过python调用海康威视工业摄像头并进行图像存储，同时使用opencv实时图像显示（数据流问题已解决）
通过python调用海康威视工业摄像头并进行图像存储,同时使用opencv实时图像显示. 1:图像存储方式先说情况,本人是做视觉检测的需要高倍率摄像头进行实时检测,也就是需要深度学习进行图片数据处理 ...
yolo调用海康威视网络摄像头踩坑记
用yolo调用海康威视摄像头首先第一点:关注海康威视客户服务这个公众号,然后让里面的人工查询下你这个摄像头能不能登网页,非常重要.我开始用的一个就不行,坑了一两天时间. 然后说下调用方式 1.直 ...
关于海康威视摄像头的整理
关于海康威视摄像头的整理声明:本系列文章只提供交流与学习使用.文章中所有涉及到海康威视设备的SDK均可在海康威视官方网站下载得到.文章中所有除官方SDK以为的代码均可随意使用,任何涉及到海康威视 ...
Java调用海康威视接口并抓取Jpeg图片到内存
因为工作需要,需要调用海康威视摄像头接口抓取Jpeg图片并保存到内存中,查找相关资料并整合,加上自己对官方提供的SDK文档,相关调用代码如下: public class TestHikvision { ...
五、JAVA调用海康威视SDK实现摄像头内网转外网并前端展示
接上一章:四.JAVA调用海康威视SDK实现摄像头内网推流到阿里云本章实现摄像头内网推流到阿里云服务器并再浏览器WEB前端展示. 环境准备开发工具:eclipse Jdk版本:jdk1.8 开发语 ...

Web调用海康威视摄像头

Web调用海康威视摄像头相关推荐

最新文章

热门文章