vue2/3 - H5 移动端网页中调用手机摄像头扫描二维码 / 条形码功能，在h5手机网页里调起相机摄像头进行二维码或条形码扫描效果详细教程（详细示例组件源码，一键复制开箱即用！）

Vue.js结合HTML5的WebRTC技术可以实现H5页面调用原生摄像头进行扫码功能。通常的做法是利用浏览器提供的`navigator.mediaDevices.getUserMedia()` API获取用户的摄像头权限，并通过`getUserMedia()`请求访问设备。然后，你可以使用第三方库如jsqrcode-reader-api或者 ZXing JavaScript 库来识别扫描到的条形码。 以下是一个简单的步骤概述： 1. 引入必要的库和模块： ```html <script src="https://cdn.jsdelivr.net/npm/@vue/web-component-wrapper"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jsqrcode-reader/1.0.6/jsqrcode.min.js"></script> ``` 2. 在Vue组件中使用ref绑定相机元素： ```html <template> <video ref="scanner" id="scanner" style="display:none;"></video> </template> ``` 3. 使用`@mediaStream`事件处理视频流，并启动扫码功能： ```javascript <script> export default { mounted() { navigator.mediaDevices.getUserMedia({ video: true }) .then(stream => { this.$refs.scanner.srcObject = stream; this.$refs.scanner.play(); // 初始化二维码识别实例 const scanner = new JsQR(this.$refs.scanner); scanner.callback = data => { console.log(&#39;Scanned:&#39;, data.result); // 打印扫描结果 }; }); } } </script> ``` 4. 用户可以选择停止摄像头或者关闭扫码功能： ```javascript methods: { stopScanner() { this.$refs.scanner.pause(); // 停止摄像头 if (this.$refs.scanner.srcObject) { this.$refs.scanner.srcObject.getTracks().forEach(track => track.stop()); // 关闭视频源 } }, } ```