H5实现扫一扫

H5实现扫一扫

在本案例主要利用H5自带的API navigator的getUserMedia方法获得摄像头，并通过createObjectURL将数据流复制给video标签的src。

Canvas标签只是图形容器，您必须使用脚本来绘制图形。此例中video标签容于画布内，当我们调起摄像头后，设置一个定时函数，定时调起context.drawImage()函数,将画布内的内容进行一个截图，以数据流的形式写入到文件图片中，QRCodeAction中对该图片进行解析。

  

1.JAR包下载：

该jar包已经集成QRCode的编码包和解码包。

2.主html面：（直接复制即可调起摄像头）

3.主要代码：

	/**
	 * 解析二维码
	 */
	public String decoderQRCode(){
		try {
			String realpath = ServletActionContext.getServletContext().getRealPath("/file");
			SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmss");
			String imgName = sdf.format(new Date()) + ".png";
			String filePath = realpath+Constants.SF_FILE_SEPARATOR+imgName;
			OutputStream out = new FileOutputStream(filePath);
			QRCode.GenerateImage(img,out);//生成图片
			message  = QRCode.decoderQRCode(filePath);
			int index=message.indexOf('=');
			message=message.substring(index+1);
			System.out.println(message);
		} catch (Exception e) {
			e.printStackTrace();
		}
		return SUCCESS;
	}

4.二维码生成：（附带）

	/**
	 * 生成二维码
	 */
	public String encoderQRCode(){
		String realpath = ServletActionContext.getServletContext().getRealPath("/file");
		SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmss");
		String imgName = sdf.format(new Date()) + ".png";
		String  imgPath= realpath+"/"+imgName;
		QRCode.encoderQRCode(content, imgPath, "png");
		message = imgName;
		return Action.SUCCESS;
	}

结果分析：经试验，这种方法能够调起电脑和安卓上摄像头实现扫一扫，对于ios系统，并不兼容。