HTML5获取摄像头和视频控制接口进行扫描二维码

﹏ヽ暗。殇╰゛Y 2021-07-25 01:30 303阅读 0赞

## 前言：以下是在vue环境实现调用摄像头进行扫描二维码并且返回二维码链接的一个操作，在html文件也是可以调用的，只不过修改进行相应的修改。 ##

--------------------

完整示例及jsQR.js下载地址：[https://download.csdn.net/download/qq\_34227291/12687965][https_download.csdn.net_download_qq_34227291_12687965]

--------------------

**代码：**

<template>
      <div>
        <div class="demo-wrapper">
          <video id="video" width="640" height="480" autoplay="" playsinline muted></video>
          <canvas id="mycanvas" width="640" height="480"></canvas>
        </div>
      </div>
    </template>
    
    <script> import jsQR from "@/assets/js/jsQR.js" export default { data() { return { state: '' } }, mounted() { this.setVideo(); }, methods: { setVideo() { let c = ''; let stop = false; let oid = new URL(window.location.href).searchParams.get('oid'); let did = ''; let wix = ''; let second = false; let video = document.querySelector('video'); let canvas = document.createElement('canvas'); let ctx = canvas.getContext('2d'); console.log(video) video.addEventListener('loadedmetadata', function() { canvas.width = video.videoWidth; canvas.height = video.videoHeight; }); video.addEventListener('play', function() { let setTime = setInterval(function() { if (stop) { return; } ctx.drawImage(video, 0, 0); let imgData = ctx.getImageData(0, 0, canvas.width, canvas.height); const code = jsQR(imgData.data, imgData.width, imgData.height); console.log(code) if (code) { this.state = code.data; console.log(this.state) console.log('停止扫描') clearInterval(setTime) } }, 0); }, ); navigator.mediaDevices.getUserMedia({ audio: false, video: { facingMode: ("environment") } }) .then(stream => { console.log(stream) video.srcObject = stream; }) .catch(e => { alert('加载相机失败:\n' + e); }); // console.log(navigator.mediaDevices.getUserMedia) } } } </script>

[https_download.csdn.net_download_qq_34227291_12687965]: https://download.csdn.net/download/qq_34227291/12687965