百度360必应搜狗淘宝本站头条
HTML APICSS 语法HTML 游戏HTML5 支持CSS 谷歌字体
当前位置：网站首页 > 技术文章 > 正文

网页WEB集成IP视频监控不是梦，0基础不懂编程?你也可以做到

myzbx 2024-12-01 18:25 27 浏览

平时的工作中常会遇到一些系统集成的需求，需要在软件平台集成视频监控系统。而软件开发者往往不懂安防弱电系统，不知道如何在自己的软件界面中集成一些监控的实时画面。而监控厂家提供的SDK比较复杂，很难在短时间完成集成的任务。最终导致软件平台的一些功能无法实现，影响项目的质量。

本文提供的方法主要基于VLC播放器的ActiveX插件，通过这个插件，在网页中调用摄像机的RTSP流，实现图像的实时预览，音频的监听等等功能。文章以海康的IP网络摄像机为例给出具体的调用方法，供大家学习参照。

VLC软件下载

登录VLC官网 https://www.videolan.org/，选择windows（32位）版本下载。

VLC软件安装（务必勾选插件）

网页编辑

可选用记事本（notepad）或专业的编辑器，输入如下代码，保存为html网页文件。

Bash
<html>
<body>

<title>TESTVDEIO-1-TEST</title>
<head>
<table>
            <tbody>
            <caption>视频监控演示</caption>
        <tr>
            <td>
            <object type='application/x-vlc-plugin' pluginspage="http://www.videolan.org/" id='vlc' events='false' width="720" height="410">
    <param name='mrl' value='rtsp://admin:q66668888@172.16.200.88:554/h264/ch1/main/av_stream' />
    <param name='volume' value='50' />
    <param name='autoplay' value='true' />
    <param name='loop' value='false' />
    <param name='fullscreen' value='false' />
    <param name='controls' value='false' />
            </td>
            <td>
            <object type='application/x-vlc-plugin' pluginspage="http://www.videolan.org/" id='vlc' events='false' width="720" height="410">
    <param name='mrl' value='rtsp://admin:q66668888@172.16.200.89:554/h264/ch1/main/av_stream' />
    <param name='volume' value='50' />
    <param name='autoplay' value='true' />
    <param name='loop' value='false' />
    <param name='fullscreen' value='false' />
    <param name='controls' value='false' />
            </td>
        </tr>
         <tr>
            <td>
            <object type='application/x-vlc-plugin' pluginspage="http://www.videolan.org/" id='vlc' events='false' width="720" height="410">
    <param name='mrl' value='rtsp://admin:q66668888@172.16.200.89:554/h264/ch1/main/av_stream' />
    <param name='volume' value='50' />
    <param name='autoplay' value='true' />
    <param name='loop' value='false' />
    <param name='fullscreen' value='false' />
    <param name='controls' value='false' />
            </td>
            <td>
            <object type='application/x-vlc-plugin' pluginspage="http://www.videolan.org/" id='vlc' events='false' width="720" height="410">
    <param name='mrl' value='rtsp://admin:q66668888@172.16.200.88:554/h264/ch1/main/av_stream' />
    <param name='volume' value='50' />
    <param name='autoplay' value='true' />
    <param name='loop' value='false' />
    <param name='fullscreen' value='false' />
    <param name='controls' value='false' />
            </td>
        </tr>
    </tbody>
</table>
            </object>
</body>
</html>

海康威视RTSP调用格式


浏览器测试

先用Google Chrome浏览器测试，提示插件不支持。

用微软IE测试，需要安装插件。

浏览器只显示了第一个画面。

用编辑器测试，2种内核都能正常显示。

改用360浏览器，呈现2X2的画面，实现最终的显示效果。

结语

本文参考了一些专业文章，就不一 一列出了，在这一并谢过！

由于本人水平有限，有不对的地方敬请指正。文章旨在抛砖引玉，通过讨论，相互学习，共同进步。

我是WoNew弱电蜗牛，一名从业多年的弱电工程师，在头条传播弱电专业知识和行业信息，分享工作中的经验和心得。
喜欢我的文章或视频，欢迎点赞和转发。有疑问或建议，也欢迎留言，我会尽力解答。

相关推荐

陈冠希飞机争执事件:维权还是失态?

陈冠希最近又上热搜了！这次不是因为潮牌，而是在飞机上和机组人员“杠”上了。事情是这样的：他在东京飞纽约的航班上，发现机组人员让一名日籍VIP乘客优先下机，当场就炸了，直接质问：“我跟他哪里不一样？钻石...

风向变了，小S被吴宗宪猛爆黑料，至亲好友背刺，s家乱成一锅粥

