利用HTML5新特性之WebRTC进行(tou)拍(pai)照

jeary ((:‮?办么怎,了多越来越法方象抽的我)) | 2015-08-05 19:09

很早以前就知道html5可以获取视频流和声音流,但是并没有深入实现,因为js渣。获取内网IP的倒是用过。

然后无聊翻了翻git,找到了利用webrtc获取视频流并拍照的Demo,改了一点代码,可以用来进行偷拍

WebRTCC功能:

WebRTC的视频部分,包含采集、编解码(I420/VP8)、加密、媒体文件、图像处理、显示、网络传输与流控(RTP/RTCP)等功能。

详细介绍请看百科:WebRTC

获取视频流Demo:

<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>GetUserMedia</title>
</head>
<body>
<!--<video id="video"></video>-->

<video id="video" autoplay></video>
<img src="" id="img" ></img>
<canvas style="display:none;" id="canvas" ></canvas>
<!--<button onclick="cli()" value="test2">test</button>-->
</body>


<script type="text/javascript">

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var video = document.getElementById('video');

var getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);

getUserMedia.call(navigator, {
video: true,
audio: true
}, function(localMediaStream) {

video.src = window.URL.createObjectURL(localMediaStream);
video.onloadedmetadata = function(e) {

};
}, function(e) {
console.log('Reeeejected!', e);
});

//var video = document.getElementById('video');


var localMediaStream = null;
function snapshot() {
if (localMediaStream) {
ctx.drawImage(video, 0, 0);
document.getElementById('img').src = canvas.toDataURL('image/png');
}
}
function cli(){
alert(1);
video.addEventListener('click', snapshot, false);
}




/*var video = document.getElementById('video');
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var localMediaStream = null;
function snapshot() {
if (localMediaStream) {
ctx.drawImage(video, 0, 0);
document.getElementById('img').src = canvas.toDataURL('image/png');
}
}
video.addEventListener('click', snapshot, false);
//不使用供应商前缀
navigator.getUserMedia({video: true}, function(stream) {
video.src = window.URL.createObjectURL(stream);
localMediaStream = stream;
}, onFailSoHard); */


</script>
</html>

此Demo地址:http://jeary.org/webrtc/test.html

如果要拍照的话,可以将视频流转换成base64,然后利用img显示

偷拍Demo地址:http://jeary.org/webrtc/

请使用支持HTML5的浏览器打开(Firefox、Chrome...)

(PS0:手贱尝试允许访摄像头的,被拍请不要找我!)

(PS1:拍照 后图片会存储到服务器,不要问我存在哪。。)

至于是否可以绕过用户授权这一步骤直接进行偷拍..(这种神技还是请召唤伟大的二哥@gainover吧)

Just a fun!

[原文地址]

各种吐槽:

1#

Mujj (为何我的眼中饱含泪水?因为我装逼装的深沉) | 2015-08-05 19:10

。。

2#

D&G | 2015-08-05 19:11

nice

3#

随随意意 (WB出售1:15) | 2015-08-05 19:19

。。

4#

Aepl│恋爱 | 2015-08-05 19:41

5#

Aepl│恋爱 | 2015-08-05 19:43

幸好我没手贱 我老婆正在换衣服 哈

6#

金枪银矛小霸王 (:)) | 2015-08-05 19:59

我拍了好多张:)

7#

jeary ((:‮?办么怎,了多越来越法方象抽的我)) | 2015-08-05 21:02

后面挂着衣服的小伙伴是谁~还歪着头来了个微笑 @金枪银矛小霸王 是你吗?

8#

Jn· (小学生一枚,不服你TM别打我.) | 2015-08-05 21:03

前两天就在国外看到相同的demo

9#

浮萍 | 2015-08-05 21:11

有提示 问是否共享xxx

10#

huoji (<script>A</script>) | 2015-08-05 22:29

幸好我没手贱,,, 我正在换衣服 哈

11#

金枪银矛小霸王 (:)) | 2015-08-05 22:46

@jeary 不然。:)

12#

无敌L.t.H (‮……天百一爱恋考高:簿相色白产国) | 2015-08-05 23:29

弄个虚拟摄像头放个群众喜闻乐见的东西……

13#

柯腾 | 2015-08-06 01:34

求SAVA.PHP代码

14#

mramydnei | 2015-08-06 07:29

现在有支持这玩意儿的手机浏览器了么..?

感觉搞手机最high啊

15#

z@cx (日复一日,年复一年) | 2015-08-06 09:38

弄个朋友圈分享发给女神

16#

鬼见愁 | 2015-08-06 09:59

这个不错啊, 偷拍神器自动上传服务器吗

17#

鬼见愁 | 2015-08-06 09:59

笔记本用户 命中率百分99

18#

一只猿 (我是猴子派来的彩笔) | 2015-08-06 10:10

围观前端牛

19#

疯狗 (阅尽天下漏洞,心中自然无码。) | 2015-08-06 10:16

卧槽,我被偷拍了么……

20#

啊L川 (我想起那天下午夕阳下的奔跑,那是我逝去的青春...) | 2015-08-06 10:24

赶紧围观

21#

浩天 | 2015-08-06 10:31

XSS有新玩法了

22#

❤ (❤) | 2015-08-06 10:35

那天你叫我做实验原来是这个,还好没上当,要不被拍到果照就不好了...

23#

指尖上的故事 | 2015-08-06 10:56

有鸟用我分分钟写个这个玩意出来

24#

刘海哥 (‮moc.ghuil.www) | 2015-08-06 11:07

@指尖上的故事 人家是问,至于是否可以绕过用户授权这一步骤直接进行偷拍.

25#

安全小飞侠 (走自己的路,让别人无路可走) | 2015-08-06 12:20

@jeary 感觉挺好玩的

26#

only_admin (学生|未成年) | 2015-08-06 13:23

@jeary 手贱点了禁止,看不到允许后的效果了。如果允许,会显示拍到的图像吗

27#

x0ers (第一个知道牛奶能喝的人都对奶牛做了些什么?) | 2015-08-06 16:08

mark

28#

M4ster (Black || White) | 2015-08-06 16:16

http://hacktask.net/hacklab/WebRTC_Get_Photo/

29#

HackPanda | 2015-08-06 21:12

写了个存储在数据库的 链接: http://pan.baidu.com/s/1ntkVK0L 密码: eiyz

30#

毕月乌 (I am Jia Ma.) | 2015-08-06 22:10

直接禁用了WebRTC的表示毫无压力~

31#

Royal. | 2015-08-09 16:58

直接黑胶布贴在摄像头的路过。

32#

_Evil (科普是一种公益行为) | 2015-08-10 10:11

被你这么一说我就@下二哥 @gainover

33#

wefgod (求大牛指点) | 2015-08-10 12:02

谁传的1.php?

留言评论(旧系统):

亻失夕口 @ 2015-08-26 03:58:26

爱玛,我和姘友讨论这个10号MM差点要打起来了,核公鸡你说说看到底她是张柏芝还是真就一只鸡?我姘友只有这二个选项,我我咋觉得她像拍过森莫广告的,太太口服液?哦对了,顺便代表2014年清朝的reservoirdev,com问候2015年8月发这个主题开灌的毅丝哈,都不知道你拿来当火星文还是什么的,产业链?明码标价2.99$ 啊,说的就是reservoirdev、com

本站回复:

不知所云~ -_-!!!