HTML5 摄像头扫码器 - 自动扫码+音频+回调

# 功能说明 #
  • 📷 调用手机/电脑摄像头实时扫码,无需微信 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 协议访问,否则浏览器会阻止摄像头调用。

    免责声明:本网站提供的工具仅供学习交流使用,请勿用于商业及非法用途,否则后果自负。 本站不保证功能的稳定性和可用性,使用即表示您同意本声明。

    本站部分文章资讯、网站资源、素材源码等内容均为设计师提供、网友推荐、互联网整理而来(部分报媒/平媒内容转载自网络合作媒体), 仅供学习参考,如有侵犯您的版权,请联系我们,本站将在三个工作日内改正。

    邮箱:services@weboss.hk 咨询热线:020-22043297 QQ:595542 QQ:510551