前言当吴宗宪5月26日直播中甩出"黄子佼犯罪小S知情"的录音时，谁还记得这对师徒曾在《我猜》里默契十足的黄金年代？昔日提携晚辈的综艺天王，如今用三小时连爆12条黑料，把综艺女王钉在道德...

吴宗宪开撕小S，离婚内幕疑曝光，S家起内讧，汪小菲果然没说错

文|东方不败难怪葛思琪说小S大概率是不能复出了。原来一切都是有迹可循的！被吴宗宪猛曝黑料、被至亲好友背刺。失去大S的s家彻底乱成一锅粥。小S还能如以往那般幸运地“化险为夷”吗？01不得不说，作为台湾主...

美国俄亥俄大学性侵案细节曝光，新纪录片揭开体育界被忽视的丑闻

美国俄亥俄州立大学一直是美国校际体育运动的标杆，以至于很少有人将该大学与美国历史上最令人震惊的性虐待丑闻联系起来。近日，由澳大利亚纪录片导演伊娃·奥纳（EvaOrner）执导的《俄亥俄州立大学的幸存...

陈冠希飞机上怒怼空姐，称要让其丢掉工作?原因曝光后大家纷纷支持

【点新闻报道】44岁的陈冠希（Edison）被爆料在一架由东京羽田飞往纽约的航班上，疑不满头等舱的下机安排，与空姐发生口角，甚至放话：“把客诉信拿来，我会让你丢工作！”，引发网上热议。有内地网民在小红...

陈冠希机上风波再起!一场由“优先权”引发的对峙

一句“我会让你丢工作”的激烈争执录音，将陈冠希再次推向风口浪尖。飞机引擎的轰鸣尚未完全停歇，纽约机场的廊桥尚未对接，头等舱内的空气却已骤然凝固。44岁的陈冠希，这位早已褪去偶像光环却始终身处舆论漩涡...

传祺M8 vs 别克GL8，谁才是MPV终极选择?

广汽传祺M8与别克GL8一直都是很多人在选择MPV时纠结的对象，尤其是对于选择“困难症”的朋友来说，更是如此。今天我们将广汽传祺M8大师超混版和别克GL8ES陆尊进行对比，看看究竟怎么选！不是合资买...

开源鸿蒙OpenHarmony 6.0 Beta1发布

IT之家6月19日消息，开源鸿蒙OpenHarmony6.0Beta1（APILevel20）现已发布并上线Gitee。据介绍，OpenHarmony6.0Beta1版本进一...

巴雷特(Barrett)食管（巴雷特食管?）

近年来随着HP根除的增加等因素存在，食管胃结合部腺癌发病率逐年增加，食管胃结合部腺癌主要包括Barrett腺癌、胃贲门腺癌，而Barrett食管（Barrett’sesophagus，BE）为Bar...

儿子对象三天不出门 吵架动手后关系僵持

这几天家里事儿多。儿子交的女朋友搬来同住三天，人跟消失似的。每天中午才起床吃我家做的饭，吃完就喊着出去，问晚上回不回来，答不回来。昨天中午我找她谈儿子动手的事，她也不说话，现在微信电话全拉黑，连饭都不...

偷鸡不成蚀把米!命理师称小S将有大劫，老公许雅钧被爆换继承人

近期有命理师称小S将有大劫，其老公许雅钧也被爆换继承人，具体情况如下：命理师称小S有大劫有台湾省命理师称小S面相不好，将会有一场“大劫”，会影响到她生活的重大事件。还有细心网友翻出2022年某命理师在...

如何设计Agent的记忆系统（agent记忆方法）

最近看了一张画Agent记忆分类的图我觉得分类分的还可以，但是太浅了，于是就着它的逻辑，仔细得写了一下在不同的记忆层，该如何设计和选型先从流程，作用，实力和持续时间的这4个维度来解释一下这几种记忆：1...

深入理解跨域及常见误区揭秘（深入理解跨域及常见误区揭秘论文）

跨域问题是前端与后端协作中不可避免的话题，处理不当将直接影响系统可用性与安全性。本文将系统梳理跨域的概念、原理、常见解决方案，并结合实际开发中易错点进行总结，帮助你全面掌握跨域知识。一、什么是跨域？*...

aardio + Java + JavaScript 混合开发快速入门

aardio最近在AI功能上做了很多细节的改进，建议大家更新。aardio的AI接口里的Gemini2.5pro更新到了刚发布的最新版本（Gemini2.5pro0605），...

一种改进的锂离子电池剩余寿命预测算法

摘要：锂离子电池故障往往会使系统性能下降甚至瘫痪，故障部件剩余寿命的精确估计对整个系统的寿命预测和健康管理至关重要。粒子滤波是一种有效的序列信号处理方法，然而应用于锂离子电池剩余寿命预测准确性并不高...

一周热门
最近发表
标签列表