# 功能说明 #
- 📷 调用手机/电脑摄像头实时扫码,无需微信 JSSDK 权限
- 🔊 支持循环播放背景音乐(MP4/MP3 等格式)
- 🧠 智能处理扫码结果:网址自动跳转,纯文本显示并带重试按钮
- 🔗 支持将扫码结果回调至自定义 API(GET 方式,区分文本/链接)
- 🎨 自带绿色四角扫码框 + 扫描线动画,视觉友好
# 请求方式 #
- Method: GET(直接访问页面 URL 即可)
# 页面地址 #
https://api.weboss.hk/h5scan/scan.html
(请将文件部署到您的 HTTPS 服务器,或使用本地 localhost 测试)
# 参数 (均为可选) #
video : 背景音乐/音频地址(支持 .mp4 .mp3 .m4a 等),传入后自动循环播放;不传则无声音。
redirect_uri : 回调接收 URL,当存在此参数时,扫码结果将 GET 方式提交给您指定的地址。
▪ 扫码结果为网址 → 回调参数为 ?link=URL编码后的网址
▪ 扫码结果为纯文本 → 回调参数为 ?txt=URL编码后的文本
# 行为说明(无 redirect_uri 时) #
→ 扫码内容以 http:// 或 https:// 开头 → 页面直接跳转至该网址。
→ 扫码内容为纯文本(非网址) → 页面底部显示文本内容,并提供“重新扫码”按钮,音频继续播放。
# 行为说明(有 redirect_uri 时) #
→ 页面将扫码结果按规则拼接参数后,跳转至 redirect_uri 指定的地址。
→ 示例:scan.html?redirect_uri=https://your.com/api.php
扫码到 "123456" → 跳转 https://your.com/api.php?txt=123456
扫码到 "https://baidu.com" → 跳转 https://your.com/api.php?link=https://baidu.com
# 技术特点 #
{
"扫码库": "jsQR (轻量级二维码识别)",
"摄像头调用": "getUserMedia API,需 HTTPS 环境",
"适用环境": "微信/浏览器/WebView 均可,无需公众号权限",
"音频支持": "自动播放(部分浏览器需用户首次交互)",
"结果处理": "同步识别,识别成功后自动停止扫描"
}
# 示例链接(点击即可体验) #
✅ 该页面基于 HTML5 摄像头技术,无需微信 JSSDK 配置,任何支持摄像头的浏览器均可使用。
⚠️ 注意:务必使用 HTTPS 协议访问,否则浏览器会阻止摄像头调用。