如果不设置这段代码，会发生奇怪的现象，这是因为浏览器有自己的对图片和一些其他元素的拖放处理，会在我们拖放时自动运行，这与我们的拖放处理产生了冲突。
为用户提供的拖曳功能很直观，在很对桌面应用程序中，复制或移动对象都可以通过拖曳来完成
最近在公司打杂的时候，突然分到了一个锅，就是要支持一个新的功能：用户可以通过拖曳组件来改变组件的顺序。因此，这阵子就看了一下网上的一些drag和drog的文章以及W3C的介绍，然后自己亲手实践了一下，毕竟打码，才能变得更强。 首先，先放一个我的demo，大家可以去那里随便拖动一下玩一玩: https://chenjigeng.github.io/example/drag.html
拖放是一种常见的操作，即抓取对象以后从一个位置拖到另一个位置。 在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。
本章介绍jQuery中支持Ajax的各种方法和函数，阐述通过Ajax交互的过程与常用方法,重点介绍核心方法$.ajax()的运用技巧。通过ajax全局事件的介绍，进一步巩固前面所学基础内容。
way1：前端只负责选择图片，然后将图片传给服务端，服务端再传给七牛，再将地址返给前端展示。
摄像机点位的功能主要是在图片地图和在线离线地图上设置对应摄像机的位置，然后双击可以实时预览对应摄像机的视频，在图片地图上拖动摄像机图标到对应位置，系统会自动保存位置信息，在网页地图上的摄像机位置，需要异步更新，比如先从右侧选择需要更新位置的摄像机，然后在地图上鼠标按下，会自动传回当前位置的经纬度信息，然后单击更新设备位置按钮即可，会自动js异步更新执行代码，更新完成以后会自动同步到另外的地图，比如在线地图更新了，离线地图也会自动更新。
1. 学习目标 学习如何在OpenCV中处理鼠标事件； 学习鼠标事件与回调； 学习鼠标事件回调函数的基本流程。 2. Callback 基本流程 📷 3. 鼠标事件 cv.setMouseCallback 函数说明 3.1 cv.setMouseCallback() 函数使用 cv.setMouseCallback(winname,onMouse,userdata) 3.2 参数说明 参数 说明 winname 表示监听鼠标事件的窗口。 onMouse 表示响应函数，即当鼠标事件触发时调用的函数。 user
事件订阅是近期增加的功能，主要是因为遇到越来越多的一个应用场景，能够接收摄像机的报警事件，比如几乎所有的摄像机后面会增加报警输入输出接口，如果用户外接了报警输入，则当触发报警以后，对应的事件也会通过onvif传出去，这样就相当于兼容了所有onvif摄像机厂家的报警事件接收，在一些应用系统中，这个功能也是很常见的。
作者：汪娇娇 时间：2017年7月7日 一、铺垫 依靠七牛上传图片，其实有很多方法，先说说有哪些方法，以及这些方法各自的优缺点吧（移动端）。 way1：前端只负责选择图片，然后将图片传给服务端，服务端再传给七牛，再将地址返给前端展示。 优：可以控制上传图片到七牛的时机，不浪费七牛的存储空间； 缺：浪费自己服务器的带宽，并且周周转转，耗时长，麻烦。 way2：前端发通知让客户端来上传图片到七牛。 优：前端不需要处理太多东西，只需要给客户端发一个通知。 缺：选一张图片就上传了一张，如果多次选择，会浪费七牛存储空
对于drag事件不熟悉的，请先阅读：《drag事件详解：html5鼠标拖动排序及resize实现方案分析及实践》
此功能是一个客户定制的，主要是需要在地图上动态显示GPS的运动轨迹，有个应用场景就是一个带有监控的车子，实时在运动中，后台可以接收到经纬度信息，需要绘制对应的轨迹，相当于这些摄像机点位是动态移动的，这样就可以观测到摄像机的实时位置信息，双击摄像机还可以弹出画面实时预览，很直观。
转自 http://blog.sina.com.cn/s/blog_75cf5f3201011csu.html
在拖拽过程中蓝色的线条是一个边框，利用拖拽事件添加class 并设置css就能有“响应”式的效果。
云台控制也是onvif功能中最常用的，最常用的功能排第一的是拿到视频流地址，排第二的就是云台控制了，云台控制的含义就是对带云台的摄像机进行上下左右的移动，一般云台摄像机都是带有一个小电机，一旦收到485或者网络来的正确的指令以后就触发单片机程序，然后单片机程序驱动电机进行转动，所以相对来说云台摄像机比普通的摄像机更耗电，当然价格也更贵。
以前不知道onvif也可以做抓拍功能，直到近期重新用Onvif Device Test Tool工具测试的时候，发现还有抓图的接口，于是抓跑分析出要收发的数据，然后加入到自己封装的onvif操作类中，这个抓图有个应用场景就是报警以后，直接通过onvif抓图，而不需要打开实时视频流，基本上不占用什么资源。
整个onvif模块大部分的功能都有了以后，除了在demo上点点按钮可以执行获取结果显示外，最终还是要应用到视频监控中，在按钮上点点和系统中后台自动运行是两码事，比如onvif校时和事件订阅，不会说是傻到在监控系统界面上提供按钮给用户点击才去执行，最多做的应该是系统设置中提供两个开关比如自动校时、事件订阅，可以方便的开启这几个功能。开启以后等监控系统启动后自动去处理，比如挨个对摄像机进行校时处理以及订阅事件，为了能够做到添加摄像机后自动立即应用，特意改成了在打开摄像机视频画面的时候，主动去实例化DeviceOnvif类（每个摄像机都对应一个实例）
这次主要是把 RecyclerView 比较常用的基本的点，在这里集中整理一下。从这篇文章主要梳理以下几点：
HTML5地理定位功能由navigator.geolocation对象提供，API方法有三个：
时隔一年多，重新对视频监控系统的onvif内核重写，一方面为了兼容Qt6，一方面按功能分类提高效率。整体逻辑思路是一样的，主要的改动是由于Qt6不再支持QtXmlPatterns模块（其实这个模块在Qt5的后面的版本也逐渐提示为废弃模块），onvif协议通信中的数据都是带有命名空间的xml数据，用QtXmlPatterns模块去解析是最合适的，现在全部改成了用最原始最基础的QtXml模块去解析，毕竟QtXml模块肯定是一直在的，这是相当基础的模块，无论以后Qt7还是Qt100肯定都会有。
做视频监控系统，绕不过onvif这玩意，这玩意主要就是为了统一一个大概的标准，能够对各个厂家的监控设备进行常用的一些操作，比如搜索、获取信息、云台控制、事件订阅、抓拍图片等，如果没有这个规范，那么各个厂家都各自为政，需要用私有的sdk去处理，这样就很麻烦很惨了，几十个厂家就需要几十个sdk，对于程序员来说简直是灾难，想想就很恐怖的事情，哪个程序员不想多活几年！
预置位在视频监控系统中是不可或缺的存在，响应预置位功能的前提是要带预置位的云台球机，有些普通的云台球机其实不带预置位的，这个要检查清楚，硬件上不支持该功能的，你再怎么点也没反应。在这个视频监控系统的使用过程中，就有不少的用户会问这个问题，为啥他点了云台没法应之类的，前提是要硬件支持才行啊。
通过onvif来调整图片的Brightness(亮度)、ColorSaturation(色彩饱和度)、Contrast(饱和度)这三个参数，可以实时观测到监控画面对应的变化，比如讲亮度Brightness拉到最低，可以看到这个画面一片漆黑。通过onvif来调节图片的颜色光线，就无须通过厂家私有SDK去调节，当然厂家SDK能够去调节的参数肯定更多更全更好速度更快，这个功能用到的地方不多，大部分的时候其实还是安装调试期间，直接在前端摄像机的网页配置界面或者客户端界面上调整好，一般调整好以后基本上不会再去改动，尤其是经过验收的项目，经过专家的建议调整后固定在那个参数就行。
在视频监控系统中，对摄像机进行时间设置也是很有必要的，这样就和服务器或者软件这边统一了时间，一般在摄像机的画面上可以设置OSD标识当前时间，这样存储到视频文件中回放的时候，也能和本地的时间一致，一般的视频监控系统默认都会开启ONVIF校时，通过标准的公开的onvif协议来对前端摄像机设备进行时间设置，当然也可以获取时间。前端摄像机设备和后端管理软件或者服务器时间统一是非常重要的一个因素，本人经历过很多视频监控系统相关的项目，很多时候的报修情况就是因为前端设备时间和服务器端不一致的情况，导致的各种奇奇怪怪的问题。
上一篇文章写的是onvif设备搜索，搜到这些设备以后，第一件事情就是要对设备信息获取一下，比如获取视频流地址，配置套件信息、码流信息、分辨率大小等，这些信息的获取根据具体的需要去获取，也没有必要全部获取，毕竟很可能大部分的信息用不到，按需编码永远都是第一原则，第二原则才是考虑拓展性和稳定性，如果基本的需求都实现不了，那就不是一个真正的软件，考虑再多的拓展性和稳定性都是白搭，说的严重一点就是：所有编程语言都是垃圾，能解决实际需求并变现才是王道！
最开始写通道交换的功能的时候，走了很多弯路，比如最开始用最初级的办法，触发交换的时候，先关闭视频，然后设置新的url重新打开视频，这样处理非常低级而且耗内存还卡还很慢，毕竟重新打开视频都需要时间的，快则几百毫秒慢则几秒钟都很有可能，尤其是网络情况不好的情况下，更加糟糕，后面发现自己真傻，完全没有必要去关闭原有视频，毕竟交换仅仅是位置的交换，而不是重新设置视频，可以直接重新布局，将视频控件对应的布局位置调换下即可，这种方法就做到了瞬间交换，视频还是原来的视频，正常播放，根本就没有中断过。
自从视频监控系统的内核不断增加，从最初的vlc到ffmpeg然后到mpv，后面还陆续增加了海康sdk等，每次增加一个内核，整个视频监控系统就有三五个代码文件需要修改，而且大部分是重复的代码，通过define来区分不同的内核，所以重新整理了一个视频类，里面就define处理好了，提供了个公共接口，在需要的地方直接实例化一个类就行，而不需要在不同的地方实例化不同的类，大大减轻了后期的工作量，也复用了很多代码。
上一篇文章把插件加载好了，并且把插件中的所有控件都显示到了列表框中，这次要做的就是实现拖曳控件的功能，用户选择一个控件拖曳到画布上，松开，在松开位置处自动实例化该控件，这个需要用到dropEvent和dragEnterEvent事件，重新实现这两个事件，对拖曳的对象进行过滤并调用函数实例化该控件，在实例化该控件的同时实例化控件跟随控件以便拉伸调整大小和位置。这里需要注意的是dragEnterEvent是必须的，很多人以为拖曳只要实现dropEvent就可以了，其实不行的，没有效果的，需要先dragEnterEvent来过滤好了执行event->accept()才行，不然根本没有效果，很多人尤其是初学者都挂在这里，我就是在这里摔了一跤，好疼！
在所有的视频监控系统中，双击摄像机的节点，对应摄像机加载到当前焦点通道显示，这个都是必须具备的功能，还有一些厂家会做双击NVR节点，自动加载该NVR下的所有摄像机全部显示，从通道1开始到通道16或者32，知道排满，或者双击对应的分组，分组下面的所有摄像机自动加载显示视频，这个基础效果在Qt中还是很好实现的，入门级别，唯独双击父节点加载节点下的所有视频，我们知道QTreeWidget默认双击父节点是折叠功能，那怎么取消这个功能呢？或者仅仅是限制单击父节点的+-号来实现折叠和展开，这个就需要用到事件过滤器，事件过滤器的优先级别很高，可以直接优先拿到对应的事件，然后进行处理，处理完成以后如果不需要继续传递下去可以直接return true即可，这样就不会再执行该事件了。
为用户提供的拖曳功能很直观，在很多桌面应用程序中，复制或移动对象都可以通过拖曳来完成。
这个效果的灵感来自于大屏电子看板系统，在很多系统中尤其是上了大屏的时候，其实在用户不在操作的时候，是很不希望看到那个鼠标箭头指针的，只有当用户操作的时候才显示出来，这个就需要开个定时器定时计算最后一次用户操作的时间，和当前时间比较，如果超过了鼠标未操作隐藏时间，则隐藏鼠标，在Qt中提供了方法qApp->setOverrideCursor(Qt::BlankCursor);这样设置个空白的鼠标指针就表示隐藏鼠标，如果需要恢复调用qApp->restoreOverrideCursor();即可，怎么触发恢复鼠标指针呢？搞个bool存储当前鼠标是否隐藏，在鼠标隐藏的时候置为真，拦截鼠标移动事件，一旦发现之前鼠标处于隐藏状态，则立即恢复指针状态，同时将标志位改为假，不然频繁恢复指针没有意义，只有当指针隐藏的时候才需要恢复一次。
Android DynamicGrid是一个第三方开源项目，DynamicGrid在github上的项目主页是：DynamicGrid
视频播放功能是核心功能之一，为了统一管理接口，统一封装成一个控件，对外提供seturl open close方法即可，不用去管内部的具体处理，这样就可以提供多种接口来实现统一的管理，比如vlc内核+ffmpeg内核+海康sdk内核等，随意切换，在使用各种内核的过程中，对比下来，发现easyplayer的内核是最好的，在国内用ffmpeg做接口做到了极致，CPU占用极低。
作为一个开发了多个 H5 项目的前端工程师，在开发过程中难免会遇到一些兼容性等爬过坑的问题。现在我将这些问题一一汇总一下，并在后面给出坑产生的原理，和现阶段常规的填坑方案。由此来做一个阶段性的总结。
----------------更新：2014-04-21---------------
一般会有两种处理方式来删除视频，一种是鼠标右键菜单，删除当前视频或者删除所有视频，一种是直接按住当前视频，移到视频通道界面以外就表示删除当前视频，这也是个比较人性化的设置，每个人的喜好不一样，和通道交换功能类似，按住视频拖动到窗体外面表示删除视频，这个功能也需要安装事件过滤器来处理，自动计算当前按下状态下的鼠标是否已经到了窗体外面，按下的时候记住当前视频通道，松开的时候处理删除视频动作即可。删除完成以后同样要立即更新配置文件或者数据库，以便下次应用新的配置，在删除视频的时候，为了保证界面UI的流畅，可以后台慢慢释放资源删除，而不是立即删除，有时候会卡住主界面，体验不好。
全屏切换这个功能点属于简单的，一般会做到右键菜单中，也提供了快捷键比如alt+enter来触发，恢复全屏则按esc即可，全屏处理基本上都是隐藏通道面板以外的窗体，保持最大化展示，由于采用了模块化的堆栈窗体qstackwidget来处理，这样还需要提供信号通知主界面来隐藏对应的不需要显示的控件。
回答这个问题之前，我们首先要具备DOM事件流捕获与冒泡的知识，这里只讲JS中如何设置这两种事件监听，例如对body注册点击事件：
meta 标签由 name 和 content 属性定义，用来描述网页文档的属性，比如网页的作者，网页描述，关键词等，除了HTTP标准固定了一些name作为大家使用的共识，开发者还可以自定义name。
domReady是名为DOMContentLoaded事件的别称，当初始的HTML文档被完全加载和解析完成之后，DOMContentLoaded事件被触发，而无需等待样式表、图像和子框架的完全加载。
1. 解释一下在js里，0.1+0.2为什么等于0.30000000000000004，如何通过代码解决这个问题？
浏览器的多线程中，有的线程负责加载资源，有的线程负责执行脚本，有的线程负责渲染界面，有的线程负责轮询、监听用户事件。
……如果加载失败怎么办？例如，这里没有这样的脚本（error 404）或者服务器宕机（不可用）。
因为普通注册事件方法的不足，jQuery又创建了多个新的事件绑定方法bind() / live() / delegate() / on()等，其中最好用的是: on()
使用JS完成对注册页面进行简单的数据的非空校验。在提交表单的时候，不可以出现用户名，密码是空的情况。
之前图片上传的插件用的是，基于cropper.js的图片上传和裁剪： https://www.jianshu.com/p/f9986bd52ec6，现在考虑到一个用户体验的问题，但上传一张图片之后，发现裁剪的并没有自己想象中的好，再继续选择同一张图片进行二次裁剪，这个时候，就不会出现裁剪框，只有更换另外一张新的图片才行。
window.onload 表示的是页面被加载完毕。 onload必须等等页面中的图片、声音、图像等远程资源被加载完毕后才调用而jQuery中只需要页面结构被加载完毕。
图片懒加载就是鼠标滑动到哪里，图片加载到哪里。总的来说，一般页面打开，会同时加载页面所有的图片，如果页面的图片请求太多会造成很卡很慢的现象，为了避免这一现象，利用懒加载图片的方法，提高性能（典型：淘宝）
中间磨磨唧唧从原生JS找到JS插件，浪费了不少精力和时间，但是也磕磕碰碰学到了些知识，建议读者：想学一下弹窗的JS实现代码的可以看看前两小节，只想实现效果的，直接复制源码就行！
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
