EasyNVR RTSP turn RTMP-HLS-FLV streaming server front end of the construct: pop implement bootstrap function

Disclaimer: This article is EasyNVR technical team of the original article, shall not be reproduced without the bloggers allowed. https://blog.csdn.net/EasyNVR/article/details/91820129

Preface Introduction

With the continuous improvement and development of infrastructure of the Internet, bandwidth constant speed, especially in fiber to the home, large-scale commercial 4G / 5G / NB-IoT variety of network technologies, video anytime, anywhere can see, the demands of the more controllable for more, especially in support of the demand and popularity of mobile application development technology and front-end technology, PC, mobile phones, a variety of micro-channel terminal and attention of more and more popular in all walks of life, mandatory requirements of the user can only use IE series browser, users can force the device into the net to see the limit monitoring has become increasingly inconsistent with commercial law, in which the traditional surveillance industry, the Internet thinking, architecture and technology can successfully introduced, especially in the mobile Internet , physical networking technology, fully able to meet the needs of the whole terminal monitor various sectors under the new situation.

In the web front-end web design in order to demonstrate the simplicity of style and aesthetic results pages, often using pop effect
when EasyNVR front page video search function, is bound to play video, play video files if the individual is a row of interface, users will be more cumbersome in use, it is not very beautiful in appearance.

FIG effect playback frame shells

May be developed based on the bootstrap effect pop FIG.

  • Bootstrap modal box (the Modal) widget
    mode frame (the Modal) is overlaid on the parent form subform. Typically, the purpose is to display content from a single source, there may be some interaction without departing parent form. Child form can provide information, interaction and so on.

Pop-up box contents:

<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 can be used to trigger $ ( "# videojs-dlg" ) modal ( 'show'). In order to achieve the form of a bomb box to show the contents of the div inside;

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

note:

  • Modal window, you need to have some kind of trigger. You can use the buttons or links. We use here is the button.

  • id = "videojs-dlg" is intended to block certain modal loaded on the page. You can create multiple modalities box on the page, and then create a different mode for each trigger block. But it can not load multiple modules at the same time, but you can create multiple loaded at different times on the page.

  • modal, used to "<div>" modal content identification frame.

  • The specific content of the pop-up box which can be assigned to him by the loading method of dynamic pop-up or when a particular change his style.

Modal box to use Event

  • show.bs.modal triggered after calling the show method.

      $('#videojs-dlg').on('show.bs.modal', function () {
        // 执行一些动作...
      })
    
  • When frame mode shown.bs.modal trigger visible to the user (waiting for the completion of the transition effect CSS).

      $('#videojs-dlg').on('shown.bs.modal', function () {
        // 执行一些动作...
      })
    
  • hide.bs.modal triggered when calling hide instance method.

      $('#videojs-dlg').on('hide.bs.modal', function () {
        // 执行一些动作...
      })
    
  • mode is triggered when hidden.bs.modal frame completely hidden from the user.

      $('#videojs-dlg').on('hidden.bs.modal', function () {
        // 执行一些动作...
      })
    

EasyNVR FAQ

Common applications: security monitoring system / community monitoring / nursery monitor / traffic control / factory monitoring / scenic attractions monitoring / surveillance storefront

Features Features: Watch based on pure web page monitoring / need to install plug-ins / cross-platform support for PC end, end Android, iOS Apple's end / support micro-channel two-dimensional code sweep watch

What is cross-platform monitoring WEB end goal is?

Site to do is take surveillance camera video streaming, server-side distribution, implementation of web monitoring free plug-in cross-platform (note, not based on APP / APK, but based on pure web page), PC end / Android / IOS Apple and other mainstream terminal, open the same web page addresses can watch, while also supporting cell phone micro-channel two-dimensional code scan view.

Kang / UOB itself, there comes the official web end, EasyNVR products have any significance?

First, the site is no plug-ins to do cross-platform web form watch, PC / Android / IOS Apple are open to open the same page, you can directly watch (web end is not installed plug-ins); and Kang / UOB web end watch is a must install their own plug-in, which is the main difference;

Second, the site is a matter of the user program to achieve their own streaming media server platform, the number of free online viewing restriction; and Kang cloud platform (fluorite cloud) is Kang private cloud, cloud-based fluorite watch, is a must Kang own equipment or APP APK, and there is a strict limit on the number of people online.

What EasyNVR users need to be prepared?

  1. The server side: Windows2008 / Windows2012 / CentOS 64-bit operating system, 4G of memory, and the CPU core 2 or more;
  2. Server bandwidth: according to their own circumstances: 5M-100M range (associated with the number of online user requirements);
  3. One or more monitoring cameras (or support RTSP Onvif)

We provide what kind of service?

  1. To set up a user environment server;
  2. For users to achieve Kang / Dahua surveillance camera to achieve cross-platform live web-based end free plug-in;
  3. Achieve PC, Android, IOS Apple's three main terminals can watch the monitor screen;
  4. Provide a complete example to the user, provide complete technical tutorials, technical after-sales.

Why choose us?

  1. Experience: We have several years of experience in the practical application of streaming media technology services, also has a web streaming media player experience, familiar with multi-terminal cross-platform technology;
  2. Found: We personally purchase Kang / UOB / Mai Xiong / World Albert webcam IPC, perform the actual device; a large open source community user groups;
  3. A variety of programs: We can offer 1x / 2x / 3x three options, these three basic program includes a variety of network environments in which the IPC;
  4. Stability: We make a live effect, whether PC end live images, live images or mobile terminal, are relatively stable;
  5. Easy to operate: We provide the user with complete examples and tutorials, examples by ordinary people can add or subtract cameras;
  6. Worry and effort: a page adapter PC, Android, IOS Apple, micro-channel, simplifying the complex adaptation of the mainstream terminal, worry and effort.

About EasyNVR

EasyNVR have is a full, independent, controllable intellectual property rights, but also can have the function of security software and hardware integration of Internet streaming media server, network camera through a simple channel configuration, monitoring industry inside traditional high-definition network camera IP Camera , etc. with the NVR RTSP, Onvif protocol output device access to EasyNVR, EasyNVR these audio and video data can be video sources is a pull, is converted to RTMP / HLS, full internet terminal H5 live (Web, Android, iOS), and EasyNVR able to broadcast live video source of data to a third party CDN network, Internet-scale distributed. EasyNVR details you may visit the official website: http://www.easynvr.com

EasyNVR intellectual property rights

Guess you like

Origin blog.csdn.net/EasyNVR/article/details/91820129