網(wǎng)頁WEB集成IP視頻監(jiān)控不是夢，0基礎(chǔ)不懂編程？你也可以做到

時(shí)的工作中常會遇到一些系統(tǒng)集成的需求，需要在軟件平臺集成視頻監(jiān)控系統(tǒng)。而軟件開發(fā)者往往不懂安防弱電系統(tǒng)，不知道如何在自己的軟件界面中集成一些監(jiān)控的實(shí)時(shí)畫面。而監(jiān)控廠家提供的SDK比較復(fù)雜，很難在短時(shí)間完成集成的任務(wù)。最終導(dǎo)致軟件平臺的一些功能無法實(shí)現(xiàn)，影響項(xiàng)目的質(zhì)量。

本文提供的方法主要基于VLC播放器的ActiveX插件，通過這個插件，在網(wǎng)頁中調(diào)用攝像機(jī)的RTSP流，實(shí)現(xiàn)圖像的實(shí)時(shí)預(yù)覽，音頻的監(jiān)聽等等功能。文章以海康的IP網(wǎng)絡(luò)攝像機(jī)為例給出具體的調(diào)用方法，供大家學(xué)習(xí)參照。

VLC軟件下載

登錄VLC官網(wǎng) https://www.videolan.org/，選擇windows（32位）版本下載。

下載VLC軟件

VLC軟件安裝（務(wù)必勾選插件）

運(yùn)行安裝文件

選擇軟件安裝位置

一定記得要勾選網(wǎng)頁瀏覽器插件

完成安裝

網(wǎng)頁編輯

可選用記事本（notepad）或?qū)I(yè)的編輯器，輸入如下代碼，保存為html網(wǎng)頁文件。

<html>
<body>

<title>TESTVDEIO-1-TEST</title>
<head>
<table>
            <tbody>
            <caption>視頻監(jiān)控演示</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調(diào)用格式

具體請參看海康專業(yè)文檔

瀏覽器測試

先用Google Chrome瀏覽器測試，提示插件不支持。

Chrome瀏覽器提示插件不受支持

用微軟IE測試，需要安裝插件。

IE瀏覽器提示要安裝ActiveX插件

確認(rèn)安裝插件

瀏覽器只顯示了第一個畫面。

IE瀏覽器顯示不完整

用編輯器測試，2種內(nèi)核都能正常顯示。

編輯器里測試效果

改用360瀏覽器，呈現(xiàn)2X2的畫面，實(shí)現(xiàn)最終的顯示效果。

360瀏覽器顯示的最終效果圖

結(jié)語

本文參考了一些專業(yè)文章，就不一一列出了，在這一并謝過！

由于本人水平有限，有不對的地方敬請指正。文章旨在拋磚引玉，通過討論，相互學(xué)習(xí)，共同進(jìn)步。

我是WoNew弱電蝸牛，一名從業(yè)多年的弱電工程師，在頭條傳播弱電專業(yè)知識和行業(yè)信息，分享工作中的經(jīng)驗(yàn)和心得。
喜歡我的文章或視頻，歡迎點(diǎn)贊和轉(zhuǎn)發(fā)。有疑問或建議，也歡迎留言，我會盡力解答。

紹

