vue项目真机运行为啥没有调用摄像头?请大佬们求教
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue项目真机运行为啥没有调用摄像头?请大佬们求教相关的知识，希望对你有一定的参考价值。
<script type="text/javascript">
scan = null;//扫描对象
mui.plusReady(function ()
mui.init();
startRecognize();
);
window.onload=function()
function startRecognize()
try
var filter;
//自定义的扫描控件样式
var styles = frameColor: "#29E52C",scanbarColor: "#29E52C",background: "#fff"
//扫描控件构造
scan = new plus.barcode.Barcode('bcid',filter,styles);
scan.onmarked = onmarked;
scan.onerror = onerror;
scan.start();
//打开关闭闪光灯处理
var flag = false;
document.getElementById("turnTheLight").addEventListener('tap',function()
if(flag == false)
scan.setFlash(true);
flag = true;
else
scan.setFlash(false);
flag = false;
);
catch(e)
alert("出现错误啦:\n"+e);
;
function onerror(e)
alert(e);
;
function onmarked( type, result )
var text = '';
switch(type)
case plus.barcode.QR:
text = 'QR: ';
break;
case plus.barcode.EAN13:
text = 'EAN13: ';
break;
case plus.barcode.EAN8:
text = 'EAN8: ';
break;
alert( text + " : "+ result );
;
// 从相册中选择二维码图片
function scanPicture()
plus.gallery.pick(function(path)
plus.barcode.scan(path,onmarked,function(error)
plus.nativeUI.alert( "无法识别此图片" );
);
,function(err)
plus.nativeUI.alert("Failed: "+err.message);
);
</script>
使用vue做移动app时，调用摄像头扫描二维码
现在前端技术发展飞快，前端都能做app了，那么项目中，也会遇到调用安卓手机基层的一些功能，比如调用摄像头，完成扫描二维码功能
下面我就为大家讲解一下，我在项目中调用这功能的过程。
首先我们需要一个中间框架，hbuilder
http://www.html5plus.org/doc/zh_cn/accelerometer.html 这个是html5+的文档地址，我们找到Barcode模块，
有这么多，然后我们往下找
找到这段代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Barcode Example</title>
<script type="text/javascript" >
// 扩展API加载完毕后调用onPlusReady回调函数
document.addEventListener( "plusready", onPlusReady, false );
// 扩展API加载完毕，现在可以正常调用扩展API
function onPlusReady() {
var e = document.getElementById("scan");
e.removeAttribute( "disabled" );
}
var scan = null;
function onmarked( type, result ) {
var text = \'未知: \';
switch(type){
case plus.barcode.QR:
text = \'QR: \';
break;
case plus.barcode.EAN13:
text = \'EAN13: \';
break;
case plus.barcode.EAN8:
text = \'EAN8: \';
break;
}
alert( text+result );
}
function startRecognize() {
scan = new plus.barcode.Barcode(\'bcid\');
scan.onmarked = onmarked;
}
function startScan() {
scan.start();
}
function cancelScan() {
scan.cancel();
}
function setFlash() {
scan.setFlash();
}
</script>
<style type="text/css">
*{
-webkit-user-select: none;
}
html,body{
margin: 0px;
padding: 0px;
height: 100%;
}
#bcid {
background:#0F0;
height:480px;
width:360px;
}
</style>
</head>
<body >
<input type=\'button\' onclick=\'startRecognize()\' value=\'创建扫描控件\' />
<input type=\'button\' onclick=\'startScan()\' value=\'开始扫描\' />
<input type=\'button\' onclick=\'cancelScan()\' value=\'取消扫描\' />
<input type=\'button\' onclick=\'setFlash()\' value=\'开启闪光灯\' />
<div id= "bcid"></div>
<input type=\'text\' id=\'text\'/>
</body>
</html>
这段代码，一定要放在我们vue的index.html页面里，别问我为什么，我也不知道，反正就是要全局
// 扩展API加载完毕后调用onPlusReady回调函数
document.addEventListener( "plusready", onPlusReady, false );
// 扩展API加载完毕，现在可以正常调用扩展API
function onPlusReady() {
var e = document.getElementById("scan");
e.removeAttribute( "disabled" );
}
var scan = null;
我写的是这样的,这代码是放在methods里面的
startRecognize() {
scan = new plus.barcode.Barcode(\'bcid\');
scan.onmarked = onmarked;
this.startScan
}
startScan () {
scan.start();
}
如果你们试了不行，那就在startRecognize函数内加一个setTimeout,延迟个200ms，我试了是可以使用的，扫描成功后会有个alert，这个可以改成扫描成功后的函数或者你们自己想要做的事情。
以上是关于vue项目真机运行为啥没有调用摄像头?请大佬们求教的主要内容，如果未能解决你的问题，请参考以下文章
VS2019，调试的时候控制台无法显示输出，求教各位大佬这是怎么回事？
设置oracle11g定时自动备份，为啥没有备份？请大神们帮我看看为啥！
为啥我的vscode写html 代码不能运行 Code language not supported or defined. 有没有大佬救救我？