VueQrcodeReader实现调用手机或pc摄像头识别二维码效果代码-html代码-BFW代码库

VueQrcodeReader实现调用手机或pc摄像头识别二维码效果代码

代码语言：html

所属分类：其他

代码描述：VueQrcodeReader实现调用手机或pc摄像头识别二维码效果代码，可实时输出识别的二维码，不用调用微信的sdk就可直接输出识别，支持pc和手机端。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/VueQrcodeReader.umd.min.js"></script>
</head>

<body>
    <h3>注：需要在手机端预览，PC端无效果，此插件自动调用手机后置摄像头！</h3>
    <div id="app">
        <p>
            上次结果： <b>{{ decodedContent }}</b>
        </p>

        <p class="error">
            {{ errorMessage }}
        </p>

        <qrcode-stream @decode="onDecode" @init="onInit"></qrcode-stream>
    </div>
    <script>
        new Vue({
          el: '#app',
        
          data() {
            return {
              decodedContent: '',
              errorMessage: ''
            }
          },
        
          methods: {
            onDecode(content) {
              this.decodedContent = content
            },
        
            onInit(promise) {
              promise.then(() => {
                console.log('成功初始化！ 准备扫描！.........完整代码请登录后点击上方下载按钮下载查看