用Web技术实现移动监测

本文将阐述如何通过 Web 技术实现简易的移动监测效果,并附上一些有意思的案例。 移动侦测,英文翻译为“Motion detection technology”,一般也叫运动检测,常用于无人值守监控录像和自动报警。通过摄像头按照不同帧率采集得到的图像会被 CPU 按照一定算法进行计算和比较,当画面有变化时,如有人走过,镜头被移动,计算比较结果得出的数字会超过阈值并指示系统能自动作出相应的处理。——百度百科 由上述引用语句可得出“移动监测”需要以下要素: 一个拥有摄像头的计算机 用于判断移动的算法 移动后的处理 注:本文涉及的所有案例均基于 PC/Mac 较新版本的 Chrome / Firefox 浏览器,部分案例需配合摄像头完成,所有截图均保存在本地。 对方不想和你说话,并向你扔来一个链接: 体验链接>>(若页面异常,则需手动改为 HTTPS) 综合案例 该案例有以下两个功能: 拍好 POST 后的 1 秒会进行拍照 静止 1 秒后音乐会停止,产生移动会恢复播放状态 上述案例也许并不能直接体现出『移动监测』的实际效果和原理,下面再看看这个案例。 体验链接>>(若页面异常,则需手动改为 HTTPS) 像素对比 案例的左侧是视频源,而右侧则是移动后的像素处理(像素化、判断移动和只保留绿色等)。 因为是基于 Web 技术,所以视频源采用 WebRTC,像素处理则采用 Canvas。 视频源 不依赖 Flash 或 Silverlight,我们使用 WebRTC(Web Real-Time Communications) 中的 navigator.getUserMedia() API,该 API 允许 […]

“等一下,我碰!”——常见的2D碰撞检测

“碰乜鬼嘢啊,碰走晒我滴靓牌”。想到“碰”就自然联想到了“麻将”这一伟大发明。当然除了“碰”,洗牌的时候也充满了各种『碰撞』。 好了,不废话。直入主题——碰撞检测。 在 2D 环境下,常见的碰撞检测方法如下: 外接图形判别法 轴对称包围盒(Axis-Aligned Bounding Box),即无旋转矩形。 圆形碰撞 光线投射法 分离轴定理 其他 地图格子划分 像素检测 下文将由易到难的顺序介绍上述各种碰撞检测方法:外接图形判别法 > 其他 > 光线投射法 > 分离轴定理。 另外,有一些场景只要我们约定好限定条件,也能实现我们想要的碰撞,如下面的碰壁反弹: the Pen Boundary collision detection by Jc @JChehe) on CodePen. 当球碰到边框就反弹(如x/y轴方向速度取反)。

再例如当一个人走到 100px 位置时不进行跳跃,就会碰到石头等等。 因此,某些场景只需通过设定到适当的参数即可。 外接图形判别法 轴对称包围盒(Axis-Aligned Bounding Box) 概念:判断任意两个(无旋转)矩形的任意一边是否无间距,从而判断是否碰撞。 算法:

两矩形间碰撞的各种情况: 在线运行示例(先点击运行示例以获取焦点,下同): See the Pen Axis-Aligned Bounding Box Collision […]

浅谈 WebVR

“目镜在他眼前涂上了一抹朦胧的淡色,映射着一幅弯曲的广角画面:一条灯火辉煌的大街,伸向无尽的黑暗。但这大街其实并不存在,它只是电脑绘出的一片虚拟的空间。” ——《Snow Crash》,Neal Stephenson 1992 年 什么是 VR VR(Virtual Reality)是利用电脑模拟产生一个三维空间的虚拟世界,提供用户关于视觉等感官的模拟,让用户感觉仿佛身历其境,可以及时、没有限制地观察三维空间内的事物。用户进行位置移动时,电脑可以立即进行复杂的运算,将精确的三维世界视频传回产生临场感。—— 维基百科 VR 的显示原理 了解 VR 显示原理前,先了解我们人眼的立体视觉的成像原理: 人眼的视觉是可以感觉出深度的,也就是深度知觉(depth perception)。而有了深度的信息后,才能判断出立体空间的相对位置。 另外,由于两个眼睛的位置不一样(一般人两眼相距 5~7 厘米),所以看到的东西会有两眼视差(binocular parallax),大脑再将这两个图像做融合处理,从而产生立体的感觉(即所谓的 binocular cues)。 头戴式显示器(Head-mounted Display) 头戴式显示器(HMD)是 VR 目前最常见的一种体验方式。它的原理是将小型二维显示器所产生的图像经由光学系统放大。具体而言,小型显示器所发射的光线经过凸状透镜使图像因折射产生类似远方效果。利用此效果将近处物体放大至远处观赏,从而达到所谓的全息视觉(Hologram)。另外,显示器被分为左右两个部分,分别显示左右眼看到的图像。大脑再将左右眼所看到的图像(两眼视差)做融合处理,从而产生 3D 效果。同时,HMD 会根据头部运动让视角与之同步。综合上述特性,用户通过 HMD 体验 VR 时就如同在现实中观看一样,这种体验也被称为沉浸式体验。 HMD 种类 目前市场上主要有以下 3 种 HMD 设备: 滑配式 这是目前最初级、价格最低的 HMD 设备。它与智能手机相连接,将 2D 显示变成 3D VR 显示。滑配式 HMD 设备强烈依赖于主机系统(智能手机),后者是提供 VR […]

CSS 3D Panorama – 淘宝造物节技术剖析

前言 3D 全景并不是什么新鲜事物了,但以前我们在 Web 上看到的 3D 全景一般是通过 Flash 实现的。若我们能将 CSS3 Transform 的相关知识运用得当,也是能实现类似的效果。换句话说,3D 全景其实就是 CSS3 3D 的应用场景之一。 准备 在实现 CSS3 3D 全景之前,我们先理清部分 CSS3 Transform 属性: transform-origin:元素变形的原点(默认值为 50% 50% 0,该数值和后续提及的百分比均默认基于元素自身的宽高算出具体数值); perspective:指定了观察者与z=0平面的距离,使具有三维位置变换的元素产生透视效果。(默认值:none,值只能是绝对长度,即负数是非法值); transform-style:用于指定其为子元素提供2D还是3D的场景。另外,该属性是非继承的; transform:该属性能让你修改CSS可视化模型的坐标空间,其中包括 平移(translate)、旋转(rotate)、缩放(scale) 和 扭曲(skew)。 下面对上述的一些点进行更深入的分析: 对于 perspective,该属性指定了“眼睛”与元素的 perspective-origin (默认值是 50% 50%)点的距离。那么问题来了:“当我们应用 px 作为衡量单位时,那它的实际距离该如何量化呢(即如何得到我们熟悉且易于表达的距离)?” 答:当我们的屏幕的分辨率是1080P(1920*1080px),且该元素或祖先元素的 perspective 值是 1920px 时,该应用了 CSS3 3D Transform 的元素的立体效果就相当于我们在距离一个屏幕宽度(1920px)的屏幕前观看该元素的真实效果。尽管如此,目前我也不清楚如何准确地为元素设置一个合适的 perspective 值,只能猜测个大概值,然后再动态修改值,以达到满意的呈现效果。 根据 相似三角形 的性质可计算出被前移的元素最终在屏幕上显示的实际大小 […]

© 2017 JDC. All Rights Reserved.