我创建了一个 webview 应用程序,我在其中扫描 QR 码。在移动和桌面浏览器上一切正常,但在应用程序中我得到Unable to access video stream (please make sure you have a webcam enabled)
.
我在下面分享一些代码:
这是我用来扫描二维码的 HTML:
<div id="loadingMessage">
Unable to access video stream (please make sure you have a webcam enabled)
</div>
<canvas id="canvas" hidden></canvas>
<div id="output" style="padding-right: 35px;padding-left: 35px;width: fit-content;">
<div><b> QR Code Data:</b> <span id="outputData"></span></div>
</div>
和 JS:
<script>
var video = document.createElement("video");
var canvasElement = document.getElementById("canvas");
var canvas = canvasElement.getContext("2d");
var loadingMessage = document.getElementById("loadingMessage");
var outputContainer = document.getElementById("output");
var outputData = document.getElementById("outputData");
function drawLine(begin, end, color) {
canvas.beginPath();
canvas.moveTo(begin.x, begin.y);
canvas.lineTo(end.x, end.y);
canvas.lineWidth = 4;
canvas.strokeStyle = color;
canvas.stroke();
}
navigator.mediaDevices.getUserMedia({ video: { facingMode: "user" } }).then(function (stream) {
video.srcObject = stream;
video.setAttribute("playsinline", true);
video.play();
requestAnimationFrame(tick);
});
function tick() {
loadingMessage.innerText = "⌛ Loading video..."
if (video.readyState === video.HAVE_ENOUGH_DATA) {
loadingMessage.hidden = true;
canvasElement.hidden = false;
outputContainer.hidden = false;
canvasElement.height = video.videoHeight;
canvasElement.width = video.videoWidth;
canvas.drawImage(video, 0, 0, canvasElement.width, canvasElement.height);
var imageData = canvas.getImageData(0, 0, canvasElement.width, canvasElement.height);
var code = jsQR(imageData.data, imageData.width, imageData.height, {
inversionAttempts: "dontInvert",
});
if (code) {
drawLine(code.location.topLeftCorner, code.location.topRightCorner, "#FF3B58");
drawLine(code.location.topRightCorner, code.location.bottomRightCorner, "#FF3B58");
drawLine(code.location.bottomRightCorner, code.location.bottomLeftCorner, "#FF3B58");
drawLine(code.location.bottomLeftCorner, code.location.topLeftCorner, "#FF3B58");
outputData.innerText = code.data;
}
}
requestAnimationFrame(tick);
}
</script>
我还请求允许在 MainActivity.cs 的运行时授予相机访问权限。
这是与 Xamarin Webview 中的权限相关的代码:
class MyWebClient : WebChromeClient
{
Activity mContext;
public MyWebClient(Activity context)
{
this.mContext = context;
}
public override void OnPermissionRequest(PermissionRequest request)
{
mContext.RunOnUiThread(() => {
request.Grant(request.GetResources());
});
}
}
我还在清单文件中使用了以下权限:
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />