浏览器中如何实时调用摄像头扫描二维码?
网友回复
可以实现,使用这个插件html5-qrcode就能实现
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>二维码扫描器</title> <!-- 引入 html5-qrcode.js --> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/html5-qrcode.min.js"></script> <style> body { font-family: Arial, sans-serif; display: flex; flex-direction: column; align-items: center; padding: 20px; background-color: #f0f0f0; } #qr-reader { width: 100%; max-width: 500px; margin-bottom: 20px; } #qr-reader__dashboard_section { border: 2px solid #007bff; border-radius: 10px; overflow: hidden; } #start-button, #stop-button { padding: 10px 20px; font-size: 16px; margin: 5px; cursor: pointer; background-color: #007bff; color: white; border: none; border-radius: 5px; } #stop-button { background-color: #dc3545; } #start-button:hover, #stop-button:hover { opacity: 0.9; } #result { margin-top: 20px; padding: 15px; background-color: white; border-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); word-break: break-all; min-height: 20px; } .hidden { display: none; } </style> </head> <body> ...
点击查看剩余70%