PNotify是一個原生JavaScript通知和確認(rèn)/提示庫。PNotify可以根據(jù)Web Notifications規(guī)范提供桌面通知，并返回瀏覽器內(nèi)通知。PNotify是目前筆者正在項(xiàng)目中使用的一個通知提示組件，功能非常豐富，可以讓你的Web項(xiàng)目通知和提示更加的優(yōu)雅！

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，F(xiàn)ont Awesome 4/5，或stand-alone theme, Bright Theme
移動樣式和滑動支持。
定時(shí)隱藏。
使用Animate.css進(jìn)行光滑的動畫。
注意使用Animate.css的getter。
高度可定制的UI。
粘滯的通知。
可選的關(guān)閉和按鈕。
非阻塞性通知，以減少侵入性使用。
通知類型：通知，信息，成功和錯誤。
堆棧允許通知一起或獨(dú)立定位。
控制堆棧方向并推到頂部或底部。
模態(tài)通知。
確認(rèn)對話框，警報(bào)按鈕和提示。
RTL語言支持。
功能豐富的API。
基于Web Notifications標(biāo)準(zhǔn)的桌面通知。
動態(tài)更新現(xiàn)有通知。
將表單和其他HTML放在通知中。
默認(rèn)情況下，轉(zhuǎn)義文本以防止XSS攻擊。
生命周期事件的回調(diào)。
請注意重新顯示舊通知的歷史記錄。
普遍兼容。
適用于任何前端庫（React，Angular，Svelte，Vue，Ember等）。
適用于打包工具（Webpack，Rollup等）。
大多數(shù)功能都沒有依賴關(guān)系。

效果預(yù)覽

要想看真實(shí)效果的朋友可以直接看官方提供的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!');

默認(rèn)主題

<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作為默認(rèn)樣式

要將Bootstrap設(shè)置為默認(rèn)樣式，請?jiān)趯?dǎo)入PNotify后從下面包含相應(yīng)的設(shè)置：

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

Font Awesome

要將Font Awesome設(shè)置為默認(rèn)圖標(biāo)，請?jiān)趯?dǎo)入PNotify后從下面包含相應(yīng)的設(shè)置：

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

創(chuàng)建通知提示

// 手動設(shè)置類型
PNotify.alert({
 text: "I'm an alert.",
 type: 'notice'
});
// 自動設(shè)置類型。
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."
});

總結(jié)

以上只是簡單的介紹，如果你想讓你的瀏覽器推送通知不是很簡陋，筆者認(rèn)為是時(shí)候使用這樣一個插件來助你解決這個問題了：

PNotify是筆者用過的最優(yōu)雅的提示通知組件，推薦給需要的人！

紹

Pxmu.js是一個專門為移動設(shè)備Web打造的消息提示框插件，無需任何依賴額外依賴,即可運(yùn)行。由于全局使用flex布局，因此具備良好的兼容性，PC端也可以無縫運(yùn)行。專注于打造提示組件，所以其能力要相對于其它的框架內(nèi)組件稍強(qiáng)一些，具備精美的樣式以及可以自定義動畫、字體、顏色等！

Github

https://github.com/shiyueGG/pxmu

功能

Pxmu有常用的 toast、diaglog、success 、loading、copy 等。下面就簡單說明下使用方式

引入相關(guān)js

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

Toast

使用方法：

pxmu.toast({})
pxmu.toast('內(nèi)容')

參數(shù)可選：

{
    msg: '操作成功', //內(nèi)容 不能為空
    time: 2500, //停留時(shí)間 默認(rèn)2500毫秒
    bg: 'rgba(0, 0, 0, 0.86)', //背景顏色 默認(rèn)黑色
    color: '#fff', //文字顏色 默認(rèn)白色
    location: 'bottom',//居中center 頂部top 底部bottom默認(rèn)
}

Diaglog

使用方法：

pxmu.diaglog({})//結(jié)果返回promise
pxmu.diaglog('內(nèi)容')

由于參數(shù)過多這里不便于展示，如圖片不清晰可以查看官方文檔：

使用方法：

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

參數(shù)可選：

{
    msg: '正在加載', //loading信息 為空時(shí)不顯示文本
    time: 2500, //停留時(shí)間 
    bg: 'rgba(0, 0, 0, 0.65)', //背景色
    color: '#fff', //文字顏色
    animation: 'fade', //動畫名 詳見動畫文檔
    close: true, // 自動關(guān)閉 為false時(shí)可在業(yè)務(wù)完成后調(diào)用 pxmu.closeload();手動關(guān)閉
    inscroll: false, //模態(tài) 不可點(diǎn)擊和滾動
    inscrollbg : 'rgba(0, 0, 0, 0.45)',//自定義遮罩層顏色 為空不顯示遮罩層
}

