In fact, the qrscanner plug-in is not a big problem. The only problem is that on some mobile phones, the camera preview cannot be started when it is first opened. To be exact, the camera preview has been opened, but it is blocked by a layer of white. After a long time of research, no reason has been found, but the solution has been figured out, that is to call the camera preview Destroy the code scanning function once before.
The code is as follows:
//Scan payment
$("#scan-text").html("Scan");
if (typeof QRScanner != "undefined") {
// Get and scan code if you don't have permission
QRScanner.prepare(onDone);
} else {
// Request permission failed
weihuan_tips("Scan code failed to load...", "center", 2000);
}
function onDone(err, status) {
//Destroy once before starting
QRScanner.destroy();
if (err) {
console.error(err);
}
//If you get permission
if (status.authorized) {
// Start scan code
$("body").css({
background: "transparent"
});
QRScanner.scan(displayContents);
$("#scan-text").html("Scanning code...");
function displayContents(err, text) {
// Scan code failure
if (err) {
weihuan_tips("Start scanning code error...", "center", 2000);
} else {
// Successful scan code
app.dialog.progress();
var scan_user_id = localStorage.getItem("user_id");
var rece_user_id = GetUrlPara("user_id", text);
var type = GetUrlPara("type", text);
if (type == 2) {
$.ajax({
url: api + "scan-success.php",
data: {
type: type,
scan_user_id: scan_user_id,
rece_user_id: rece_user_id
},
type: "POST",
async: true,
timeout: 5000,
dataType: "json",
success: function(data) {
if (data.code == 200) {
app.dialog.close();
$("#scan-text").html("Scanning code successfully");
homeView.router.navigate("/scan-pay/", {
context: {
ID: data.ID,
user_id: rece_user_id,
user_name: GetUrlPara("user_name", text)
}
});
} else {
app.dialog.close();
QRScanner.prepare(onDone);
}
}
});
}
}
}
} else {
// Without
weihuan_tips(
"Please give the app permission with camera...",
"center",
2000
);
}
}