可通过MediaDevices.getUserMedia结合jsQR库实现扫码填入搜索框：先获取摄像头权限并渲染视频流，再逐帧解码二维码，成功后自动填充输入框并触发input事件，同时提供状态反馈与资源释放机制。
如果您希望在网页中实现搜索框与扫码功能的直接联动，HTML5 本身并未内置原生的扫码 API，但可通过结合 MediaDevices.getUserMedia 与第三方解码库（如 jsQR）捕获视频流并识别二维码，再将结果自动填入输入框。以下是实现该功能的具体步骤：
一、获取摄像头权限并启动视频流
该步骤用于初始化媒体设备，使页面能够访问用户设备的摄像头，并将实时画面渲染到 <video> 元素中，为后续图像帧采集提供数据源。
1、创建一个隐藏的 <video> 元素和一个 <canvas> 元素，用于绘制视频帧。
2、调用 navigator.mediaDevices.getUserMedia({ video: true }) 请求摄像头权限。
立即学习“前端免费学习笔记（深入）”；
3、成功获取媒体流后，将其赋值给 <video> 元素的 srcObject 属性。
4、调用 video.play() 启动视频播放。
二、在视频帧中持续检测二维码
该步骤通过定时从视频中截取 <canvas> 帧，使用 jsQR 库对图像进行灰度处理与二维码解析，识别成功后触发输入框填充动作。
1、在 requestAnimationFrame 或 setInterval 循环中执行帧捕获逻辑。
2、调用 canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height) 将当前视频帧绘制到 canvas。
3、使用 canvas.getContext('2d').getImageData(0, 0, width, height) 获取像素数据。
4、将像素数据传入 jsQR() 函数，判断是否返回有效二维码对象。
三、将识别结果自动填入指定搜索框
该步骤在二维码成功解析后，将解码得到的字符串内容注入目标 <input type="text"> 或 <textarea> 元素，并可选地触发输入事件以激活绑定的监听器（如搜索建议、表单验证等）。
1、通过 document.querySelector 或 getElementById 获取目标搜索框 DOM 元素。
2、将 jsQR 返回的 result.data 赋值给该元素的 value 属性。
3、调用 element.dispatchEvent(new Event('input', { bubbles: true })) 模拟用户输入事件。
4、可选：调用 element.focus() 确保输入框获得焦点，便于用户后续编辑或提交。
四、添加扫码状态反馈与异常处理
该步骤用于提升用户体验，通过视觉提示告知用户当前扫码状态（如“等待扫描”、“识别中”、“识别成功”），同时捕获摄像头不可用、解码失败等异常场景并给出明确响应。
1、在页面中插入一个状态提示区域（如 <div id="scan-status">）。
2、在 getUserMedia 成功回调中设置状态为 “摄像头已启用，准备就绪”。
3、在 getUserMedia 失败时，将状态更新为 “无法访问摄像头，请检查权限设置”。
4、每次 jsQR 解析失败时，不更新输入框，保持状态为 “未检测到有效二维码”；成功时更新为 “已填入：{result.data}”。
五、停止扫码并释放媒体资源
该步骤确保在用户离开扫码界面或主动关闭功能时，及时终止视频流以节约设备性能与带宽，并防止隐私泄露风险。
1、遍历 video.srcObject.getTracks() 中所有 MediaStreamTrack。
2、对每个 track 调用 track.stop() 方法。
3、将 video.srcObject 设置为 null。
4、清除正在运行的 requestAnimationFrame 或 setInterval 句柄。