可手動關(guān)閉：

pxmu.closeload(100);//延時(shí)100毫秒關(guān)閉 默認(rèn)0

Success

使用方法：

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

參數(shù)可選：

{
    msg: '加載完成', //loading信息 為空時(shí)不顯示文本
    time: 2500, //停留時(shí)間 
    bg: 'rgba(0, 0, 0, 0.65)', //背景色
    color: '#fff', //文字顏色
    animation: 'fade', //動畫名 詳見動畫文檔
    close: true, // 自動關(guān)閉 為false時(shí)可在業(yè)務(wù)完成后調(diào)用 pxmu.closeload();手動關(guān)閉
    inscroll: false, //模態(tài) 不可點(diǎn)擊和滾動
    inscrollbg : 'rgba(0, 0, 0, 0.45)',//自定義遮罩層顏色 為空不顯示遮罩層
}

也可手動關(guān)閉：

pxmu.closeload(100);//延時(shí)100毫秒關(guān)閉 默認(rèn)0

Fail

Fail對標(biāo)Success

pxmu.fail({});
pxmu.fail('加載超時(shí)');

參數(shù)可選：

{
    msg: '加載超時(shí)', //loading信息 為空時(shí)不顯示文本
    time: 2500, //停留時(shí)間 
    bg: 'rgba(0, 0, 0, 0.65)', //背景色
    color: '#fff', //文字顏色
    animation: 'fade', //動畫名 詳見動畫文檔
    close: true, // 自動關(guān)閉 為false時(shí)可在業(yè)務(wù)完成后調(diào)用 pxmu.closeload();手動關(guān)閉
    inscroll: false, //模態(tài) 不可點(diǎn)擊和滾動
    inscrollbg : 'rgba(0, 0, 0, 0.45)',//自定義遮罩層顏色 為空不顯示遮罩層
}

手動關(guān)閉：

pxmu.closeload(100);//延時(shí)100毫秒關(guān)閉 默認(rèn)0

Copy

快速復(fù)制一段文本，或復(fù)制指定dom下的文本內(nèi)容

使用方法：

pxmu.copy({})

<div data-pxmu-copy-text="復(fù)制的內(nèi)容">點(diǎn)我復(fù)制</div>

pxmu.copy({
    el: '#test' //復(fù)制id為test下的內(nèi)容，
});

//或者

pxmu.copy({
    el: '.test' //復(fù)制class為test下的內(nèi)容，
});

ToTop

快速回到頁面頂部（帶動畫）

使用方法：

pxmu.totop()

全局配置

// 全局重疊設(shè)置
pxmu.overlap({
    loading : true,//是否不重疊彈出層 默認(rèn)true不重疊。為false時(shí)會重疊消息層
    toast : true,//是否不重疊彈出層 默認(rèn)true不重疊。為false時(shí)會重疊消息層
});

總結(jié)

pxmu是開發(fā)中常用的一個小插件，在某些項(xiàng)目中非常實(shí)用，特別是針對一些小頁面小應(yīng)用的場景，當(dāng)然在大型應(yīng)用中也可以使用。總體來說使用感受不錯，樣式也非常符合現(xiàn)代頁面的審美，兼容性強(qiáng)，自定義能力強(qiáng)，同時(shí)還具備動畫設(shè)計(jì)，是非常不錯的一個小插件，推薦給部分需要的人！

在線咨詢

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

網(wǎng)頁WEB集成IP視頻監(jiān)控不是夢，0基礎(chǔ)不懂編程？你也可以做到

VLC軟件下載

VLC軟件安裝（務(wù)必勾選插件）

網(wǎng)頁編輯

海康威視RTSP調(diào)用格式

瀏覽器測試

結(jié)語

紹

Github

快速開始

豐富的特性

效果預(yù)覽

如何使用?

創(chuàng)建通知提示

總結(jié)

紹

Github

功能

總結(jié)

您的項(xiàng)目需求