SOURCE

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 outputMessage = document.getElementById("outputMessage");
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: "environment" } }).then(function (stream) {
    video.srcObject = stream;
    video.setAttribute("playsinline", true);
    video.play();
    requestAnimationFrame(tick);
});
var last;
function tick() {
    loadingMessage.innerText = "⌛ 视频加载 .."
    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");
            outputMessage.hidden = true;
            outputData.parentElement.hidden = false;
            outputData.innerText = code.data;
            if (last != code.data) {
                last = code.data; 
            }
        } else {
            outputMessage.hidden = false;
            outputData.parentElement.hidden = true;
        }
    }
    requestAnimationFrame(tick);
}

<h1> 纯 JS 手机网页扫描二维码  </h1>

<p>需要在https下使用 ，在 Android 手机的浏览器中打开可以扫描二维码，
    纯 javascript 二维码解码库。</p>
<div id="loadingMessage">  无法访问视频流 (请确保已启用网络摄像机) </div>
<canvas id="canvas" hidden></canvas>
<div id="output" hidden>
	<div id="outputMessage">未检测到二维码。</div>
	<div hidden><b>二维码数据:</b> 
        <span id="outputData"></span>
    </div> 
</div>

<script>



 
</script>

body {
    font-family: 'Ropa Sans', sans-serif;
    color: #333;
    max-width: 640px;
    margin: 0 auto;
    position: relative;
}

#githubLink {
    position: absolute;
    right: 0;
    top: 12px;
    color: #2D99FF;
}

h1 {
    margin: 10px 0;
    font-size: 40px;
}

#loadingMessage {
    text-align: center;
    padding: 40px;
    background-color: #eee;
}

#canvas {
    width: 50%;
}

#output {
    margin-top: 20px;
    background: #eee;
    padding: 10px;
    padding-bottom: 0;
}

#output div {
    padding-bottom: 10px;
    word-wrap: break-word;
}

#noQRFound {
    text-align: center;
}