Vue.js 使用组件通过CDN读取条形码

我想通过CDN安装一个组件来读取条形码

我尝试了以下方法：

newvue({
el:“应用程序”，
数据：{
读者化：{
宽度：640，
身高：480
}
},
方法：{
罗吉特（数据）{
console.log（'检测到'，数据）
}
},
组成部分：{
//夸加斯坎纳
},
})

---

我通过使用CDN构建组件，成功地使用了

quagga扫描仪。它作为默认包工作。这是现场直播。我使用它，它在
console.log
上给我输出

注意：使用好的摄像头读取条形码。Stackoverflow代码段将不起作用，因为您没有从该代码段获得“摄影机”权限


Vue.component（'quagga-scanner'{
道具：{
未检测：{
类型：功能，
},
未处理：{
类型：功能，
},
读卡器类型：{
类型：字符串，
默认值：“代码读取器”，
},
读者化：{
宽度：{
类型：数字，
默认值：640，
},
高度：{
类型：数字，
默认值：480，
}
}
},
数据（）{
返回{
夸加斯塔特：{
输入流：{
键入：“LiveStream”，
限制条件：{
宽度：{
min:this.readerSize.width
},
高度：{
min:this.readerSize.height
},
facingMode:“环境”，
方面：{
民:1,，
最高：2
}
}
},
定位器：{
补丁大小：“中等”，
半样本：正确
},
Numof工人：4，
频率：10，
解码器：{
读者：[{
格式：this.readerType，
配置：{}
}]
},
定位：正确
},
}
},
安装的（）{
this.init（）；
},
方法：{
init（）{
init（this.quaggaState，函数（err）{
如果（错误）{
返回console.log（err）；
}
Quagga.start（）；
});
Quagga.onDetected（this.onDetected？this.onDetected:this.\u onDetected）；
Quagga.onProcessed（this.onProcessed？this.onProcessed:this.\u onProcessed）；
},
雷尼特（）{
嘎嘎。停止（）；
this.init（）；
},
getImage（）{
const canvas=Quagga.canvas.dom.image；
返回canvas.toDataURL（）；
},
_已处理（结果）{
让drawingCtx=Quagga.canvas.ctx.overlay，
drawingCanvas=Quagga.canvas.dom.overlay；
如果（结果）{
如果（结果框）{
clearRect（0，0，parseInt（drawingCanvas.getAttribute（“宽度”）），parseInt（drawingCanvas.getAttribute（“高度”））；
result.box.filter（函数（框）{
返回框！==result.box；
}).forEach（功能（框）{
Quagga.ImageDebug.drawPath（框{
x:0,，
y:1
}，drawingCtx{
颜色：“绿色”，
线宽：2
});
});
}
如果（结果框）{
Quagga.ImageDebug.drawPath（result.box{
x:0,，
y:1
}，drawingCtx{
颜色：“00F”，
线宽：2
});
}
if（result.codesult&&result.codesult.code）{
Quagga.ImageDebug.drawPath（result.line{
x：‘x’，
y:‘y’
}，drawingCtx{
颜色：“红色”，
线宽：3
});
}
}
},
_未检测（结果）{
console.log（'检测到：'，结果）；
},
},
模板：`
`
})
新Vue({
el:“应用程序”，
数据：{
读者化：{
宽度：640，
身高：480
}
},
方法：{
罗吉特（数据）{
console.log（'检测到'，数据）
},
}
})

文件
/*为了正确放置跟踪*/
帆布画，
canvas.drawingBuffer{
位置：绝对位置；
左：0；
排名：0；
}
vue中cdn可能无法使用quagga扫描仪。为此，您可以尝试使用普通javascript和cdn。我尝试用你的代码解决错误，但仍然不起作用