QR Code扫码成功后如何自动在新页面输出二维码内信息

核心改动是将扫码成功后的alert弹窗逻辑替换为自动跳转新页面渲染结果，两个核心环节的触发逻辑明确如下：

一、打开摄像头环节触发配置 #

• 触发动作必须绑定用户主动操作事件：比如绑定到页面「开始扫码」按钮的click事件上，不要在页面初始加载时直接调用摄像头权限，否则会被浏览器默认拦截，导致摄像头拉起失败
• 执行顺序严格按以下流程走：
  1. 调用navigator.mediaDevices.getUserMedia申请摄像头权限，参数优先指定后置环境摄像头，适配移动端扫码场景
  2. 权限通过后，将返回的媒体流绑定到页面的<video>标签上，监听视频的loadedmetadata事件，确认视频帧可以正常渲染后，再启动二维码扫描逻辑
  3. 提前做好异常兜底：如果用户拒绝摄像头权限，直接在当前页提示开启权限即可，不要循环发起权限申请
• 摄像头未完成加载前，禁止启动扫描任务，避免空帧报错、无意义的性能消耗

二、扫码识别环节触发配置 #

• 扫描任务触发时机：确认视频流正常输出后，用requestAnimationFrame做逐帧画面抓取，不要用间隔小于100ms的setInterval轮询，避免占用过多CPU导致页面卡顿
• 识别成功判定规则：不要单帧解析到内容就触发成功逻辑，需要连续2-3帧解析到完全一致的二维码内容，才判定为识别成功，避免画面晃动、虚焦导致的误识别
• 识别成功后的动作顺序：
  1. 第一时间停止摄像头媒体流（调用媒体流track的stop()方法），终止帧扫描的动画回调，释放摄像头资源，避免重复触发识别
  2. 移除原有的alert逻辑，对解析出的二维码内容做安全转义：内容较短时直接拼接在结果页URL的query参数中，内容较长时存入sessionStorage做临时中转
  3. 调用window.open('/scan-result', '_blank')打开结果新页面，新页面初始化时直接从URL参数或sessionStorage中读取二维码内容，渲染到页面即可

踩坑提示：跨页传参时不要给window.open加noopener属性，否则部分浏览器会阻断sessionStorage的跨页读取；结果页读取完临时存储的二维码内容后要及时清除，避免后续打开结果页残留旧数据。

内容的提问来源于stack exchange，提问作者Samet Can Yılmaz