8 y$ @4 R# {7 C4 T. W, Z! r( H% l! a 这个功能不但手机端可以实现PC端也可以很好的实现,这个应用接口技术就是getUserMedia API,它能让应用开发者访问用户的摄像头或内置相机。下面就让我展示一下如何通过浏览器来访问你的摄像头,并提取截屏图形。/ ]- k2 y) J. U7 q
3 j# J9 J. C9 B# t$ g& c 一、视频流 ! W z0 F" T! o
% p: ~. ]9 B$ i- X Q0 e HTML5 的 The Media Capture(媒体捕捉) API 提供了对摄像头的可编程访问,用户可以直接用 getUserMedia (请注意目前仅Chrome和Opera支持)获得摄像头提供的视频流。我们需要做的是添加一个HTML5 的 Video 标签,并将从摄像头获得的视频作为这个标签的输入来源。( @* _' b. z7 G
% y6 I: }0 q$ i0 y7 A二、拍照$ z. ^+ t2 ?( p, U: H
, J7 P1 z. ~& D: x8 z拍照是采用HTML5的Canvas功能,实时捕获Video标签的内容,因为Video元素可以作为Canvas图像的输入,所以这一点很好实现。 1 @' l7 k0 U' K3 H J- M( l( } - L7 B: C" _: [0 {2 P三、 获取图片2 ~# `6 n- f* ]6 H$ W R' B, n! s
8 O$ `. D2 B* s {4 O
从Canvas获取图片数据的核心思路是用canvas的toDataURL将Canvas的数据转换为base64位编码的PNG图像,类似于“data:image/png;base64,xxxxx”的格式。* n4 V }" P; ]
* }# C8 F: w; N& s
var imgData=canvas.toDataURL(“image/png”);' ?1 X1 S/ s2 {) {3 W8 Z
# d2 b, S5 m& i( s; }% T' V5 W
这样,imgData变量就存储了一长串的字符数据内容,表示的就是一个PNG图像的base64编码。因为真正的图像数据是base64编码逗号之后的部分,所以要让实际服务器接收的图像数据应该是这部分,我们可以用两种办法来获取。1 U0 F$ @) N) x7 i) z* v" d4 l5 y
第一种:是在前端截取22位以后的字符串作为图像数据,例如: ! H# G; p+ q$ M! m( U6 A. u% C# z 8 t$ f7 `0 ^$ j7 c3 y, lvar data=imgData.substr(22);- p9 W. F3 k* P w W+ J
- ~& d: f" @. z) `# J3 a1 V 第二种:就是替换;前面的部分为"";/ a; S5 [( f" i
2 S( {7 f- z5 A
var image = canvas.toDataURL("image/png").replace("data:image/png;base64,", "");3 Z2 g" ^ ^) r
8 t4 r" I. W9 l7 s$ c* _反正不管如何实现,能获取到图片流即可、# J5 M: {5 ]( K* B
! v! `0 E. X q( ], o# T四、上传图片并解析 % V% ?3 Z% N) z+ Y9 c) K % J& b4 {( b. w; h+ J9 ^6 t使用 setInterval定时上传到项目后台使用开源QRCode.jar 解析图片获取二维码信息。) q7 ], ^; H: G0 w" T
7 M' L; o. I4 N% i _
前台部分代码:4 x: T9 c9 m, w9 o8 p7 X; z
<video id="video">- U7 p! M; M5 o0 U
<script>+ o+ f l& @6 {' @$ j
var flag = true; 0 J+ L' Z7 x Y, h+ A; Y
window.addEventListener("DOMContentLoaded", function () {1 W0 I3 H M/ O3 o' z$ O! D4 E
var video = document.getElementById("video"), canvas, context;. k" @: w0 I* T. ]' B2 i; R8 r
try { ; w0 s/ I$ w( i, a% M4 A0 q
canvas = document.createElement("canvas"); 6 \5 d4 d, ^8 i" n