澳门搏彩官方网 > Web前端 >

澳门娱乐官方平台使用HTML5捕捉音频与录像消息概述及实例

虚假来电:HTML5振动API的恶意使用

2014/01/16 · HTML5 · 3 评论 · HTML5

本文由 伯乐在线 - 梧桐 翻译。未经许可,禁止转载!
英文出处:Terence Eden。欢迎加入翻译组。

一个新的API出来了。HTML5 (很快)将支持用户设备振动。这明显是很有趣的事情,比如它可以用户触发提醒,提升游戏体验,以及其他各种好玩的事情,例如通过振动发送摩斯代码。

到目前为止,Chrome(以及其他Android浏览器)要使用位置信息、摄像头、地址簿等资源必须申请权限。这是一种安全措施防止你的个人信息在未授权的情况下泄露。

而现在使用HTML5振动API并不会在屏幕上触发警告。因为一般认为用这个功能几乎没有危害,毕竟在现实中它能干的坏事无非是持续消耗电量。事实就是这样简单吗?我不敢肯定。

点评:音频与视频信息的捕捉一直是Web开发中的一个难点,下面为大家介绍一种新的API,该API通过使用navigatior.getUserMedia()方法来让Web应用程序拥有访问用户摄像头与麦克风设备的能力

邪念

我们都看过那种无耻的广告做得跟Windows弹出窗一模一样,它们通常发出一个正当的系统请求:更新Java或类似的。

假如一个恶意网页弹出一个虚假的系统提示并同时振动,你有多大的信心能区分一个合法的弹出框和一个png图片?毕竟手机振动了,你就会认为它是真实的系统提示。

最新澳门网站网址游戏 1

(图1)

这时候你是收到了一个“空投”炸弹,还是说网页在跟你开个小玩笑?

页面广告自动播放声音本来就很烦人了。自动振动跟它比起来毫不逊色。回想一下你在满屏幕搜索那个推销保险的广告。

目前振动的强度还不能控制,只能控制持续时间。当然通过构造恶意代码去突破没打补丁的浏览器也不是不可能的,甚至可以让电机持续高负荷运转直到损坏。

本文概述
长期以来,音频与视频信息的捕捉一直是Web开发中的一个难点。许多年来,我们一直依赖浏览器插件来实现这个需求。
在HTML 5中,出现了许多可以访问硬件设备的API,例如访问GPS设备的Geolocation API、访问accelerometer设备的Orientation API、访问GPU设备的WebGL API、访问音频播放设备的Web Audio API等等。这些API是非常强大的,因为开发者可以直接通过编写JavaSccript脚本代码来访问底层硬件设备。
本文介绍一种新的API,该API通过使用navigatior.getUserMedia()方法来让Web应用程序拥有访问用户摄像头与麦克风设备的能力。

虚假来电

如果与HTML5 Audio一起使用,完全可以创建一个很真实的虚假”来电“,既有振动也有铃声。一旦”接听“,页面就可以播放一段音频:”喂,尽快回打给我,我的号码是“一个吸费号码”。接下来还可以使用URI自动打开拨号界面。

最新澳门网站网址游戏 2

(图2)

你能告诉我上面说的是真实的来电吗?如果你够仔细或许会发现。但如果页面正在播放你的默认铃声,然后设备还在振动,这时你就很可能迷糊。如果和WebRTC呼叫绑定,那实际上你看到的就是一个精心构造的骗局。

捕捉媒体数据的技术发展历史
在过去几年里,开始出现了在Web应用程序中访问客户端本地设备的需求,因此,W3C组织决定组织一个DAP(Device APIS POLICY)工作小组,来为该需求的实现制定一个统一的标准。
接下来让我们来看看在2011年发生了哪些事情:

视频演示

本文作者还录了一段视频,放在Youtube上了。

在HTML页面文件中实现媒体数据的捕捉
DAP工作小组的第一个要制定的标准就是如何在Web应用程序的HTML页面中实现媒体数据的捕捉。他们决定重载类型为file的input元素(<input type="file">),并且为accept属性添加一个新的属性值。
如果开发者想实现用户通过摄像头进行拍照的功能,可以书写如下所示的代码。

源代码

下面是一个很基本的例子,你可以在手机上试验一下。(或点击这里看示例)

JavaScript

