canvas教程

HTML5画布(Canvas)技术应用演示——手势控制幻灯片播放

字号+ 作者:H5之家 来源:H5之家 2017-02-18 14:00 我要评论( )

本文给大家介绍一个纯HTML5+Javascrit实现用手势来上下左右翻动指挥幻灯片的运行的效果,他是用 WebRTC 和 Javascrit 来调用摄像头,通过电脑上连接的摄像头观察

本文给大家介绍一个纯HTML5+Javascript实现用手势来上下左右翻动指挥幻灯片的运行的效果,他是用 WebRTC 和 Javascript 来调用摄像头,通过电脑上连接的摄像头观察你在空中挥舞双手动作判断如何翻页,目前只有使用谷歌浏览器才能正确的运行。这个例子手势的识别只有大概80%的准确性,但是相信它已经足够让你领略到这种技术的潜力了。

HTML5画布(Canvas)技术应用演示——手势控制幻灯片播放

使用技巧
1、手势识别算法通过计算你的动作的位置和幅度,当检测到动作的幅度超过一个阀值时,幻灯片将2、会做出相应的变化。
3、注意让你的身体保持静止。
4、你的手最好距离摄像头60-90厘米远。
5、做手势时手掌张开,手心冲着摄像头。
6、必须使用谷歌浏览器

当然,最重要的还是需要你的电脑连接有可用的摄像头

观看演示

文章来源:WEB天外天

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
网友点评
=