js + html5 + java 实现二维码和条形码扫描.怎么用js调用摄像头

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js + html5 + java 实现二维码和条形码扫描.怎么用js调用摄像头相关的知识，希望对你有一定的参考价值。

参考技术A

不明白你的意图，你是开发GUI还是APP

如果是APP有很多支持的API

HBuilder就有调用原生硬件的接口html5++

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Camera Example</title>
<script type="text/javascript">
// 扩展API加载完毕后调用onPlusReady回调函数 
document.addEventListener( "plusready", onPlusReady, false );
var r = null; 
// 扩展API加载完毕，现在可以正常调用扩展API 
function onPlusReady() 
// 获取设备默认的摄像头对象 
var cmr = plus.camera.getCamera();
// ...... 

</script>
</head>
<body>
</body>
</html>

 参考技术B 可以用html5最新提供的navigator.getUserMedia()实现，但是浏览器支持性不是很好 参考技术C 调用客户端的摄像头？ 目前浏览器的安全性问题，这不允许访问的。。。。。。。。 参考技术D 一般这种不都是用扫描枪什么的做吗？

java实现手机扫描二维码进行登录

转自：http://www.daxueit.com/article/2581.html

 

项目结构：

技术分享

实现流程：

pc端：

1:打开二维码登录网页index.html

2:index.html调用GetQrCodeServlet

3:GetQrCodeServlet干2件事

　　a:生成随机的uuid,是一个唯一标识，该标识贯穿整个流程

　　b:生成二维码图片，二维码信息：http://60.28.201.37:8380/QrCodeLoginPro/Login.html?uuid=" + uuid

4:index页面展示二维码

5:index页面调用LongConnectionCheckServlet进行长连接轮询操作，参数为uuid

6:LongConnectionCheckServlet只干1件事

　　a:拿到uuid后循环检查loginUserMap中uuid是否不为null。

7:如果为null则代表没有登录，index.html将继续进行轮询

　　ps: LongConnectionCheckServlet 一个长连接请求检测登录状态

　　　　loginUserMap 是一个静态的map结构的登录池，uuid为key , 登录信息为value

手机端：

1:扫描pc端的二维码

2:打开二维码中的网页 http://60.28.201.37:8380/QrCodeLoginPro/Login.html?uuid=" + uuid

3:登录，将uname upwd uuid 传递给登录程序PhoneLoginServlet

4:PhoneLoginServlet干2件事

　　a:检测登录

　　b:登录成功后将登录信息插入到loginUserMap中去，uuid为key

pc端：

　　1:继续轮询检测uuid中是否为null

　　2:登录后的uuid中就不为null了，此时LongConnectionCheckServlet停止循环，返回登录状态。

代码：

cn.kuwo下的3个servlet

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
package cn.kuwo;
 
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Date;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import cn.kuwo.util.TwoDimensionCode;
 
/**
 * 生成二维码图片以及uuid
 * @author zijuntang
 *
 */
public class GetQrCodeServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
    protected void doGet(HttpServletRequest request,
            HttpServletResponse response) throws ServletException, IOException {
        doPost(request, response);
    }
    protected void doPost(HttpServletRequest request,
            HttpServletResponse response) throws ServletException, IOException {
        PrintWriter out = response.getWriter();
         
        //生成唯一ID
        int uuid = (int) (Math.random() * 100000);
        //二维码内容
        String content = "http://60.28.201.37:8380/QrCodeLoginPro/Login.html?uuid=" + uuid;
        //生成二维码
        String imgName =  uuid + "_" + (int) (new Date().getTime() / 1000) + ".png";
        String imgPath = "/home/web/apache/htdocs/QrCodeLogin/" + imgName;
        TwoDimensionCode handler = new TwoDimensionCode();
        handler.encoderQRCode(content, imgPath, "png");
         
        //生成的图片访问地址
        String qrCodeImg = "http://60.28.201.37/QrCodeLogin/" + imgName;
        String jsonStr = "{\"uuid\":" + uuid + ",\"qrCodeImg\":\"" + qrCodeImg + "\"}";
        out.print(jsonStr);
        out.flush();
        out.close();
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
package cn.kuwo;
 
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Date;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import cn.kuwo.vo.LoginUserVo;
import cn.kuwo.vo.UserVo;
 
/**
 * 用长连接，检查登录状态
 * @author zijuntang
 *
 */
public class LongConnectionCheckServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
    public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request, response);
    }
    public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String uuid = request.getParameter("uuid");
        String jsonStr = "";
        System.out.println("in");
        System.out.println("uuid:" + uuid);
        long inTime = new Date().getTime();
        Boolean bool = true;
        while (bool) {
            try {
                Thread.sleep(1000);
            } catch (InterruptedException e) {
                e.printStackTrace();
            }
            //检测登录
            UserVo userVo = LoginUserVo.getLoginUserMap().get(uuid);
            System.out.println("userVo:" + userVo);
            if(userVo != null){
                bool = false;
                jsonStr = "{\"uname\":\""+userVo.getUname()+"\"}";
                LoginUserVo.getLoginUserMap().remove(uuid);
            }else{
                if(new Date().getTime() - inTime > 5000){
                    bool = false;
                }
            }
        }
        System.out.println("login ok : " + jsonStr);
        PrintWriter out = response.getWriter();
        out.print(jsonStr);
        out.flush();
        out.close();
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
package cn.kuwo;
 
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import cn.kuwo.vo.LoginUserVo;
import cn.kuwo.vo.UserVo;
 