<body> <script type="text/javascript"> navigator.vibrate = navigator.vibrate || navigator.webkitVibrate || navigator.mozVibrate || navigator.msVibrate; navigator.vibrate([1000, 500, 1000, 500, 1000, 500, 1000, 500, 1000, 500, 1000, 500, 1000, 500]); </script> <img width="100%" src="phone.png" onclick="window.location.href='tel:09098790815';" /> <audio autoplay="autoplay"> <source src="ring.mp3" /> </audio> </body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
&lt;body&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
  navigator.vibrate = navigator.vibrate ||
       navigator.webkitVibrate ||
       navigator.mozVibrate ||
       navigator.msVibrate;
 
  navigator.vibrate([1000, 500, 1000, 500, 1000, 500, 1000, 500, 1000, 500, 1000, 500, 1000, 500]);
&lt;/script&gt;
&lt;img width=&quot;100%&quot; src=&quot;phone.png&quot; onclick=&quot;window.location.href=&#039;tel:09098790815&#039;;&quot; /&gt;
&lt;audio autoplay=&quot;autoplay&quot;&gt;  
  &lt;source src=&quot;ring.mp3&quot; /&gt;  
&lt;/audio&gt;
&lt;/body&gt;

目前只有Android平台的Firefox支持,但毫无疑问其他浏览器将会跟进。

代码如下:

提示:

Firefox是Andriod平台上唯一支持振动的。其他的比如三星浏览器,Chrome或者Opera都不支持。Iphone也不支持。Windows Phone或黑莓根本没人在乎的,所以我就不测试了。

当页面使用振动API的时候,Firefox目前并不会申请权限。

你认为浏览器在振动前是否应该有警告?还是说这种风险太低?我想这要看那些骗子公司是否会利用这一点了,或者要看用户是否反对了。

更新: 感谢Reddit和HackerNews上面的评论,BB10似乎也支持振动API,Windows Phone不支持。

赞 收藏 3 评论

<input type="file" accept="image/*;capture=camera">

关于作者:梧桐

最新澳门网站网址游戏 3

(新浪微博:@jakiewoo_vp9) 个人主页澳门娱乐官方平台, · 我的文章 · 13

最新澳门网站网址游戏 4

录制视频数据与音频数据的代码与之类似:

代码如下:

<input type="file" accept="video/*;capture=camcorder">
<input type="file" accept="audio/*;capture=microphone">

在这些代码中,只需使用file控件(类型为file的input元素)即可完成拍照或录制媒体数据的功能。但是在因为这些代码中尚缺乏一些实现与之相关的需求(例如在canvas元素中渲染捕捉到的视频数据,或者对捕捉到的视频数据应用WEBGL滤镜)的能力,所以没有得到开发者的广泛应用。
支持浏览器:
Android 3.0浏览器
Chrome for Android (0.16)
Firefox Mobile 10.0
device元素
如果使用file控件,则捕捉媒体数据后对其进行处理的能力是非常有限的,所以出现了一种新的可支持任何设备的标准。该标准使用device元素。
最新澳门网站网址游戏,Opera浏览器是第一个通过device元素实现视频数据捕捉的浏览器。几乎在同一天,WhatWG组织决定使用navigator.getUserMedia()方法来捕捉媒体数据。一个星期后,Opera推出一个新的支持navigator.getUserMedia()方法的浏览器。后来,Microsoft工具推出支持该方法的IE 9浏览器。
device元素的使用方法如下所示。

代码如下:

<device type="media" onchange="update(this.data)"></device>
<video autoplay></video>
<script>
function update(stream) {
document.querySelector('video').src = stream.url;
}
</script>

支持浏览器
不幸的是,目前为止尚没有一个正式版的浏览器中支持device元素。
WEBRTC
最近,由于WebRTC(Web Real Time Communication:Web实时通信)API的出现,媒体数据捕捉技术又有了一个很大的发展。Google、Opera、Mozilla等公司均正在努力将其实现在自己的浏览器中。
WebRTC API是一个与getUserMedia方法紧密相关的API,它提供一种访问客户端本地的摄像头或麦克风设备的能力。
支持浏览器:
目前为止,在Chrome 18版浏览器中,在chrome://flags页面中进行设置后可使用WebRTC,在Chrome 21版本的浏览器中,该API被默认使用,不再需要设置。在Opera 12以上与Firefox 17版本的浏览器中默认支持WebRTC API。
使用getUserMedia方法
通过使用getUserMedia方法,我们可以不依靠插件而直接访问客户端本地的摄像头设备与麦克风设备。
检测浏览器支持
可以通过如下所示的方法来检测浏览器是否支持getUserMedia方法。

代码如下:

上一篇:没有了
下一篇:没有了