EasyNVR攝像機網頁無插件直播方案H5前端構建之：bootstrap彈窗功能的實現方案與代碼

前言介紹

在web前端的網頁設計中，爲了展現出簡潔的網頁風格和美觀的效果，每每會使用彈窗效果在EasyNVR前端頁面錄像檢索功能時，必然會播放錄像，若是單獨爲播放錄像文件排一個界面，用戶在使用上會更加繁瑣，在外觀上也不是很美觀。

真的彈了個窗戶出來了！

基於bootstrap能夠來開發出彈窗效果圖

• Bootstrap 模態框（Modal）插件
  模態框（Modal）是覆蓋在父窗體上的子窗體。一般，目的是顯示來自一個單獨的源的內容，能夠在不離開父窗體的狀況下有一些互動。子窗體可提供信息、交互等。

彈出框的內容：

<div class="modal fade" id="videojs-dlg" data-keyboard="false">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                    <h4 class="modal-title text-success text-center"></h4>
                </div>
                <div class="modal-body">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
                </div>
            </div>
        </div>
    </div>

可使用js來觸發$("#videojs-dlg").modal(‘show’)以此來實現以彈框的形式來展現出該div裏面的內容；

<div class="modal fade" id="videojs-dlg" data-keyboard="false">

注意：

• 使用模態窗口，您須要有某種觸發器。您可使用按鈕或連接。這裏咱們使用的是按鈕。

• id=「videojs-dlg」 是想要在頁面上加載的模態框的目標。能夠在頁面上建立多個模態框，而後爲每一個模態框建立不一樣的觸發器。可是不能在同一時間加載多個模塊，但您能夠在頁面上建立多個在不一樣時間進行加載。

• modal，用來把 「< div > 」的內容識別爲模態框。

• 彈出框裏面的具體內容能夠經過動態的加載方法給他賦值或是在彈出時特定的改變他的樣式。

模態框中要用到事件

• show.bs.modal 在調用 show 方法後觸發。

  $('#videojs-dlg').on('show.bs.modal', function () {
      // 執行一些動做...
    })

• shown.bs.modal 當模態框對用戶可見時觸發（將等待 CSS 過渡效果完成）。

  $('#videojs-dlg').on('shown.bs.modal', function () {
      // 執行一些動做...
    })

• hide.bs.modal 當調用 hide 實例方法時觸發。

  $('#videojs-dlg').on('hide.bs.modal', function () {
      // 執行一些動做...
    })

• hidden.bs.modal 當模態框徹底對用戶隱藏時觸發。

  $('#videojs-dlg').on('hidden.bs.modal', function () {
      // 執行一些動做...
    })

EasyNVR常見問題

常見應用： 安防監控系統 / 小區監控 / 幼兒園監控 / 交通監控 / 廠區監控 / 景點景區監控 / 店面監控

特點特色： 基於純web頁面觀看監控 / 無須安裝插件 / 跨平臺支持PC端、安卓端、iOS蘋果端 /支持微信掃二維碼觀看

WEB端跨平臺監控的目標是什麼？

本站作的是取監控攝像頭視頻流，進行服務器端分發，實現無插件跨平臺的web監控（注意，不是基於APP / APK，而是基於純web頁面），PC端/安卓/IOS蘋果等主流終端，打開同一個網頁地址均可以觀看，同時也支持手機微信掃二維碼觀看。

海康/大華自身就有官方的自帶的web端，EasyNVR產品有什麼意義？

第一，本站作的是無插件跨平臺的web觀看形式，PC/安卓/IOS蘋果都開打開同一個頁面，直接能夠觀看（web端是不要裝插件的）；而海康/大華的web端觀看是必須裝他們本身的插件的，這是最主要的區別；

第二，本站方案實現的是用戶本身的流媒體服務器平臺，無在線觀看人數限制的問題；而海康雲平臺（螢石雲）是海康的私有云，基於螢石雲觀看，也是必須裝海康本身的APP或APK，而且對在線人數有嚴格限定的。

EasyNVR用戶須要準備什麼？

1. 服務器方面：Windows2008/Windows2012/CentOS 64位操做系統 、4G內存、2核CPU及以上；
2. 服務器帶寬：根據自身狀況而定 : 5M-100M不等（與用戶要求的在線人數有關係）；
3. 一個或多個監控攝像頭（支持RTSP或Onvif）

咱們提供什麼樣的服務？

1. 爲用戶搭建服務器端環境；
2. 爲用戶實現海康/大華監控攝像頭實現基於web端無插件跨平臺直播；
3. 實現PC、安卓、IOS蘋果三種主流終端均可以觀看監控畫面；
4. 提供完整實例給用戶，提供完整技術教程，提供技術售後。

爲何選擇咱們？

1. 經驗：咱們擁有數年流媒體技術服務的實際應用經驗，也擁有web流媒體播放器操做經驗，熟悉多終端跨平臺技術；
2. 實測：咱們親自購買海康/大華/雄邁/天地偉業網絡攝像頭IPC，進行實測驗證；龐大的開源社區用戶羣體；
3. 多種方案：咱們目前能提供1x / 2x / 3x 三種方案，這三種方案基本包含了IPC所處的各類網絡環境；
4. 穩定：咱們作出的直播效果，不管是PC端直播畫面，仍是移動端直播畫面，都比較穩定；
5. 操做方便：咱們給用戶提供完整的範例及教程，普通人員都可按範例添加或刪減攝像頭；
6. 省心省力：一個頁面適配PC、安卓、IOS蘋果、微信，簡化繁雜的主流終端的適配，省心省力。

關於EasyNVR

隨着互聯網基礎設施建設的不斷完善和發展，帶寬的不斷提速，尤爲是光纖入戶，4G/5G/NB-IoT各類網絡技術的大規模商用，視頻隨時隨地可看、可控的訴求愈來愈多，尤爲是移動應用技術和前端技術的普及和發展，PC、手機、微信各類終端的支持需求在各行各業愈來愈受到青睞和重視，強制性地要求用戶只能使用IE系列瀏覽器、強制用戶只能到設備內網才能看到監控的限制，已經愈來愈不符合商業規律，而在傳統監控行業裏面，互聯網思惟、架構和技術徹底能夠成功引入，尤爲是在移動互聯網、物聯網方面的技術，徹底可以知足新形勢下的各類行業的全終端監控的須要。

EasyNVR是一款擁有完整、自主、可控知識產權，同時又可以具有軟硬一體功能的安防互聯網化流媒體服務器，可以經過簡單的網絡攝像機通道配置，將傳統監控行業裏面的高清網絡攝像機IP Camera、NVR等具備RTSP、Onvif協議輸出的設備接入到EasyNVR，EasyNVR可以將這些視頻源的音視頻數據進行拉取，轉換爲RTMP/HLS，進行全平臺終端H5直播（Web、Android、iOS），而且EasyNVR可以將視頻源的直播數據對接到第三方CDN網絡，實現互聯網級別的直播分發。詳情可訪問EasyNVR官網：http://www.easynvr.com