ceshi.html 3.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=no, width=device-width">
  7. <meta content="yes" name="apple-mobile-web-app-capable" />
  8. <meta content="black" name="apple-mobile-web-app-status-bar-style" />
  9. <meta content="telephone=no" name="format-detection" />
  10. <meta content="email=no" name="format-detection" /><!--禁止Android中自动识别页面中的邮件地址-->
  11. <title>扫一扫</title>
  12. <script type="text/javascript" src="jsqrcode-master/src/jquery.min.js" charset="utf-8"></script>
  13. <style>
  14. #video {
  15. height: 400px;
  16. width: 400px;
  17. display: block;
  18. margin: 0;
  19. padding: 0;
  20. }
  21. #canvas {
  22. height: 400px;
  23. width: 800px;
  24. display: block;
  25. margin: 0;
  26. padding: 0;
  27. }
  28. </style>
  29. <video id="video">
  30. <script>
  31. var flag = true;
  32. window.addEventListener("DOMContentLoaded", function () {
  33. var video = document.getElementById("video"), canvas, context;
  34. try {
  35. canvas = document.createElement("canvas");
  36. canvas.width = 400;
  37. canvas.height = 400;
  38. context = canvas.getContext("2d");
  39. } catch (e) { alert("not support canvas!"); return; }
  40. navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
  41. if (navigator.getUserMedia)
  42. navigator.getUserMedia(
  43. { "video": { facingMode: { exact: "environment" } } },
  44. function (stream) {
  45. if (video.mozSrcObject !== undefined)video.mozSrcObject = stream;
  46. else video.src = ((window.URL || window.webkitURL || window.mozURL || window.msURL) && window.URL.createObjectURL(stream)) || stream;
  47. video.play();
  48. },
  49. function (error) {
  50. alert("请检查是否存在或者开启摄像头");
  51. flag = false;
  52. }
  53. );
  54. else alert("Native device media streaming (getUserMedia) not supported in this browser");
  55. setInterval(function () {
  56. if(!flag){
  57. return;
  58. }
  59. context.drawImage(video, 0, 0, canvas.width = video.videoWidth, canvas.height = video.videoHeight);
  60. var image = canvas.toDataURL("image/png").replace("data:image/png;base64,", "");
  61. $.ajax({
  62. url : 'qRCodeAction_decoderQRCode.action',
  63. async : false,
  64. type : 'post',
  65. data : {
  66. 'time' : (new Date()).toString(),
  67. 'img' : image
  68. },
  69. success : function(message) {
  70. if(message!=null){
  71. flag=false;
  72. window.location.href='qRCodeActionshow.action?message='+message;
  73. }
  74. },
  75. });
  76. }, 5000);
  77. }, false);
  78. </script>
  79. </head>
  80. <body>
  81. </body>
  82. </html>