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

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

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

VLC软件下载

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

下载VLC软件

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

运行安装文件

选择软件安装位置

一定记得要勾选网页浏览器插件

完成安装

网页编辑

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

<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浏览器测试，提示插件不支持。

Chrome浏览器提示插件不受支持

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

IE浏览器提示要安装ActiveX插件

确认安装插件

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

IE浏览器显示不完整

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

编辑器里测试效果

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

360浏览器显示的最终效果图

结语

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

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

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

绍

PNotify是一个原生JavaScript通知和确认/提示库。PNotify可以根据Web Notifications规范提供桌面通知，并返回浏览器内通知。PNotify是目前笔者正在项目中使用的一个通知提示组件，功能非常丰富，可以让你的Web项目通知和提示更加的优雅！

Github

https://github.com/sciactive/pnotify

快速开始

npm install --save pnotify
# Material style:
npm install --save material-design-icons
# Animate module:
npm install --save animate.css
# NonBlock module:
npm install --save nonblockjs

PNotify模块目录如下：

src Svelte组件和未压缩的Bright Theme CSS；
lib/es 未压缩的ECMAScript模块；
lib/umd 未压缩的UMD模块；
lib/iife 未压缩的 IIFE scripts；
dist 压缩过的 Bright Theme CSS；
dist/es 压缩过的ECMAScript 模块；
dist/umd 压缩过的 UMD 模块；
dist/iife 压缩过的 IIFE scripts；

丰富的特性

丰富的UI和效果：
Material，Bootstrap 3/4，Font Awesome 4/5，或stand-alone theme, Bright Theme
移动样式和滑动支持。
定时隐藏。
使用Animate.css进行光滑的动画。
注意使用Animate.css的getter。
高度可定制的UI。
粘滞的通知。
可选的关闭和按钮。
非阻塞性通知，以减少侵入性使用。
通知类型：通知，信息，成功和错误。
堆栈允许通知一起或独立定位。
控制堆栈方向并推到顶部或底部。
模态通知。
确认对话框，警报按钮和提示。
RTL语言支持。
功能丰富的API。
基于Web Notifications标准的桌面通知。
动态更新现有通知。
将表单和其他HTML放在通知中。
默认情况下，转义文本以防止XSS攻击。
生命周期事件的回调。
请注意重新显示旧通知的历史记录。
普遍兼容。
适用于任何前端库（React，Angular，Svelte，Vue，Ember等）。
适用于打包工具（Webpack，Rollup等）。
大多数功能都没有依赖关系。

效果预览

要想看真实效果的朋友可以直接看官方提供的demo，非常的丰富示例，绝对让你有使用它的冲动，咱们通过截图来看一下：

具体的效果只有使用了之后才会体会到，绝对值得使用！

如何使用?

在React中使用

import PNotify from 'pnotify/dist/es/PNotify';
import PNotifyButtons from 'pnotify/dist/es/PNotifyButtons';
PNotify.alert('Notice me, senpai!');

Angular

import PNotify from 'pnotify/dist/es/PNotify';
import PNotifyButtons from 'pnotify/dist/es/PNotifyButtons';
//...
export class WhateverComponent {
 constructor() {
 PNotifyButtons; // Initiate the module. Important!
 PNotify.alert('Notice me, senpai!');
 }
}

原生ES5

<script type="text/javascript" src="node_modules/pnotify/dist/iife/PNotify.js"></script>
<script type="text/javascript" src="node_modules/pnotify/dist/iife/PNotifyButtons.js"></script>
<script type="text/javascript">
 PNotify.alert('Notice me, senpai!');
</script>

原生ES6

import PNotify from 'node_modules/pnotify/dist/es/PNotify.js';
import PNotifyButtons from 'node_modules/pnotify/dist/es/PNotifyButtons.js';
PNotify.alert('Notice me, senpai!');

默认主题

<link href="node_modules/pnotify/dist/PNotifyBrightTheme.css" rel="stylesheet" type="text/css" />

Material

Material 样式模块：

import PNotifyStyleMaterial from 'pnotify/dist/es/PNotifyStyleMaterial.js';
// or
var PNotifyStyleMaterial = require('pnotify/dist/umd/PNotifyStyleMaterial.js');
// Set default styling.
PNotify.defaults.styling = 'material';
// This icon setting requires the Material Icons font. (See below.)
PNotify.defaults.icons = 'material';

Material Icons

# The official Google package:
npm install --save material-design-icons
# OR, An unofficial package that only includes the font:
npm install --save material-design-icon-fonts

Bootstrap作为默认样式

要将Bootstrap设置为默认样式，请在导入PNotify后从下面包含相应的设置：

PNotify.defaults.styling = 'bootstrap3'; // Bootstrap version 3
PNotify.defaults.icons = 'bootstrap3'; // glyphicons
// or
PNotify.defaults.styling = 'bootstrap4'; // Bootstrap version 4

Font Awesome

要将Font Awesome设置为默认图标，请在导入PNotify后从下面包含相应的设置：

PNotify.defaults.icons = 'fontawesome4'; // Font Awesome 4
// or
PNotify.defaults.icons = 'fontawesome5'; // Font Awesome 5

创建通知提示

