網頁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

功能

總結

您的項目需求