uni-app 扫码不显示摄像头内容 取景框偏移到屏幕视野左上角之外
uni-app 扫码不显示摄像头内容 取景框偏移到屏幕视野左上角之外
产品分类
uniapp/App
示例代码：
do_scan(){ //调用扫码程序
return new Promise((resolve, reject) => {
uni.scanCode({
onlyFromCamera: true,
scanType: ['barCode'],
success(res) {
//console.log('扫码后回调值：', res);
resolve(res.result);
},
fail() {
reject();
}
})
});
},
async scan_auto2(){ //自动扫码，根据格式自动匹配
let me = this;
try{
let str = await me.do_scan();
//console.log('扫码结果：', str);
me.formData.scan = str;
setTimeout(() => me.scan_auto2(), 500);
}catch(e){
me.$hapiwan.show_err('扫码失败');
console.log('扫码失败');
this.scan_focus = false;
this.auto_focus();
}
},
5 回复
回复 q***@xiaoantech.com: 请提供下复现机型具体信息，另外用hello uni-app示例试下是否复现？如果不能复现，请提供下最小化复现示例（上传附件）方便排查哦
在使用 uni-app 进行扫码功能开发时，如果遇到摄像头内容不显示或取景框偏移到屏幕左上角之外的问题，可能是由于以下几个原因导致的。你可以按照以下步骤进行排查和修复：
1. 检查 camera 组件的使用
确保你在页面上正确使用了 camera 组件，并且组件的样式设置正确。以下是一个简单的 camera 组件示例：
<camera style="width: 100%; height: 100%;"></camera>确保 camera 组件的样式设置了合适的宽度和高度，以覆盖整个屏幕或指定区域。
2. 检查 scan 组件的使用
如果你使用了 scan 组件进行扫码，确保 scan 组件的样式和位置设置正确。以下是一个简单的 scan 组件示例：
<scan style="width: 100%; height: 100%;"></scan>3. 检查 position 和 z-index 样式
如果取景框偏移到屏幕左上角之外，可能是由于 position 和 z-index 样式设置不当导致的。确保 camera 或 scan 组件的 position 设置为 relative 或 absolute，并且 z-index 设置合理。
camera {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}4. 检查父容器的样式
确保 camera 或 scan 组件的父容器样式设置正确，特别是 overflow 属性。如果父容器的 overflow 设置为 hidden，可能会导致子元素的内容被裁剪。
.parent-container {
position: relative;
width: 100%;
height: 100%;
overflow: visible; /* 确保不裁剪子元素 */
}5. 检查设备的摄像头权限
确保你的应用已经获取了设备的摄像头权限。如果权限未授予，可能会导致摄像头内容无法显示。
6. 检查 uni.scanCode API 的使用
如果你使用的是 uni.scanCode API 进行扫码，确保 API 调用正确，并且在回调函数中处理了扫码结果。
uni.scanCode({
success: function (res) {
console.log('扫码结果:', res.result);
},
fail: function (err) {
console.error('扫码失败:', err);
}
});