/**
 * 二维码手机端登录
 * @author zijuntang
 *
 */
public class PhoneLoginServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
    public PhoneLoginServlet() {
        super();
        // TODO Auto-generated constructor stub
    }
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request, response);
    }
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String uuid = request.getParameter("uuid");
        String uname = request.getParameter("uname");
        String upwd = request.getParameter("upwd");
        System.out.println(uuid);
        System.out.println(uname);
        System.out.println(upwd);
        //TODO 验证登录
        boolean bool = true;
        if(bool){
            //将登陆信息存入map
            UserVo userVo = LoginUserVo.getLoginUserMap().get(uuid);
            if(userVo == null){
                userVo = new UserVo();
                userVo.setUname(uname);
                userVo.setUpwd(upwd);
                LoginUserVo.getLoginUserMap().put(uuid, userVo);
            }
        }
        PrintWriter out = response.getWriter();
        out.print(bool);
        out.flush();
        out.close();
    }
}

cn.kuwo.util包下的生成二维码的封装类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
package cn.kuwo.util; 
   
import java.awt.Color; 
import java.awt.Graphics2D; 
import java.awt.image.BufferedImage; 
import java.io.File; 
import java.io.IOException; 
import java.io.InputStream; 
import java.io.OutputStream; 
import javax.imageio.ImageIO; 
import jp.sourceforge.qrcode.QRCodeDecoder; 
import jp.sourceforge.qrcode.exception.DecodingFailedException; 
import com.swetake.util.Qrcode; 
   
public class TwoDimensionCode { 
       
    /**
     * 生成二维码(QRCode)图片
     * @param content 存储内容
     * @param imgPath 图片路径
     */ 
    public void encoderQRCode(String content, String imgPath) { 
        this.encoderQRCode(content, imgPath, "png", 7); 
    } 
       
    /**
     * 生成二维码(QRCode)图片
     * @param content 存储内容
     * @param output 输出流
     */ 
    public void encoderQRCode(String content, OutputStream output) { 
        this.encoderQRCode(content, output, "png", 7); 
    } 
       
    /**
     * 生成二维码(QRCode)图片
     * @param content 存储内容
     * @param imgPath 图片路径
     * @param imgType 图片类型
     */ 
    public void encoderQRCode(String content, String imgPath, String imgType) { 
        this.encoderQRCode(content, imgPath, imgType, 7); 
    } 
       
    /**
     * 生成二维码(QRCode)图片
     * @param content 存储内容
     * @param output 输出流
     * @param imgType 图片类型
     */ 
    public void encoderQRCode(String content, OutputStream output, String imgType) { 
        this.encoderQRCode(content, output, imgType, 7); 
    } 
   
    /**
     * 生成二维码(QRCode)图片
     * @param content 存储内容
     * @param imgPath 图片路径
     * @param imgType 图片类型
     * @param size 二维码尺寸
     */ 
    public void encoderQRCode(String content, String imgPath, String imgType, int size) { 
        try { 
            BufferedImage bufImg = this.qRCodeCommon(content, imgType, size); 
               
            File imgFile = new File(imgPath);
            if (!imgFile.exists())
            {
                imgFile.mkdirs();
            }
            // 生成二维码QRCode图片 
            ImageIO.write(bufImg, imgType, imgFile); 
        } catch (Exception e) { 
            e.printStackTrace(); 
        } 
    } 
   
    /**
     * 生成二维码(QRCode)图片
     * @param content 存储内容
     * @param output 输出流
     * @param imgType 图片类

以上是关于js + html5 + java 实现二维码和条形码扫描.怎么用js调用摄像头的主要内容，如果未能解决你的问题，请参考以下文章

如何将html5程序打包成Android应用

js + html5 怎么来绘制三维图形

html5移动端页面上调用手机摄像头扫描二维码并获取二维码信息代码？

使用jquery.qrcode.min.js实现前台二维码生成（带Logo）

Vue.Js（html5） + Java实现文件分片上传

用HTML5 可以实现二维码扫描识别的功能吗