// 手动设置类型
PNotify.alert({
 text: "I'm an alert.",
 type: 'notice'
});
// 自动设置类型。
PNotify.notice({
 text: "I'm a notice."
});
PNotify.info({
 text: "I'm an info message."
});
PNotify.success({
 text: "I'm a success message."
});
PNotify.error({
 text: "I'm an error message."
});

总结

以上只是简单的介绍，如果你想让你的浏览器推送通知不是很简陋，笔者认为是时候使用这样一个插件来助你解决这个问题了：

PNotify是笔者用过的最优雅的提示通知组件，推荐给需要的人！

绍

Pxmu.js是一个专门为移动设备Web打造的消息提示框插件，无需任何依赖额外依赖,即可运行。由于全局使用flex布局，因此具备良好的兼容性，PC端也可以无缝运行。专注于打造提示组件，所以其能力要相对于其它的框架内组件稍强一些，具备精美的样式以及可以自定义动画、字体、颜色等！

Github

https://github.com/shiyueGG/pxmu

功能

Pxmu有常用的 toast、diaglog、success 、loading、copy 等。下面就简单说明下使用方式

引入相关js

<script type="text/javascript" src="pxmu.min.js"></script>

Toast

使用方法：

pxmu.toast({})
pxmu.toast('内容')

参数可选：

{
    msg: '操作成功', //内容 不能为空
    time: 2500, //停留时间 默认2500毫秒
    bg: 'rgba(0, 0, 0, 0.86)', //背景颜色 默认黑色
    color: '#fff', //文字颜色 默认白色
    location: 'bottom',//居中center 顶部top 底部bottom默认
}

Diaglog

使用方法：

pxmu.diaglog({})//结果返回promise
pxmu.diaglog('内容')

由于参数过多这里不便于展示，如图片不清晰可以查看官方文档：

使用方法：

pxmu.loading({})
pxmu.loading('正在加载。。。')

参数可选：

{
    msg: '正在加载', //loading信息 为空时不显示文本
    time: 2500, //停留时间 
    bg: 'rgba(0, 0, 0, 0.65)', //背景色
    color: '#fff', //文字颜色
    animation: 'fade', //动画名 详见动画文档
    close: true, // 自动关闭 为false时可在业务完成后调用 pxmu.closeload();手动关闭
    inscroll: false, //模态 不可点击和滚动
    inscrollbg : 'rgba(0, 0, 0, 0.45)',//自定义遮罩层颜色 为空不显示遮罩层
}

可手动关闭：

pxmu.closeload(100);//延时100毫秒关闭 默认0

Success

使用方法：

pxmu.success({})
pxmu.success('加载完成')

参数可选：

{
    msg: '加载完成', //loading信息 为空时不显示文本
    time: 2500, //停留时间 
    bg: 'rgba(0, 0, 0, 0.65)', //背景色
    color: '#fff', //文字颜色
    animation: 'fade', //动画名 详见动画文档
    close: true, // 自动关闭 为false时可在业务完成后调用 pxmu.closeload();手动关闭
    inscroll: false, //模态 不可点击和滚动
    inscrollbg : 'rgba(0, 0, 0, 0.45)',//自定义遮罩层颜色 为空不显示遮罩层
}

也可手动关闭：

pxmu.closeload(100);//延时100毫秒关闭 默认0

Fail

Fail对标Success

pxmu.fail({});
pxmu.fail('加载超时');

参数可选：

{
    msg: '加载超时', //loading信息 为空时不显示文本
    time: 2500, //停留时间 
    bg: 'rgba(0, 0, 0, 0.65)', //背景色
    color: '#fff', //文字颜色
    animation: 'fade', //动画名 详见动画文档
    close: true, // 自动关闭 为false时可在业务完成后调用 pxmu.closeload();手动关闭
    inscroll: false, //模态 不可点击和滚动
    inscrollbg : 'rgba(0, 0, 0, 0.45)',//自定义遮罩层颜色 为空不显示遮罩层
}

手动关闭：

pxmu.closeload(100);//延时100毫秒关闭 默认0

Copy

快速复制一段文本，或复制指定dom下的文本内容

使用方法：

pxmu.copy({})

<div data-pxmu-copy-text="复制的内容">点我复制</div>

pxmu.copy({
    el: '#test' //复制id为test下的内容，
});

//或者

pxmu.copy({
    el: '.test' //复制class为test下的内容，
});

ToTop

快速回到页面顶部（带动画）

使用方法：

pxmu.totop()

全局配置

// 全局重叠设置
pxmu.overlap({
    loading : true,//是否不重叠弹出层 默认true不重叠。为false时会重叠消息层
    toast : true,//是否不重叠弹出层 默认true不重叠。为false时会重叠消息层
});

总结

pxmu是开发中常用的一个小插件，在某些项目中非常实用，特别是针对一些小页面小应用的场景，当然在大型应用中也可以使用。总体来说使用感受不错，样式也非常符合现代页面的审美，兼容性强，自定义能力强，同时还具备动画设计，是非常不错的一个小插件，推荐给部分需要的人！

在线咨询

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

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

VLC软件下载

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

网页编辑

海康威视RTSP调用格式

浏览器测试

结语

绍

Github

快速开始

丰富的特性

效果预览

如何使用?

创建通知提示

总结

绍

Github

功能

总结

您的项目需求